6주차 - 로그인, 등록폼(zod, next-safe-action)

Ultimate Next.js Course 강의를 보면서 공부한 것들을 작성한 글입니다.

zod

타입스크립트를 위한 스키마 선언 및 데이터 검증 라이브러리. 런타임에서 타입 검증 제공
현재 실무에서 사용하는 resolver는 yup인데 zod도 yup과 거의 유사했다.
cf. resolver: zod나 yup과 같은 유효성 검사 라이브러리에서 폼 데이터를 검증한 결과를 react-hook-form에서 사용할 수 있는 형식으로 변환해주는 역할.

• 로그인폼에서 입력 검증에 사용하는 스키마(LoginSchema)를 따로 만들어서 임포트하여 사용했다.
• 타입과 검증 규칙, 오류메시지를 작성하면 된다.
• yup보다는 좀더 타입스크립트와 긴밀하게 통합되어있다고 알려져 있는데, z.infer같은 유틸리티 사용시 스키마로부터 직접 타입 추출이 가능하여 별도 타입 선언 없이 스키마만으로 안정성을 보장할 수 있다.
• yup의 경우 기본적으로 모든 필드가 선택적이라 required()로 필수값을 설정해줘야하는데, zod의 경우 모든 필드가 필수값이라 선택값일 경우 optional설정이 필요하다.

---

// login-schema.ts

import * as z from "zod";

export const LoginSchema = z.object({
  email: z.string().email({
    message: "Invalid email address",
  }),
  password: z.string().min(1, {
    message: "password should be longer than 1 letter.",
  }),
  code: z.optional(z.string()),
});

---

// login-form.tsx

import * as z from "zod"
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { LoginSchema } from "@/types/login-schema";


const form = useForm({
	resolver: zodResolver(LoginSchema),
    defaultValues: {
    	email: "",
        password: "",
    },
  })

const onSubmit = (values: z.infer<typeof LoginSchema>) => {
    console.log(values);
};

next-safe-action

• Next.js 애플리케이션에서 안전하게 서버 액션(데이터베이스 업데이트, API 호출 등)을 처리하기 위한 라이브러리
• 클라이언트에서 서버로의 직접적ㅇ니 액션 호출을 막는다(보안강화)
• zod가 디폴트 유효성 라이브러리로 되어 있다.
• 강의 듣고 프로젝트를 할 때 바뀐 부분이 있어 찾아본 라이브러리(최신 강의임에도 불구하고 사용법이 달랐음 )

// email-signin.ts
"use server"

import { LoginSchema } from "@/types/login-schema";
import { createSafeActionClient } from "next-safe-action";
import { users } from "../schema";

const action = createSafeActionClient();

export const emailSignIn = action
  .schema(LoginSchema)
  .action(async ({ parsedInput: { email, password, code } }) => {
    const existingUser = await db.query.users.findFirst({
      where: eq(users.email, email),
    });

    if (existingUser?.email !== email) {
      return { error: "Email not found" };
    }

    console.log(email, password, code);
    return { success: email };
  });

---

import { useAction } from "next-safe-action/hooks";

const { execute, status, result } = useAction(emailSignIn, {
   onSuccess(data) {
     console.log(data);
   },
});

• createSafeActionClient(): 서버 액션 생성. 예시 코드에서는 데이터베이스에 현재 인풋에 입력된 유저의 이메일 여부를 확인하고 이에 따라 성공/실패를 리턴한다.
• useAction: 컴포넌트에서 서버 액션을 호출하기 위한 훅. 서버 액션의 로딩, 성공, 실패 등의 상태를 관리 및 처리한다.

참고

zod 문서
next-safe-action 문서