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에 함께 적어서 보내면
수정 전
수정 후
이렇게 수정된 것을 확인할 수 있다.
이렇게 백엔드 기능은 완성했다. 이제 리액트로 프론트엔드를 만들어보자
'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 리액트 개인 프로젝트 | Node.js와 React 연결하기 (1) | 2023.10.11 |
---|---|
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 76일(23.10.05)차 회고 | React - Redux (2) | 2023.10.05 |
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 리액트 개인 프로젝트 | 백엔드(1) - todolist 데이터 가져오기, 업데이트하기 (0) | 2023.10.03 |
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 66일(09.18)차 회고 | React-JSX (0) | 2023.10.01 |
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 2차 프로젝트 | 서버 배포 >> 메인페이지 개발 시작 (0) | 2023.09.02 |