본문 바로가기

JavaScript

[Express] 유효성 검사를 해보자

미니 프로젝트로 만든 API에 사용자의 아이디를 입력할 때,
문자열이 아닌 정수형으로 입력해도 데이터가 전달되지만
데이터베이스에서는 컬럼의 자료형과 달라서 에러를 뱉습니다.

이처럼, 클라이언트에서 전달한 데이터를 서버에서 그대로 사용하면
예기치 못한 문제가 생길 수 있습니다.

이를 예방하기 위해서 전송받은 데이터를 검사하는 것을 유효성 검사라고 합니다.
이번 포스트에서는 Express-validator를 써서 유효성 검사를 하는 방법을 알아보겠습니다.


💡 express-validator 설치하기

진행하고 있는 프로젝트에서 패키지 매니저를 통해 설치하면 됩니다.

npm install express-validator

 

💡 유효성 검사 시작하기

공식 문서에서는 express-validator가 Express 애플리케이션 뿐만 아니라,
라이브러리가 다음과 같은 HTTP 요청 객체를 포함한다면 작동한다고 안내하고 있습니다.

  • body: HTTP 요청의 본문을 의미하며, 자바스크립트 원시 타입일 때 더 잘 동작합니다.
  • cookies: 쿠키 이름과 값을 파싱한 객체입니다.
  • headers: HTTP 요청에 함께 전송되는 헤더입니다.
  • params: HTTP 요청 경로에 콜론(:)으로 정의한 매개변수를 파싱한 객체입니다.
  • query: HTTP 요청 경로에서 물음표(?) 뒤에 나오는 매개변수를 파싱한 객체입니다.

 

간단한 예시를 통해 사용법을 익혀보겠습니다.
먼저, 검사하는 목적에 맞는 미들웨어를 패키지에서 불러옵니다.

const express = require('express');
const { body } = require('express-validator');
const router = express.Router();

router.use(express.json());
router.post('/user',
  body('username').notEmpty(),
  (req, res) => {
    res.send(`${username}의 페이지`);
  }
);

처음에는 이렇게 작성하면 username 값을 본문으로 전달하지 않았을 때 오류를 발생시킬 줄 알았습니다.
하지만 검사기는 오류를 발생시키지 않고 undefined의 페이지라고 정상적이지만 일어나서는 안 될 응답을 보냅니다.

오류를 보고받기 위해서는 validationResult 함수를 사용해야 합니다.

const express = require('express');
const { body, validationResult } = require('express-validator');
const router = express.Router();

router.use(express.json());
router.post('/user',
  body('username').notEmpty(),
  (req, res) => {
    const result = validationResult(req);
    if (result.isEmpty()) {
      return res.send(`${username}의 페이지`);
    }
    
    res.json({ errors: result.array() });
  }
);

/*
 *{
 *  "errors": [
 *    {
 *      "type": "field",
 *      "msg": "Invalid value",
 *      "path": "username",
 *      "location": "body"
 *    }
 *  ]
 *}
 */

validationResult를 사용하면 유효성 검사의 결과를 확인할 수 있습니다.

 

💡 메소드 체이닝으로 유효성 검사하기

눈치채셨겠지만 이미 위에서 메소드 체이닝을 사용하였습니다.
express-validator에서 불러온 query, body 등의 함수는 ValidationChain 객체를 반환합니다.
이 객체는 유효성 검사에 필요한 유용한 함수를 포함하고 있습니다.

예를 들어, 이메일 형식인지 검사하기 위해서는 이렇게 사용할 수 있습니다.

body('email').isEmail()

사용자가 보낸 데이터를 신뢰하기 위해서 유효성 검사를 반드시 해야 한다고 생각합니다.
학습하면서 유효성 검사를 웹 페이지 폼, 서버 중 한 곳에서 해야 하는지 둘 다 해야 하는지 다양한 궁금증이 생기네요.

오늘 준비한 포스트는 여기까지입니다.
끝까지 봐주셔서 감사합니다!
틀린 내용이 있다면 지적 부탁드립니다.