[7주차] Team 인플루이 한서정 & 최서연 미션 제출합니다.

[xseojungx]

링크

---

2025-06-29.5.20.38.mov

---

Zod 스키마가 무엇인지, 어떻게 활용할 수 있는지 알아봅시다.

Zod는 TypeScript 스키마 선언 및 유효성 검증 라이브러리. 이 스키마를 통해 특정 데이터가 우리가 기대한 타입에 맞는지 검사할 수 있음.

TypeScript의 유효성 검증은 컴파일 시에만 발생하고 런타임에는 아무런 역할을 하지 못하지만, zod는 런타임에서 API 인자의 타입을 검증. ⇒ TypeScript와 Zod를 함께 사용하면 타입 안전성을 유지하면서도 외부 데이터의 유효성을 보장할 수 있음.

zod는 자바스크립트의 기본 자료형이나 Date와 같은 내장 클래스에 대응하는 검증자(validator) 함수를 제공.

스키마 생성

z.type

import { z } from "zod";

const name = z.string();
const age = z.number();

const todoSchema = z.object({
  userId: z.number(),
  id: z.number(),
  title: z.string(),
  completed: z.boolean().default(false),
});

z.coerce.{type} → 타입 강제 변환

const inputSchema = z.coerce.number(); // Number(input)

값의 type을 number로 변환

자동 타입 추론

const User = z.object({
	name: z.string(),
});

User.parse({ name: "ceos"});

type User = z.infer<typeof User>; // { name: string }

에러 메세지 커스터마이징

const name = z.string().min(1, { message: "이름을 입력해주세요." });

자료형 데이터 스키마 선언 시 에러 메세지를 지정할 수 있음.

파싱

import { z } from "zod";

const name = z.string();

name.parse("ceos");
name.parse(21); // throws ZodError

name.safeParse("ceos"); // { success: true; data: "ceos" }
name.parse(21); // { success: false; error: ZodError }

• parse(): 스키마를 기준으로 데이터의 유효성 확인
• parseAsync(): 비동기 정제를 사용하는 경우
• safeParse(): 유효성 검사 실패 시에도 오류를 발생시키지 않음
• safeParseAsync() (= spa()): safeParse의 비동기 버전.

zod를 react-hook-form 라이브러리와 함께 사용하면 효과적임. react-hook-form을 통해 전체적인 form들을 관리해주고 zod는 특정 form들에 매핑되어야 하는 값이 올바른지에 대한 유효성 판단을 함.

이번 프로젝트에서 토큰 관리를 어떻게 할 예정인지, 그리고 왜 그런 방법을 선택했는지에 대해 설명해 주세요.

구분	선택 방식
Access Token	Zustand(메모리 상태 관리) 사용, 새로고침 시 초기화
Refresh Token	Zustand + persist 플러그인, localStorage에 저장 (CryptoJS로 암호화 예정)

Access Token → 메모리(Zustand) 관리

• Access Token은 수명이 짧고, API 요청 시 Authorization 헤더에만 사용됨.
• localStorage에 저장하면:
  • XSS(크로스 사이트 스크립트) 공격으로 탈취될 위험이 큼.
• 메모리에만 두면:
  • 새로고침하면 사라져서 XSS 방어가 강함.
  • 단점: 새로고침 시 자동 로그인 풀림 → 이건 refresh token으로 보완.

Refresh Token → Zustand + persist + 암호화(예정) → localstorage 저장

• Refresh Token은 Access Token 재발급용으로 긴 수명을 가짐.
• 새로고침 후에도 유지되어야 자동 로그인, 자동 재발급이 가능.
• 하지만 localStorage에 평문으로 넣으면 XSS로 탈취 위험이 큼
• 그래서 CryptoJS로 암호화한 후 local storage로 저장:
  • localStorage에는 암호화된 문자열로만 기록됨.
  • 복호화는 내부에서만 처리됨.