미니 프로젝트로 만든 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()
사용자가 보낸 데이터를 신뢰하기 위해서 유효성 검사를 반드시 해야 한다고 생각합니다.
학습하면서 유효성 검사를 웹 페이지 폼, 서버 중 한 곳에서 해야 하는지 둘 다 해야 하는지 다양한 궁금증이 생기네요.
오늘 준비한 포스트는 여기까지입니다.
끝까지 봐주셔서 감사합니다!
틀린 내용이 있다면 지적 부탁드립니다.
'JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트의 일급 함수 (0) | 2024.10.21 |
---|---|
[Javascript] Promise와 async/await의 비동기 처리 (0) | 2024.10.14 |
[Express] Router 적용하기 (0) | 2024.09.10 |
[Express] 같은 경로의 핸들러 묶기 (0) | 2024.09.09 |
[Express] 폴더 구조 알아보기 (0) | 2024.09.03 |