🛠️ Yup 완전 정복하기 — (Zod와의 비교까지!)

👋 시작하며

프론트엔드 개발을 하다 보면 회원가입, 로그인, 프로필 수정 같은 화면을 정말 많이 만들게 됩니다.

그리고 매번 반복해서 고민하게 되죠.

❓ "이 입력값은 필수인가요?"

❓ "비밀번호는 8자 이상이어야 하나요?"

❓ "이메일 형식이 맞는지 어떻게 확인하죠?"

이런 고민을 덜어주고, 개발을 훨씬 편리하게 만들어주는 라이브러리가 있습니다.

바로 Yup 입니다!

(물론 요즘은 Zod 같은 다른 대안도 있어서, 오늘은 비교도 함께 해드리겠습니다.)

---

✨ Yup이란 무엇인가요?

Yup은 스키마(Schema)를 정의해서 데이터의 유효성을 검증할 수 있도록 도와주는 라이브러리입니다.

• 스키마 = "이 데이터는 이렇게 생겼어야 한다"는 규칙입니다.
• Yup은 이 규칙에 맞는지 확인해주고, 틀리면 에러를 반환합니다.
• 특히 Form(입력 폼)과 함께 쓰면 정말 강력합니다.

즉, 런타임 데이터 검증을 쉽게 할 수 있도록 도와주는 도구입니다.

---

📚 Yup 기본 사용 예시

import * as yup from 'yup';

const loginSchema = yup.object({
  loginId: yup
    .string()
    .required('아이디를 입력해주세요.')
    .matches(/^[a-zA-Z0-9]{5,20}$/, '5~20자의 영문 또는 숫자 조합이어야 합니다.'),
  userPw: yup
    .string()
    .required('비밀번호를 입력해주세요.')
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>]).{8,}$/,
      '영문 대소문자, 숫자, 특수문자를 포함해 8자 이상 입력해주세요.'
    ),
});

• object()를 사용해서 객체 형태로 스키마를 만들고,
• 각 필드에 대해 .string(), .required(), .matches() 등 체이닝 방식으로 검증 규칙을 추가할 수 있습니다.

폼을 작성할 때 Yup과 함께 하면, 검증이 정말 깔끔하게 끝납니다.

---

🎯 Yup의 장점은 무엇인가요?

장점	설명
배우기 쉽습니다	단순한 체이닝 방식으로 작성하기 때문에, 문법이 직관적입니다.
Form 라이브러리와 찰떡입니다	React Hook Form, Formik 등과 쉽게 연동할 수 있습니다.
에러 메시지를 쉽게 설정할 수 있습니다	유저에게 친절한 에러 메시지를 반환할 수 있습니다.
다양한 타입 지원	문자열, 숫자, 날짜, 배열, 객체 등 거의 모든 타입을 지원합니다.
비동기 검증도 지원합니다	서버에 요청을 보내야 하는 검증도 가능합니다.

---

🤔 그렇다면 Zod는 무엇인가요?

Zod는 최근 주목받고 있는 또 다른 데이터 검증 라이브러리입니다.

Zod는 특히 TypeScript와의 궁합이 매우 좋습니다.

Zod 특징을 간단히 요약하면:

• 스키마로 타입을 만들 수도 있습니다. (z.infer<typeof schema>)
• 런타임 검증 + 타입 보장까지 동시에 할 수 있습니다.
• Yup보다 살짝 더 최신스럽고 깔끔합니다.

---

🆚 Yup vs Zod 비교 정리

항목	Yup	Zod
런칭 시기	2017년 (오래됨)	2020년 (신세대)
주요 특징	검증 중심	타입과 검증 동시 지원
TypeScript 지원	약간 아쉬움 (타입 추론 불편)	아주 강력함 (타입 추론 자연스럽게)
Form 연동	아주 쉬움 (Formik, React Hook Form 등에서 널리 사용)	최근 연동 지원 강화
에러 메시지	커스터마이징 자유로움	메시지 추가 가능하지만 코드 많아질 수 있음
학습 난이도	더 쉬움	약간 진입장벽 있음
안정성	매우 검증됨 (수년간 사용)	급성장 중이지만 약간의 변화 있음

정리

• 만약 Form과 함께 유효성 검사만 하고 싶다면 Yup이 좋습니다.
• 만약 타입까지 안전하게 보장받고 싶다면 Zod도 좋은 선택입니다.

---

🛠️ 실제 프로젝트에서는 왜 Yup을 썼을까요?

제가 Yup을 선택한 이유는 다음과 같습니다.

1. 빠른 개발이 가능했습니다

   폼 검증에 필요한 규칙들을 체이닝 방식으로 쉽게 작성할 수 있었고, 에러 메시지도 따로 신경 쓸 필요가 없었습니다.

2. Form 라이브러리와의 연동이 쉬웠습니다

   특히 React Hook Form과 사용할 때 resolver 하나만 추가하면 끝이었습니다.

3. 커스터마이징이 쉬웠습니다

   한글 메시지 설정, 동적 검증 조건 추가 등 모든 부분을 커스터마이징할 수 있었기 때문입니다.

---

📦 결론

• ✅ 간단하고 빠른 폼 검증 → Yup 추천
• ✅ 런타임 데이터 검증 + 타입 보장 → Zod 고려
• ✅ Form 중심 프로젝트 → Yup 사용해도 충분히 좋습니다.

폼 검증이 번거로우셨던 분들이라면, 한 번 Yup을 써보시길 추천드립니다.

string(), number(), required() 만 알아도 80%는 끝낼 수 있으니까요.

---

🙌 마치며

"검증은 귀찮지만, 필수입니다."

Yup은 이 귀찮음을 즐거운 개발로 바꿔줄 수 있는 좋은 도구입니다.