[TIL] Next.js - Zod

오늘 공부한것 & 기억하고 싶은 내용

Zod

• npm i zod
• server action으로 보내는 데이터의 유효성 검사에 도움을 준다. 또한 데이터 변환(예: 기본값 추가, 형식 변환)을 할 수 있다.
• 예를 들어 Username을 3자~10자로 설정하고 싶다면 Zod에게 데이터를 보내주면 Zod가 내부적으로 모든 if를 수행할거고 데이터가 유효한지 아닌지를 알려준다.
• Zod에게 데이터의 형태나 타입을 설명할 때는 Schema를 만든다. 데이터가 어떻게 생겨야 하는지, 타입은 무엇인지 알려주는 설계도 같은거라고 생각하면 된다.
• .parse: Zod 스키마가 parse 메소드를 호출하여 데이터가 유효한지 확인

import { z } from "zod"; // Zod 라이브러리 임포트

const usernameSchema = z.string().min(5).max(10);//string이어야 하고, 최소 5글자 최대 10글자까지

usernameSchema.parse(data.username);

.parse

• data의 타입 유효성을 검사할 때 사용하는 메서드
• 유효한 경우: 데이터 전체 정보가 반환됩니다.
• 유효하지 않은 경우: Zod가 에러를 발생시킵니다.
• 사용 예: 보통 try-catch문으로 감싸 에러를 처리합니다.

const usernameSchema = z.string().min(5).max(10);

try {
  const result = usernameSchema.parse("ValidName"); // 유효한 데이터
  console.log(result); // "ValidName"
} catch (e) {
  console.error("유효하지 않은 데이터:", e.errors); // 에러 메시지 출력
}

.safeParse

• 유효하지 않은 데이터로 인해 에러를 발생시키고 싶지 않을 때 사용하는 메서드
• 유효한 경우: success: true와 함께 데이터 정보가 포함된 data를 반환
• 유효하지 않은 경우: success: false와 함께 에러 정보가 담긴 error를 반환

const usernameSchema = z.string().min(5).max(10);

const result = usernameSchema.safeParse("No"); // 유효하지 않은 데이터

if (result.success) {
  console.log("유효한 데이터:", result.data); // 성공 케이스
} else {
  console.error("유효하지 않은 데이터:", result.error); // 실패 케이스
}

배운점 & 느낀점

if문을 덕지덕지 붙이지 않아도 유효성 검사를 할 수 있는게 너무 편하다.
정말 개발자들은 게으르단 표현이 딱 맞는거 같다;; 점점 더 편한걸 알게 될수록 이래도 되나 싶지만 난 아직 초보자라서 제대로 이해는 못했기에 ...... 열심히 예제 공부를 더 해야할거 같다~