[DAY - 109] Node / MySQL 연결

오늘은 MySQL을 연결하여 db를 업데이트, 관리하는 것을 배웠다.

결국 동적 서버에 업로드하고 실시간으로 데이터를 주고받으려면 sql이 필요하기 때문에 서버에 올리기 전에 로컬에서 사용법을 배웠다.

 

1) SQL db 생성

MySQL에서 database와 초기 데이터 출력을 위한 table을 생성했다.

 

create database todo;
use todo; 

create table todos (
	id int primary key auto_increment,
    text varchar(100) not null ,
    isChk boolean  not null
);

insert into todos (id, text, isChk ) value
(1,'친구만나기', true),
(2,'점심먹기',false),
(3,'공부하기',true),
(4,'커피마시기',false),
(5,'운동하기',false);

select * from todos;

mysql

 

2) MySQL 연결

mysql2 라이브러리 설치

 

yarn add mysql2

https://www.npmjs.com/package/mysql2

mysql2

 

로컬의 MySQL 연결

db의 비밀번호와 이름을 정확하게 작성한다.

 

const mysql = require('mysql2');
const connection = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "12345",
    database: "todo",
});

module.exports = connection;

 

3) controllers.js

todos.controllers.js 파일을 아래와 같이 수정해 준다.

제일 먼저 database를 db 변수에 담아주고 현재 db의 내용을 출력해 주는 getTodos를 작성한다.

 

let db = require('../models')

const getTodos = (req, res) => {
    const sql = 'SELECT * FROM todos'

    db.query(sql, (error, result) => {
        if (error) {
            console.log(`---${error}---`);
        } else {
            res.send(result)
        }
    })
}

 

sql문을 호출하는 문법은 아래와 같다.

 

db.query(쿼리형식, [전달값], (에러, 쿼리결과)=>{})

 

slice의 내용은 변함이 없다.

 

export const getTodos = createAsyncThunk(
    'todos/getTodos',
    async () => {
        const res = await axios.get(`http://localhost:3000/todos`)
        return res.data
    }
)

4) 삭제

삭제 버튼을 눌렀을 때의 로직은 

삭제 버튼 클릭(front)

-> Slice함수 호출(front)

-> controllers 호출(back)

-> 성공시 Slice함수 호출(front)

-> Slice extraReducers 호출

이런 식으로 흘러간다.

 

수정을 해주어야 할 부분은 controllers 함수와 extraReducers이다.

삭제의 경우 클릭한 아이템의 id만 넘겨주면 되기 때문에 params로 넘겨주었다.

 

const deleteTodos = (req, res) => {
    const id = Number(req.params.id)
    const sql = `
    DELETE 
    FROM todos
    WHERE id = ${id}
    `
    db.query(sql, (error, result) => {
        if (error) {
            console.log(`---${error}---`);
        } else {
            res.send(result)
        }
    })
}

 

delTodos가 성공적으로 실행되었을 때 이후 동작을 나타내는 addCase를 수정해 준다.

 

            .addCase(delTodos.fulfilled, (state, { payload: id }) => {
                state.data = state.data.filter(item => item.id !== id)
            })

 

5) 추가

추가의 경우 sql문에서 INSERT를 사용하면 된다.

 

const postTodos = (req, res) => {
    const text = req.body.text
    const sql = `
    INSERT INTO todos (text, isChk) 
    VALUES (?,false);
    `
    db.query(sql, [text], (error, result) => {
        if (error) {
            console.log(`---${error}---`);
        } else {
            res.send(result)
        }
    })
}

 

6) 체크박스

체크박스의 경우 클릭했을 때 checked를 매개변수로 넘겨주기 때문에 따로! isChk처럼 쓰지 않아도 된다.

 

    const handleChk = e => {
        const currentChk = e.target.checked
        dispatch(putTodos({ id, currentChk }))
    }

const putTodos = (req, res) => {
    const id = Number(req.params.id)
    const isChk = req.body.currentChk
    const sql = `
    UPDATE todos
    SET isChk = ?
    WHERE id = ?
    `
    db.query(sql, [isChk, id], (error, result) => {
        if (error) {
            console.log(`---${error}---`);
        } else {
            res.send(result)
        }
    })
}

            .addCase(putTodos.fulfilled, (state, action) => {
                const { id, currentChk } = action.payload;
                const item = state.data.find(item => item.id === id);
                if (item) {
                    item.isChk = currentChk;
                }
            });