라이브러리 - Zod

Zod

 

 

✅ Zod이란?

---

자바스크립트/타입스크립트 환경에서 “데이터 검증(Validation)”과 “타입 안전(Type Safety)”을 동시에 해결하기 위한 스키마 기반 검증 라이브러리

- 사용자가 Server Action으로 보내는 데이터의 유효성 검사에 도움을 줌.

 

✅ 사용법

---

설치

npm i zod

 

예시(/create-account/actions.ts)

"use server";

import bcrypt from "bcrypt";
import {
  PASSWORD_MIN_LENGTH,
  PASSWORD_REGEX,
  PASSWORD_REGEX_ERROR,
} from "@/lib/constants";
import db from "@/lib/db";
import z from "zod";
import { redirect } from "next/navigation";
import getSession from "@/lib/session";

const checkUsername = (username: string) => !username.includes("potato");

const checkPasswords = ({
  password,
  confirm_password,
}: {
  password: string;
  confirm_password: string;
}) => password === confirm_password;

const formSchema = z
  .object({
    username: z
      .string("Username must be a string!")
      .toLowerCase()
      .trim()
      .nonempty("Where is my username???")
      // invalid_type_error, required_error is deleted in string()
      /*     .min(3, {
      error: (issue) => {
        if (issue.code === "too_small") {
          return `Value must be > ${issue.minimum}`;
        }
      },
    }) */
      // .transform((username) => `🔥${username}🔥`)
      .refine(checkUsername, "No potatoes allowed!"),
    email: z.email().toLowerCase(),
    password: z.string().min(PASSWORD_MIN_LENGTH),
    // .regex(PASSWORD_REGEX, PASSWORD_REGEX_ERROR),
    confirm_password: z.string().min(PASSWORD_MIN_LENGTH),
  })
  .superRefine(async (data, ctx) => {
    const usernameExists = await db.user.findUnique({
      where: { username: data.username },
      select: { id: true },
    });
    if (usernameExists) {
      ctx.addIssue({
        code: "custom",
        message: "This username is already taken",
        path: ["username"],
      });
      return;
    }
    const emailExists = await db.user.findUnique({
      where: { email: data.email },
      select: { id: true },
    });
    if (emailExists) {
      ctx.addIssue({
        code: "custom",
        message: "This email is already taken",
        path: ["email"],
      });
      return;
    }
    if (!checkPasswords(data)) {
      ctx.addIssue({
        code: "custom",
        message: "Both passwords should be the same!",
        path: ["confirm_password"],
      });
      return;
    }
  });

export async function createAccount(prevState: unknown, formData: FormData) {
  const data = {
    username: formData.get("username"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm_password: formData.get("confirm_password"),
  };
  const result = await formSchema.safeParseAsync(data);
  if (!result.success) {
    const flatten = z.flattenError(result.error);
    console.log(flatten);
    /*     const treeify = z.treeifyError(result.error);
    console.log(treeify); */
    return flatten;
  } else {
    const hashedPassword = await bcrypt.hash(result.data.password, 12);
    const user = await db.user.create({
      data: {
        username: result.data.username,
        email: result.data.email,
        password: hashedPassword,
      },
      select: {
        id: true,
      },
    });
    const session = await getSession();
    session.id = user.id;
    await session.save();
    redirect("/profile");
  }
}

 

✅ Coerce

---

coerce(강요하다): number 값이 input에 입력 되어서 formData로 넘어오면 string으로 변환되기 때문에 coerce를 사용하여 타입을 number로 강제할 수 있다.

ex)

const tokenSchema = z.coerce.number().min(100000).max(999999);

 

 

✅ 공식 문서

---

https://zod.dev/