프로그래머스 데브코스, 국비지원교육, 코딩부트캠프
🚩 프로그래머스 데브코스 웹 풀사이클 과정 6주차 DAY 5
그냥... 하루종일 프로젝트를 만들었다. 그래서 솔직하게 말하자면 정말 쓸 게 없었다😂 만든 프로젝트를 올리기에는 사실 딱히 하나하나 설명을 하기에도 조금 애매해서...
그래서 내 선택은!
express의 유효성 검증 모듈인 express-validator에 대해서 설명을 해볼까 한다.
✨express-validator
먼저 express-validator란 무엇인가!
서버로 들어오는 요청에 대한 유효성을 쉽게 체크할 수 있도록 도와주는 유효성 검증 모듈
이 유효성 검증 모듈을 사용하기 이전에는 우리는 if문으로 데이터 유효성 검사를 진행했다. 단순히 데이터가 비었는지 확인할 때야 if문 하나로 사용해도 괜찮겠지만, 프로젝트가 점점 커지고 체크할 유효성이 많아진다면 if문이 중첩되고 또 늘어나게 될 것이다. 이렇게 되면 코드를 짤 때도, 코드를 읽을 때도 불편해진다.
바로 이런 우리의 불편을 해소해주는 모듈이다.
💡설치하기
npm install express-validator설치는 아주 간단하다. 늘 그렇듯 npm으로 설치해주면 끝이다.
설치를 해주면 위처럼 package.json의 dependecies에 정상적으로 추가된 걸 확인할 수 있다. 우린 이제 express-validator를 사용할 수 있다!
💡유효성 검증을 해보자!
const { body, param, validationResult } = require('express-validator');먼저 require을 통해 express-validator 모듈을 가져와준다.
그리고 이제 유효성 검증을 해볼 시간이다!
express-validator에는 유효성 검증을 할 수 있는 다양한 내장 함수를 지원한다. 모든 걸 전부 다루기에는 이 포스트가 영원히 끝나지 않을 것 같기 때문에... 가장 자주 쓰이는 몇 가지만 골라서 설명해보고자 한다.
withMessage()
: 우리는withMessage()를 사용하여 에러 메시지를 커스텀 할 수 있다. 유효성 검증에서 통과하지 못했을 때 해당 함수를 사용해서 출력될 에러 메시지를 커스텀하자.
notEmpty()
: 값이 비었는지 확인
정말 자주 사용하는 유효성 검증이 아닐까 싶다. 말 그대로 입력한 값이 없는지 확인해준다.
이메일 부분의 값을 비우고 값을 보내자 위 사진처럼 이메일 값이 비었다는 에러 메시지가 함께 출력된다.
isEmail()
: 회원가입을 할 때나 이메일로 로그인을 할 때 주로 사용한다. 말 그대로 입력값이 이메일 형식인지 확인해주는 함수다.
바디로 email을 넘겼지만 유효성 검사에서 통과하지 못해 에러가 발생한 걸 알 수 있다.
위처럼 이메일 형식으로 제대로 보냈을 때는 200 OK가 뜨는 걸 확인할 수 있다.
isLength()
: 회원가입을 할 때 보통 최소 몇 자 이상, 최대 몇 자 이하로 설정하는 경우가 있다. 이런 경우에 특히 자주 사용한다.
body('password').isLength({
min: 8,
max: 16
}).withMessage(`password parameter length is invalid`)위와 같이 최소값과 최댓값을 설정해주면 들어오는 입력값을 알아서 검증해준다.
최소값인 8자 이하로 비밀번호를 입력하자 유효성 검사에서 통과하지 못했다.
8자 이상 16자 이하로 비밀번호를 입력하자 이번에는 유효성 검사에서 통과 후 200 OK가 정상적으로 반환됐다!
matches()
: 정규표현식을 활용하여 문자열 혹은 숫자가 입력값에 존재하는지 확인할 때 주로 사용
// 영어 소문자 반드시 하나 이상 포함
body('password').matches(/^.*[a-z].*$/).withMessage(`password parameter is invalid`)솔직하게 말하자면 나는 정규식을 잘 외우지 못해서...😂 항상 필요할 때마다 찾아보면서 한다. 특히 비밀번호 정규식 같은 경우는 우리의 빛 스택오버플로에 정말 많기 때문에 참고해서 사용하면 아주 좋을 것 같다👍
비밀번호 최소, 최대 길이는 충족했지만 영어 소문자가 포함되지 않았기 때문에 에러 메시지가 발생한 걸 볼 수 있다.
영어 소문자를 넣어서 다시 POST를 하면 정상적으로 200 OK가 리턴되는 걸 볼 수 있다.
trim
: 문자열 양쪽의 공백을 제거해준다. 중요!!! 문자열 사이의 공백을 제거하는 게 아니다. 문자열 양쪽의 공백을 제거해주는 거다. 아마 이메일이나 패스워드를 입력할 때 종종 앞에 공백이 입력될 때를 방지하기 위해서 있는 게 아닐까 싶다.
body('name')
.trim()
.notEmpty()
.withMessage(`space must not be included`)
.isLength({
min: 3,
max: 5,
})
.withMessage(`name parameter is invalid`)
이런 식으로 앞부분에 입력된 공백을 제거해준다. 나는 최소 길이를 3으로 잡았기 때문에 앞부분의 공백을 모두 제거한 후 두 글자로만 나머지 유효성 검사를 진행해준다.
실제 value를 확인해보면 앞부분 공백이 제거된 값으로 전달된 걸 확인할 수 있다.
공백까지 포함되면 최대 5글자를 넘는데도 유효성 검사에 통과한 걸 볼 수 있다. 공백이 제거돼서 그렇다.
isDate()
: 입력한 문자열이 날짜 형식인지 확인해준다.
check if the string is a valid date. e.g. [2002-07-15, new Date()].
options is an object which can contain the keys format, strictMode and/or delimiters.
format is a string and defaults to YYYY/MM/DD.
strictMode is a boolean and defaults to false. If strictMode is set to true, the validator will reject strings different from format.
delimiters is an array of allowed date delimiters and defaults to ['/', '-'].공식 문서? 깃허브에는 위와 같이 설명이 되어있다.
간단하게 설명하자면 날짜는 YYYY/MM/DD 혹은 YYYY-MM-DD 식으로 입력할 수 있다.
body('date')
.notEmpty()
.withMessage(`date parameter is empty`)
.isDate()
.withMessage(`date parameter is invalid`)
위처럼 날짜 구분 기호를 /나 -를 사용하면 정상적으로 데이터가 전송되는 걸 확인할 수 있다.
하지만 허용된 데이터 입력 방식과 다른 방식으로 입력이 되면 에러가 발생하는 걸 볼 수 있다.
isURL()
: 입력받은 데이터가 URL 형식인지 확인한다. 이 함수의 경우 커스텀 할 수 있는 옵션이 상당히 많다.
require_protocol - if set to true isURL will return false if protocol is not present in the URL.
require_valid_protocol - isURL will check if the URL's protocol is present in the protocols option.
protocols - valid protocols can be modified with this option.
require_host - if set to false isURL will not check if host is present in the URL.
require_port - if set to true isURL will check if port is present in the URL.
allow_protocol_relative_urls - if set to true protocol relative URLs will be allowed.
allow_fragments - if set to false isURL will return false if fragments are present.
allow_query_components - if set to false isURL will return false if query components are present.
validate_length - if set to false isURL will skip string length validation (2083 characters is IE max URL length).깃허브 문서에는 위와 같이 나와 있다.
정상적이지 않은 URL 경로를 입력하면 위와 같이 에러를 반환한다.
이 외에도 정말 다양한 함수가 있는데, 궁금하다면 github의 마크다운 문서와 공식 깃허브 블로그를 참고해보자. 번역은 없는 것 같지만 해석하기에 어렵지는 않다. (그리고 우리에게는 파파고가 있으니..)
