[React] 블로그 만들기 4 - Request Body 검증

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다.

---

 

이제 포스트 작성시 제목, 내용, 태그를 모두 전달 받도록 만들어보자.

클라이언트가 셋 중 하나의 값이라도 빼먹었을 경우, 400 오류 (Bad Request)가 발생하여야 한다.

지금은 따로 처리하지 않았기 때문에 요청 내용을 비운 상태에서 write API를 실행해도 요청이 성공하여 비어있는 포스트가 등록된다.

 

객체를 검증하기 위해서는 if 문으로 비교하는 방법도 있지만, 유효성 검사를 도와주는 Joi 라이브러리를 설치하여 사용해보고자 한다.

 

- 터미널

yarn add joi

 

1. write API 검증

 

- src/api/posts/posts.ctrl.js

import Joi from 'joi';

...

/*
POST /api/posts
{
  title: "제목",
  body: "내용",
  tags: ['태그1','태그2']
}
*/
export const write = async (ctx) => {
  const schema = Joi.object().keys({
    // 객체가 다음 필드를 가지고 있음을 검증
    title: Joi.string().required(), // required가 있으면 필수항목을 의미
    body: Joi.string().required(),
    tags: Joi.array().items(Joi.string()).required(), // 문자열로 이루어진 배열임을 뜻함
  });

  // 검증하고 나서 검증 실패인 경우 에러 처리한다.
  const result = schema.validate(ctx.request.body);
  if(result.error) {
    ctx.status= 400; //Bad Request
    ctx.body = result.error;
    return;
  }
  
  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);
  }
};

 

Joi 라이브러리를 통해, 만족 시켜야 할 조건을 담은 schema를 생성한다.

그 뒤, ctx.request.body의 내용이 schema를 만족하는지 확인한 뒤, 만족하지 않을 시 400 에러를 띄우도록 하였다.

 

- Postman

 

Request Body 검증 : write 테스팅

테스팅을 위해 tags 필드의 작성 없이 POST 요청을 보낸 결과, 

tags is required 라는 메세지를 가진 오류가 발생하는 것을 확인하였다.

 

2. update API 검증

update API의 검증은 write와 유사하다. 

다만, 모든 필드가 필수항목이 아니라는 점에서만 차이점이 있다.

 

- src/api/posts/posts.ctrl.js

/*
PATCH /api/posts/:id
{
  title: '수정',
  body: '수정 내용',
  tags : ['수정','태그']
}
*/
export const update = async (ctx) => {
  const { id } = ctx.params;

  const schema = Joi.object().keys({
    title: Joi.string(),
    body: Joi.string(),
    tags: Joi.array().items(Joi.string()),
  });

  // 검증하고 나서 검증 실패인 경우 에러 처리한다.
  const result = schema.validate(ctx.request.body);
  if (result.error) {
    ctx.status = 400; //Bad Request
    ctx.body = result.error;
    return;
  }

  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

 

Request Body 검증 : update 테스팅

 

테스팅을 위해 body 필드에 string이 아닌 숫자를 넣어 PATCH 요청을 보낸 결과, 

body must be a string 이라는 메세지를 가진 오류가 발생하는 것을 확인하였다.