React #joi 로 유효성 검증하기

 

 

---

joi 설치 및 사용

joi는 유효성 검증을 보다 수월하게 해주는 라이브러리입니다. 아래 명령어로 joi를 설치합니다.

$ yarn add joi

 

게시글을 작성하는 코드입니다. joi를 활용하여 데이터 타입, 필수여부 등을 체크하여 결과를 리턴합니다.

(...)
const Post = require('../../models/post');
const Joi = require('joi');

/* POST /api/posts
   { title, body, tags }
*/
exports.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)
    console.log(result);

    // 오류가 발생하면 오류 내용 응답
    if(result.error) {
        ctx.status = 400;
        ctx.body = result.error;
        return;
    }

    const { title, body, tags } = ctx.request.body;

    // 새 Post 인스턴스를 만듭니다.
    const post = new Post({
        title, body, tags
    });

    try {
        await post.save(); // 데이터베이스에 등록합니다.
        ctx.body = post; // 저장된 결과를 반환합니다.
    } catch(e){
        // 데이터베이스의 오류가 발생합니다.
        ctx.throw(e, 500)
    }
};
(...)

 

유효성 검증 결과를 console.log(result)로 출력해본 결과입니다. 유효성 검증을 통과하지 못하여 error 객체에 통과하지 못한 이유를 담아 출력되었습니다.

{ value: { title: '제목', body: '내용' },
  error:
   { ValidationError: "tags" is required
     _original: { title: '제목', body: '내용' },
     details: [ [Object] ] } }

 

유효성 검증 성공 예시

 

 

유효성 검증 실패 예시

 

joi 유효성 검증 코드

리액트를 다루는 기술 19장의 mongoose를 이용한 MongoDB 연동 실습 과정 중 joi 버전 차이가 발견되어 기록합니다. 

 

리액트를 다루는 기술에는 수정전 코드가 작성 되어 있었습니다. Joi.validate 부분에서 오류가 발생하여 joi API를 확인해보니 유효성 검증 코드가 달리 나와 있음을 확인하였습니다. async/await 방식으로 유효성 검증을 하는 구문도 있어 수정후1,수정후2로 작성해두었습니다.

//수정전
//const result = Joi.validate(ctx.request.body, schema)
//수정후1
const result = schema.validate(ctx.request.body)
//수정후2
const result = await schema.validateAsync(ctx.request.body)

 

 

joi API

joi.dev/api/?v=17.4.0

joiSite

 

 

*리액트를 다루는 기술 2018.9 도서 기준입니다.