KDT 5th 웹개발자 입문 수업 29일차

API

한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 방법

 

 

게시판 서비스를 위한 TABLE 생성

CREATE TABLE board (
	`ID_PK` INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    `TITLE` VARCHAR(100) NOT NULL,
    `CONTENT` VARCHAR(300) NOT NULL,
    `REGISTER_DATE` DATETIME DEFAULT CURRENT_TIMESTAMP,
    `UPDATE_DATE` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

 

const connection = require('./dbConnect');

const boardDB = {
  // 모든 게시글 가져오기
  getAllArticle: (cb) => {
    const queryStr = 'SELECT * FROM mydb.board';
    connection.query(queryStr, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },
};

module.exports = boardDB;

const express = require('express');
const boardDB = require('../controllers/boardController');

const router = express.Router();

// 게시판 페이지 호출
router.get('/', (req, res) => {
  boardDB.getAllArticle((data) => {
    // data 는 하나씩 오는 게 아니라 배열 형태로 오게된다!!!!!
    const ARTICLE = data;
    const articleCounts = ARTICLE.length;
    res.render('db_board', {
      ARTICLE,
      articleCounts,
    });
  });
});

// 글쓰기 페이지 호출
router.get('/write', (req, res) => {
  res.render('db_board_write');
});

router.post('/write', (req, res) => {
  console.log(req.body);
});

router.get('/getAll', (req, res) => {
  boardDB.getAllArticle((data) => {
    res.send(data);
  });
});

module.exports = router;

 

 

const connection = require('./dbConnect');

const boardDB = {
  // 모든 게시글 가져오기
  getAllArticle: (cb) => {
    const selectQuery = 'SELECT * FROM mydb.board';
    connection.query(selectQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },

  // 게시글 추가하기
  writeArticle: (newArticle, cb) => {
    const insertQuery = `INSERT INTO mydb.board (TITLE, CONTENT) VALUE ('${newArticle.title}', '${newArticle.content}');`;
    connection.query(insertQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },

  // ID_PK로 게시글 찾기
  getArticle: (id, cb) => {
    const findQuery = `SELECT * FROM mydb.board WHERE ID_PK = ${id};`;
    connection.query(findQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },

  // ID_PK로 게시글 수정하기
  modifyArticle: (id, originArticle, cb) => {
    const modifyQuery = `UPDATE mydb.board SET TITLE = '${originArticle.title}', CONTENT = '${originArticle.content}' WHERE ID_PK = ${id};`;
    connection.query(modifyQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },

  // ID_PK로 게시글 삭제하기
  deleteArticle: (id, cb) => {
    const deleteQuery = `DELETE FROM mydb.board WHERE ID_PK = ${id};`;
    connection.query(deleteQuery, (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },
};

module.exports = boardDB;

 

affectedRows 값으로 데이터베이스에 INSERT 해준 결과를 알 수 있다. 0은 실패, 1은 성공

// 데이터베이스에 쓴 글을 넣어주기
router.post('/write', (req, res) => {
  console.log(req.body);
  if (req.body.title && req.body.content) {
    boardDB.writeArticle(req.body, (data) => {
      console.log(data);

      if (data.affectedRows >= 1) {
        res.redirect('/dbBoard');
      } else {
        const err = new Error('글 쓰기 실패.');
        throw err;
      }
    });
  } else {
    const err = new Error('글 제목 또는 내용이 없습니다.');
    throw err;
  }
});

 

작성한 글이 DB에 담겼다.

// 글 수정하기
router.post('/modify/:id', (req, res) => {
  if (req.body.title && req.body.content) {
    boardDB.modifyArticle(req.params.id, req.body, (data) => {
      if (data.affectedRows >= 1) {
        res.redirect('/dbBoard');
      } else {
        const err = new Error('게시글 수정 실패');
        err.statusCode = 500;
        throw err;
      }
    });
  } else {
    const err = new Error('게시글 요청 실패');
    err.statusCode = 400;
    throw err;
  }
});

 

// 글 삭제하기
router.delete('/delete/:id', (req, res) => {
  boardDB.deleteArticle(req.params.id, (data) => {
    if (data.affectedRows >= 1) {
      res.send('게시글 삭제 완료');
    } else {
      const err = new Error('게시글 삭제 실패');
      err.statusCode = 400;
      throw err;
    }
  });
});

 

 

Website Cookies

프론트에서 쿠키 사용하기

document.cookie 로 바로 만들 수 있음

document.cookie = "user = kdt; expires= 26 Nov 2023 13:00:00 GMT; path=/";

expires 값과 브라우저의 시간을 비교하여 쿠키가 해당 시간이 되면 자동으로 삭제 처리가 된다.

 

개발자 도구 > Application > Storage > Cookies 에 가서 확인 가능!

 

백엔드에서 쿠키 사용하기

cookie-parser 모듈 사용

npm i -S cookie-parser 로 설치

 

메인 서버에 쿠키 모듈 호출 및 미들웨어를 등록한다.

const cookieParser = require('cookie-parser');

app.use(cookieParser());

 

res.cookie('쿠키 이름', '데이터', '옵션 객체') 로 쿠키를 구우면 된다.

res.cookie('alert', true, {
	expires: new Date(Date.now() + 1000 * 60),
    httpOnly: true,
});

옵션 객체의 expires 는 쿠키가 자동으로 삭제되는 일자를 지정

httpOnly 는 해당 쿠키는 서버와의 http 통신에서만 읽을 수 있는지 여부

프론트에서처럼 JS로 해당 쿠키를 읽으려면 웹브라우저가 이를 차단한다.

 

httpOnly 옵션을 fasle로 해야 http 통신이 발생했을 때에만 쿠키의 값에 접근 가능한 것을 막을 수 있다.

프론트에서 document.cookie 의 값을 읽으려고 하는 것을 허용하는 것

프로트에서 쿠키의 저장된 값을 사용하려면 문자열을 잘라서 사용해야 한다. 하지만 백엔드에서는 localStorage 처럼 사용이 가능하다.

생성된 쿠키에 대한 접근은 req.cookies.쿠키명으로 가능하다