TIW 1월 29일 - todolist 2 ( db 연동, cors, mysql )

todolist 2

Todo.js ( db 연동 )

• 컴포넌트를 렌더링한 후(useEffect) 구축해둔 nodejs-express 서버로 api 요청을 보내도록 했다. 리스트의 key값으로 전역 변수로 0부터 차례로 숫자가 증가하게 했다가 마음에 들지 않아 uuid를 사용했다.

useEffect(() => {
  fetch('http://127.0.0.1:3001/api/todos')
    .then((res) => {
      return res.json();
    })
    .then(({ todos }) => {
      setTodoList(() => todos.map((item) => <List value={item} key={uuidv1()} />));
    });
}, []);

cors, mysql

cors

• react 서버는 localhost:3000
• nodejs-express 서버는 localhost:3001

에서 실행중이다. port가 다르기 때문에 Same-origin policy를 위배한다. 따라서 Cross-Origin Resource Sharing을 해주기 위한 조치를 취해줘야 했다.
request 중 simple request에 해당하는 상황이기 때문에 nodejs-express 서버측에서만 조치를 취해주면 됐다.

• Same-origin policy 위반 상황 예시

  

mysql

• ncloud에 docker-mysql 컨테이너를 실행시켜놨다. api 요청이 들어오면 mysql2를 이용해서 ncloud mysql에서 todolist를 가져와 응답한다.

const express = require('express');
const router = express.Router();
const mysql = require('mysql2');

const allowOrigins = ['http://127.0.0.1:3000', 'http://localhost:3000'];

/* GET home page. */
router.get('/todos', function(req, res, next) {
    const { origin } = req.headers;
    if (allowOrigins.includes(origin)) {
        res.setHeader('Access-control-allow-origin', origin);
    }
    let todos = [];

    const connection = mysql.createConnection({
        host: process.env.DB_HOST,
        user: process.env.DB_USER,
        password: process.env.DB_PASSWORD,
        database: process.env.DB_SCHEMA_TODOS,
    });

    connection.connect();

    connection.query(
        'SELECT * FROM todo_list',
        async (err, results, fields) => {
            if (err) throw err;
            for (let i = 0; i < results.length; i++) {
                const { todo, add_time } = results[i];
                todos.push(todo);
            }
            res.send({ todos });
        }
    );

    connection.end();
});

module.exports = router;

작동 모습

전체 코드 링크

• https://gist.github.com/ktseo41/21ee99c7bd4075dfe23a24c9bfb39945

할 일

• todolist에 추가하면 실제 db에도 추가되도록 하기
• fetch 요청 중 시각적인 효과를 보여주기(loading... 혹은 spinner gif 등)
• docker-mysql 한글 적용
• useFetch 등 fetch보내는 기능 분리
• mysql2에서 단순 connection이 아니라 pool 이용해보기

참고

• Same-origin policy : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
• Cross-Origin Resource Sharing : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
  - CORS 참고 2 : https://dev.to/nicolus/what-you-should-know-about-cors-48d6

생각

• docker-mysql 한글 적용이 또 말썽이다. initdb.sql파일에서 한글로 row들을 넣어주면 공백으로 들어간다.
• 복습이고 어렵지 않아서 조금씩 작동되게 하는게 재밌다. 마음에 안드는 코드들이 생기는데 리팩토링도 이것저것 생각하면서 천천히 해봐야겠다. 1년전을 생각하면 정말 엄청난 발전이다.
• 부스트캠프, 면접 준비를 하면서 공부한 내용들이 여기저기서 쓰이고 있다. 공부할때는 면접만을 위한 공부 같았는데 간단한 todolist를 구현할때도 지식이 필요하다.(이번에는 CORS)