[포스코 코딩온 KDT 8기] 웹 풀스택 과정 리액트 개인 프로젝트 | 백엔드(2) - todolist 수정하기, 삭제하기

 

5. todo리스트 수정과 삭제 기능 만들기

저번과 같이 라우터를 먼저 만들어주고 컨트롤러와 연결시켜주자

 

a. todolist 삭제 기능 구현

먼저 간단하게 구현할 수 있는 삭제 기능을 먼저 구현하고자 한다. 리스트 옆에 있는 버튼을 클릭했을때 해당 리스트의 id를 가지고 와서 그 id에 해당하는 튜플을 삭제해주면 된다.

 

위의 api를 보면 /todo/:todoId로 설정되어 있는 것을 알 수 있다. 이럴 경우 컨트롤러에서 req.params.todoId를 통해서 api에 입력된 todoId를 가져와 삭제할 수 있다.

 

Ctodo.js

const db = require('../models');
const models = db.User;

let todolist;

const set = async () => {
    todolist = await models.todo.findAll({});
}

const get_todo = async (req, res) => {
    
    await set();

    const tododata = await todolist;
    const todoarr = {};

    tododata.forEach((data) => {
        todoarr[data.id - 1] = {
            id : data.id,
            title: data.title,
            done: data.done,
        }
    });

    console.log('Ctodo에서 데이터 받아오는지 확인')
    // console.log(tododata);
    console.log(todoarr);
    
    res.json(todoarr);


}

const post_todo = async (req, res) => {
    const update_todo = req.body;
    console.log('보내는 데이터',update_todo);
    // res.send(update_todo);

    await models.todo.create(update_todo);

    const update_title = update_todo.title;

    console.log(update_title);

    //하나씩 찾아올 것이기 때문에 여러개의 투두리스트를 모아서 보내는 방식이 아닌
    //투두리스트를 적고 엔터가 업로드 버튼을 누를때마다 하나씩 보내주고 받아오는 방식 
    const todo_upload = await models.todo.findOne({
        where: {title : update_title},
    });

    console.log('가져온 데이터',todo_upload);
    //이 데이터는 기존 페이지를 유지하면서 기존 리스트 아래로 들어가야한다. 

    // let update_text = {
    //     id: todo_upload.id,
    //     title: todo_upload.title,
    //     done: todo_upload.done,
    // };

    // console.log(update_text);

    //위에 주석 처리한거 없어도 객체 형태로 잘가네
    res.json(todo_upload);


}


const del_todo = async (req, res) => {
    const list_id = req.params.todoId;
    console.log('삭제할 튜플의 아이디', list_id);

    await models.todo.destroy({
        where: {id : list_id},
    })
}

module.exports = {
    get_todo,
    post_todo,
    del_todo,
};

router.js

const express = require('express');
const router = express.Router();
const controller = require('../controller/Ctodo');

router.get('/todos', controller.get_todo);
router.post('/todos', controller.post_todo);
router.delete('/todo/:todoId', controller.del_todo);

module.exports = router;

위와 같이 코드를 짜준 후에 포스트맨에서 api에 특정 아이디를 입력하여 보내주면, 워크밴치에서 삭제된것을 확인할 수 있다.

3번 튜플이 삭제됐다.

 

b. todolist 수정 기능 구현

api 보면 확인할 수 있듯이 api에서 req.params.todoId로 id를 받아오고, 수정된 내용을 req.body로 받아와서 시퀄라이즈의 update로 수정해준다. (확실이 ORM(시퀄라이즈)가 진짜 편하다.)

 

---

여기서 궁금한 점이 생겼는데 get, post, patch, delete의 차이가 궁금하다.

patch는 부분 수정을 요청할 때 사용하고, delete는 말그대로 삭제를 요청할때 사용하는 api라고 한다.

요청별로 알맞는 메소드를 사용하면 된다. put이라는 놈도 있는데 put은 전체 수정을 할려고 할때 사용한다.

---

Ctodo.js

const db = require('../models');
const models = db.User;

let todolist;

const set = async () => {
    todolist = await models.todo.findAll({});
}

const get_todo = async (req, res) => {
    
    await set();

    const tododata = await todolist;
    const todoarr = {};

    tododata.forEach((data) => {
        todoarr[data.id - 1] = {
            id : data.id,
            title: data.title,
            done: data.done,
        }
    });

    console.log('Ctodo에서 데이터 받아오는지 확인')
    // console.log(tododata);
    console.log(todoarr);
    
    res.json(todoarr);


}

const post_todo = async (req, res) => {
    const update_todo = req.body;
    console.log('보내는 데이터',update_todo);
    // res.send(update_todo);

    await models.todo.create(update_todo);

    const update_title = update_todo.title;

    console.log(update_title);

    //하나씩 찾아올 것이기 때문에 여러개의 투두리스트를 모아서 보내는 방식이 아닌
    //투두리스트를 적고 엔터가 업로드 버튼을 누를때마다 하나씩 보내주고 받아오는 방식 
    const todo_upload = await models.todo.findOne({
        where: {title : update_title},
    });

    console.log('가져온 데이터',todo_upload);
    //이 데이터는 기존 페이지를 유지하면서 기존 리스트 아래로 들어가야한다. 

    // let update_text = {
    //     id: todo_upload.id,
    //     title: todo_upload.title,
    //     done: todo_upload.done,
    // };

    // console.log(update_text);

    //위에 주석 처리한거 없어도 객체 형태로 잘가네
    res.json(todo_upload);


}


const del_todo = async (req, res) => {
    const list_id = req.params.todoId;
    console.log('삭제할 튜플의 아이디', list_id);

    await models.todo.destroy({
        where: {id : list_id},
    })
}

const patch_todo = async (req, res) => {
    const list_id = req.params.todoId;
    console.log('수정할 튜플의 id', list_id);

    console.log('수정할 데이터',req.body);

    const update_data = {
        id : list_id,
        title : req.body.title,
        done : req.body.done,
    }

    console.log('받은 데이터 객체화 완료', update_data);

    const update_title = update_data.title;
    const update_done = update_data.done;

    await models.todo.update({
        title : update_title,
        done : update_done,
    },
    { where :  { id : list_id},}
    );

}

module.exports = {
    get_todo,
    post_todo,
    del_todo,
    patch_todo,
};

router.js

const express = require('express');
const router = express.Router();
const controller = require('../controller/Ctodo');

router.get('/todos', controller.get_todo);
router.post('/todos', controller.post_todo);
router.delete('/todo/:todoId', controller.del_todo);
router.patch('/todo/:todoId', controller.patch_todo);

module.exports = router;

이렇게 코드를 짠 뒤에 포스트맨으로 데이터와 함께 원하는 아이디를 api에 함께 적어서 보내면

수정 전

수정 후

이렇게 수정된 것을 확인할 수 있다.

 

이렇게 백엔드 기능은 완성했다. 이제 리액트로 프론트엔드를 만들어보자