[TIL - 20221124] maria DB, node 연동

오늘 배운 것

1. maria db node 와 연동

연동 시 필요한 내용

1. 연결할 DB를 소유한 컴퓨터의 IP나 Domain과 port
2. 사용할 DB 이름(sid라고 하기도 한다.)
3. 계정 정보 ID, password

쿼리 작성 법

connection.query("sql구문", (err, results, fields) => {
  if (err) {
    // 에러 시, 처리할 내용
  } else {
    // 지정한 sql 작업에 대해 정상적으로 수행되었을 때
  }
});

DB 연동할 때 필요한 정보는 .env 라는 이름의 설정파일에 저장할 수 있다.
예시)

HOST:'127.0.0.1' // DB 접속할 IP
MYSQLPORT:3306    // DB 접속할 포트번호
MYSQLUSER:'root' // DB 접속 계정 이름
MYSQLPW:'password' // DB 접속 계정 비밀번호
DATABASE:'DB01'    // 사용할 DB 이름

* 주의할 점은 접속 계정 ID를 지정할 때 USERNAME은 윈도우 상에서 예약어인 것 같아 적용이 되지 않았다. 이런 설정은 피하는 것이 좋다.

해당 설정 파일에 저장한 정보 가져올 땐 dotenv 라이브러리를 필요로 한다.

const dotenv = require('dotenv');
const path = require('path');

dotenv.config({
      // path.join 사용하기 위해 path 라이브러리도 필요
    path:path.join(__dirname, '.env');
});

2. DB 데이터 가져와 클라이언트에 띄워주기

먼저, html, css와 같은 정적(static) 파일 저장할 public이라는 디렉토리 생성 후, 지정해준다.

//정적 파일의 경로를 설정
const express = require('express');
app.use('/', express.static('public'));

해당 public 디렉토리 안에 띄워줄 index.html 을 간단하게 만들어준 후, ajax를 이용해 서버에서 보낸 데이터 받기

1. 서버

   // 사실 2개 이상의 데이터를 받아올 땐 정렬을 하고 띄워, 보내주는 경우가 많다
   connection.query("SELECT * FROM TABLE01 ORDER BY ID DESC", (err, results, fields) => {
   if (err) {
    // 실패했다는 false 결과를 json 형태로 응답 
    res.json({'result':false});
   } else {
    // 성공했다는 true 결과와 함께 sql 결과인 results를 함께 json 형태로 응답
    res.json({'result':true, 'list':results});
   }
   });

2. 클라이언트

   // 버튼 누르면 전체 데이터 띄우도록
   all_btn.addEventListener('click', (e) => {
   //ajax로 데이터 가져오기
   let request = new XMLHttpRequest();
   //요청 생성
   request.open('GET', '/item/all');
   //요청
   request.send('');
   
   request.addEventListener('load', ()=>{
    //출력을 하기 위해서는 JSON 문자열을
    //자바스크립트 객체로 변환
    let data = JSON.parse(request.responseText);
    //데이터 가져오기에 성공한 경우
    if(data.result == true){
      let display = <div>;
      // ...
      // 데이터 가져와 띄우는 코드 display에 더해가며 작성
   
      // list 키에 있는 데이터 가져오기
      let arr = data.list;
   
      for (let artist of arr) {
          content.innerHTML += "<a>" + artist.NAME + "</a>";
      }
   
   } else {
    // 데이터 가져오기 실패했을 때 할 작업
   }
   });

3. URL의 파라미터, 값을 받아와서 페이지마다 번호 지정해, 데이터의 일부분 가져오게 하기

• 파라미터로 전달: URL?이름=값
• URL에 전달: URL/값 - 최근에는 이 방식을 선호

// req.query - 파라미터 읽기
app.get('/artists/list/', (req, res) => {
    // 파라미터 읽기
    // 파라미터 주지 않으면 undefined
        // http://localhost:8000/artists/list?page=3
    const page = req.query.page;
    console.log(page);
});

// req.params - 지정한 변수 읽기
app.get('/artists/list/:page', (req, res) => {
    // URL 에 포함된 파라미터 읽기
    // http://localhost:8000/artists/list/3
    const page = req.params.page;
    console.log(page);
};

데이터 일부분 가져오기

// req.query - 파라미터 읽기
app.get('/artists/list/', (req, res) => {
    // 파라미터 읽기
    // 파라미터 주지 않으면 undefined
        // http://localhost:8000/artists/list?page=3
    const page = req.query.page;
    console.log(page);

  // 일반적으로 첫페이지는 파라미터, 번호 안붙이기도 하기 때문에
      if (!page) {
      page = 1;
    }
      connection.query(
      // ID 순서대로, 3개씩 가져오기
      "SELECT * FROM TABLE01 ORDER BY ID LIMIT ?, 3",
      [(page-1)*3], (err, results, fields) => {
        if (err) {
          res.json({'result':false});
          console.log(err);
        } else {
          res.json({'result':true, 'list':results});
        }
      }
    );
});