Yup란?
yup란 데이터 유효성 검증을 객체 스키마로 설정하여 검증하는 라이브러리입니다. 스키마에 문자열, 숫자, 객체 등 다양한 타입의 검증을 통해 오류 발생을 방지하고 에러메세지를 사전에 정의하고 파라미터로 전달하여 가독성이 높은 validation을 진행할 수 있습니다.
yup 사용법
yup는 validation을 진행할 객체의 스키마를 사전에 정의하여 파라미터로 전달하는 방식으로 검증을 진행합니다. 아래의 코드는 로그인을 유효성 검증을 진행하는 yup 객체입니다
// yup의 yup.object()를 이용해 스키마를 정의합니다.
import * as yup from 'yup';
const userSchema = yup.object().shape({
id: yup.string().required("아이디를 입력해주세요").max(12, "아이디는 12자 이내로 설정해주세요"),
password: yup.string().required("패스워드를 입력해주세요").max(10, "패스워드는 8자 이내로 설정해주세요")
});
userSchema
.validate({ id: "123", password: "456" })
.then(() => console.log("성공"))
.catch(error => console.error(error.message));//문자만 검증
string()
.min(3, 'must be at least 3 characters long')
.email('must be a valid email')
.validate('no'); // ValidationError또한 Typescript도 지원하기 때문에 타입을 정의하여 명확하게 사용할 수 있습니다.
import * as yup from 'yup';
let personSchema = yup.object({
firstName: yup.string().defined(),
nickName: yup.string().default('').nullable(),
sex: yup
.mixed()
.oneOf(['male', 'female', 'other'] as const)
.defined(),
email: yup.string().nullable().email(),
birthDate: yup.date().nullable().min(new Date(1900, 0, 1)),
});
interface Person extends yup.InferType<typeof personSchema> {
// using interface instead of type generally gives nicer editor feedback
}유효성 검사를 수행할 때, 스키마에 정의된 규칙을 사용하여 입력된 데이터를 검증합니다.
데이터가 스키마에 정의된 규칙을 만족하지 않으면, 라이브러리는 에러를 반환하거나 예외를 발생시킵니다.
이 외에도 정규표현식, 타입 등 여러가지 속성을 통해 validationd을 진행할 수 있습니다.
자세한 사용법은 yup공식 라이브러리에 명시되어 있습니다.
yup 장점
- 코드의 길이가 간결해진다
- 사전에 정의해둔 객체에 전달만을 사용하여 동작하기 때문에 코드의 길이가 감소하고 가독성이 증가합니다.
- 객체 스키마를 확장하여 다양한 검증에 재사용 할 수 있습니다.
- yup는 잘못된 값에 대한 상세한 메세지를 제공하며 실패시 자동으로 예외를 발생시킵니다.
- 검사 로직만 분리하고 "무엇을 검증할 것인가"에 대한 명확성이 증가합니다.
또한 yup는 단일로 사용할 수 있지만. React에서는 React-hook-form과 같이 사용하거나 vue에서는 Vee-validate와 많이 사용합니다. 다음 시간에는 vee-validate를 사용하여 yup를 사용하는 방식을 올려보겠습니다.
정리
오늘은 yup를 사용하여 스키마 기반으로 유효성 검증을 할 수 있는 방법에 대해 알아보았습니다. yup 이외에도 zod, Superstruct, joi와 같은 다양한 라이브러리가 존재합니다. 혹시 흥미가 생기셨다면 다른 라이브러리도 참조해보시면 좋을 것 같습니다.
