[React] 블로그 만들기 2 - 데이터 생성, 조회, 삭제, 수정 기능 구현
다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다.
1. 데이터 생성 : 블로그 포스트 작성
- src/api/posts/posts.ctrl.js
import Post from '../../models/post';
/*
POST /api/posts
{
title: "제목",
body: "내용",
tags: ['태그1','태그2']
}
*/
export const write = async (ctx) => {
const {title, body, tags} = ctx.request.body;
const post = new Post ({
title,
body,
tags,
});
try{
await post.save();
ctx.body = post;
} catch(e) {
ctx.throw(500,e);
}
};인스턴스를 만들어 save() 함수를 실행시키면 데이터베이스에 저장된다.
이 함수의 반환 값은 Promise로 async/await 문법으로 데이터베이스에 저장을 완료할 때까지 await를 사용하여 대기할 수 있다.
- Postman
- MongoDB
MongoDB 데이터베이스에 성공적으로 업로드 됐음을 확인했다.
2. 데이터 조회
- src/api/posts/posts.ctrl.js
/*
GET /api/posts
*/
export const list = async (ctx) => {
try {
const posts = await Post.find().exec();
ctx.body = posts;
} catch (e) {
ctx.throw(500, e);
}
};
데이터를 조회할 때는 모델 인스턴스의 find() 함수를 사용한다.
find() 함수를 호출한 후에는 exec()를 붙여 주어야 서버에 쿼리를 요청한다고 한다.
😶 exec() ❓
책 속의 위 문장이 잘 이해가 가지않아 mongoose의 exec 메서드에 대해 더 구글링해보았다.
쿼리 인스턴스 함수 중, 콜백 함수를 넣지 않아도 프로미스를 반환하는 함수는 create(), save(), 등 일부에 한한다.
따라서 나머지의 대부분의 함수에는 마지막 매개변수로 콜백함수를 넣어주거나, 마지막에 exec() 함수를 붙여 쿼리를 최종 실행시킬 수 있다고 한다.
따라서 다음의 코드는 적절하지 않은 코드이며, Promise를 반환하지 않는다.
const post = await Post.findById(id);
- Postman
Postman으로 테스팅 결과 모든 게시글이 조회되는것을 확인했다.
3. 특정 포스트 조회
- src/api/posts/post.ctrl.js
/*
GET /api/posts/:id
*/
export const read = async (ctx) => {
const {id} = ctx.params;
try{
const post = await Post.findById(id).exec();
if(!post) {
ctx.status = 404; // Not Found
return;
}
ctx.body = post;
} catch(e) {
ctx.throw(500,e);
}
};특정 id를 가진 데이터를 조회할 때는 findById() 함수를 사용한다.
- Postman
Postman으로 테스팅한 결과, 성공적으로 해당 id의 포스트가 조회되는 것을 확인했다.
4. 데이터 삭제
데이터를 삭제할 때는 여러 종류의 함수를 사용할 수 있다.
remove() : 특정 조건을 만족하는 데이터를 모두 지운다.
findByIdAndRemove() : id를 찾아서 지운다.
findOneAndRemove() : 특정 조건을 만족하는 데이터 하나를 찾아서 지운다.
- src/api/posts/posts.ctrl.js
/*
DELETE /api/posts/:id
*/
export const remove = async (ctx) => {
const { id } = ctx.params;
try {
await Post.findByIdAndRemove(id).exec();
ctx.status = 204; // No content , 성공했지만 응답할 데이터는 없음
} catch (e) {
ctx.throw(500, e);
}
};findByIdAndRemove() 함수를 사용했다.
- Postman
- MongoDB
테스팅 결과 성공적으로 해당 id의 POST가 삭제됐음을 확인했다.
5. 데이터 수정
데이터를 업데이트 할 때는 findByIdAndUpdate() 함수를 사용한다.
이 함수를 사용할 때는 세 가지 파라미터를 넣어주어야 한다.
첫 번째에는 id, 두 번째에는 업데이트 내용, 세 번째에는 업데이트의 옵션이다.
- src/api/posts/posts.ctrl.js
/*
PATCH /api/posts/:id
{
title: '수정',
body: '수정 내용',
tags : ['수정','태그']
}
*/
export const update = async (ctx) => {
const { id } = ctx.params;
try {
const post = await Post.findByIdAndUpdate(id, ctx.request.body, {
new: true,
// 업데이트된 데이터를 반환
// false일 때는 업데이트 되기 전의 데이터를 반환한다.
}).exec();
if (!post) {
ctx.status = 404; // Not Found
return;
}
ctx.body = post;
} catch (e) {
ctx.throw(500, e);
}
};
- Postman
- MongoDB
테스팅 결과 해당 id의 title이 성공적으로 수정되었음을 확인했다.