zod 라이브러리 사용

[scarf005]

zod 라이브러리는 파싱 라이브러리로, 원시값에서 복잡한 객체까지 쉽게 파싱할 수 있고, 기본값과 후처리 기능도 제공합니다.

사용하는 이유

1. 런타임에서 쉽게 복잡한 타입 검증을 할 수 있습니다. 타입스크립트는 컴파일 시에만 타입 안정성을 검증할 수 있기 때문에, API 요청 등 런타임에서 받은 값을 그대로 쓰면 잘못된 타입을 사용해 문제가 될 수 있습니다.
2. 현재 이러한 문제를 해결하기 위해서는 compareExpect 함수를 사용하고 있지만, zod를 사용하면 훨씬 간결한 문법으로 표현할 수 있고, 타입스크립트 타입처럼 스키마를 자유롭게 조합해 더 복잡한 타입도 검증할 수 있습니다.
3. zod 스키마를 정의하면 그대로 타입으로도 쓸 수 있습니다. DTO와 데이터 검증 로직을 따로 쓸 필요가 없어집니다.

사용예

import { z } from 'zod'

const bookSchema = z.object({
  bookId: z.number(),
  title: z.string(),
})

type Book = z.infer<typeof bookSchema>
// {
//   bookId: number;
//   title: string;
// };

bookSchema.parse({ bookId: 1 })
// Uncaught ZodError: [
//   {
//     "code": "invalid_type",
//     "expected": "string",
//     "received": "undefined",
//     "path": [
//       "title"
//     ],
//     "message": "Required"
//   }
// ]

bookSchema.safeParse({ bookId: 1 })
// { success: false, error: ZodError: [ ... ] }

bookSchema.safeParse({ bookId: 1, title: 'book', foo: 'bar' })
// { success: true, data: { bookId: 1, title: "book" } }

bookSchema.parse({ bookId: 1, title: 'book', foo: 'bar' })
// { bookId: 1, title: "book" }

const bookListSchema = z.array(bookSchema)
const bookResponseSchema = z.object({
	errorCode: z.number()
    data: bookListSchema
})

zod를 사용하여 아래와 같은 코드를 대체할 수 있습니다.

frontend/src/util/typeCheck.js

Lines 16 to 42 in 71f9d1f

	export const compareExpect = (url, responseItems, expectedItem) => {
	const items = [];
	responseItems.forEach(item => {
	const refinedData = {};
	expectedItem.forEach(expect => {
	const value = item[expect.key];
	if (expect.type === "*") {
	refinedData[expect.key] = value;
	} else if (typeof expect.type === "object") {
	const object = compareExpect(url, value, expect.type);
	refinedData[expect.key] = object;
	} else {
	const { checker } = typeChecker.find(i => i.type === expect.type);
	if (
	isUndefined(value) ||
	(!expect.isNullable && isNull(value)) ||
	(expect.isNullable && !isNull(value) && !checker(value))
	)
	throw Error(`type error ${url} ${expect.key} ${value}`);
	refinedData[expect.key] = value;
	}
	});
	items.push(refinedData);
	});
	return items;
	};

frontend/src/api/books/useGetBooksSearch.js

Lines 16 to 30 in 62278a3

	const expectedItem = [
	{ key: "bookId", type: "number", isNullable: false },
	{ key: "bookInfoId", type: "number", isNullable: false },
	{ key: "status", type: "number", isNullable: false },
	{ key: "title", type: "string", isNullable: false },
	{ key: "author", type: "string", isNullable: false },
	{ key: "category", type: "string", isNullable: false },
	{ key: "categoryId", type: "number", isNullable: false },
	{ key: "isbn", type: "string", isNullable: true },
	{ key: "publisher", type: "string", isNullable: false },
	{ key: "publishedAt", type: "string", isNullable: true },
	{ key: "callSign", type: "string", isNullable: false },
	{ key: "image", type: "string", isNullable: true },
	{ key: "isLendable", type: "number", isNullable: false },
	];