본문 바로가기

Zod2

[React] React Hook Form과 Zod로 폼 유효성 검증 구현 단순한 데이터 검증을 넘어, 사용자 입력을 관리할 때. React Hook Form과 Zod를 함께 사용하면 코드의 양은 크게 줄어들고, 타입 안정성은 극대화될 수 있습니다.. 1. 시작, 필수 패키지 설치 React Hook Form과 Zod를 연결해주는 어댑터인 @hookform/resolvers 추가로 설치.npm install react-hook-form zod @hookform/resolvers 2. 왜 이 조합?기본적인 React Hook Form의 register 방식은 검증 로직이 JSX 안에 파편화되어 유지보수가 어려움.하지만 Zod를 연동하면 하기의 장점이 있습니다.비즈니스 로직의 분리: 검증 로직(Schema)을 컴포넌트 외부에서 관리할 수 있다.강력한 타입 추론: 폼에 입력된 데.. 2026. 3. 12.
[TypeScript] Zod 시작하기, 타입스크립트 Validation 라이브러리 TypeScript를 사용하면서 가장 흔히 겪는 문제 중 하나는 외부에서 들어오는 데이터(API 응답, 사용자 입력 등)의 타입을 보장할 수 없다는 점인데. TypeScript의 타입 시스템은 컴파일 타임에만 작동하기 때문입니다.이러한 문제를 해결하고 런타임에서도 데이터의 무결성을 완벽하게 보장해주는 라이브러리가 바로 Zod 입니다. 1. Zod란?Zod는 TypeScript-first 스키마 선언 및 검증 라이브러리로.단순히 데이터를 검사하는 것을 넘어, 정의한 스키마로부터 TypeScript 타입을 자동으로 추론할 수 있다는 점이 가장 큰 특징입니다.https://zod.dev/ Intro | ZodIntroduction to Zod - TypeScript-first schema validation .. 2026. 3. 12.