[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

POST 테스팅 결과

 

- MongoDB

MongoDB POST 업로드 테스트 

 

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

데이터 조회 GET 테스팅 결과 

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

특정 포스트 조회 GET 테스팅 결과

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

 

DELETE 테스팅 

 

- MongoDB

 

DELETE 테스팅 결과

 

테스팅 결과 성공적으로 해당 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

PATCH 테스팅 

 

- MongoDB

PATCH 테스팅 결과

 

테스팅 결과 해당 id의 title이 성공적으로 수정되었음을 확인했다.