반응형 티스토리챌린지3 [React] react-hook-form과 zod로 validation 유효성 검사 회사에서 react-hook-form을 쓰는데 zod로 유효성검사를 하는데 할 때마다 헷갈렸던 부분 한번 정리해보려고 한다. React hook formReact Hook Form은 React에서 폼을 관리하기 위한 경량 폼 라이브러리이다. 최소한의 리렌더링과 간결한 API를 통해 폼 상태를 효율적으로 관리할 수 있다. 주요 장점:간단한 API: useForm 훅을 사용하여 폼 상태와 검증 로직을 선언적으로 관리할 수 있음.퍼포먼스 최적화: 입력 필드별로 리렌더링을 최소화하여 성능을 높임.유연한 검증: 사용자 정의 검증 로직 및 다양한 검증 라이브러리와 통합 가능. React Hook Form(RHF)의 다양한 기능들1. resolver역할: 외부 검증 라이브러리(Zod, Yup 등)를 React H.. 2024. 11. 24. [React] react-daum-postcode 우편번호, 주소 검색 https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 우편 번호로 주소를 찾아야 할 때 자주 보이는 다음 우편번호 서비스 API를 사용하는 법! 리액트에서 쓸 수 있는 react-daum-postcode 패키지를 사용할 것이다. 1. 설치 npmnpm install react-daum-postcodeyarnyarn add react-daum-postcode 먼저 패키지 다운 받고 잘 받아졌는지 확인 2. 사용import DaumPostcode from 'r.. 2024. 11. 15. 쿠키 세션 캐시 차이 1. 쿠키(Cookie)정의:클라이언트(브라우저)에 작은 데이터 조각을 저장하는 방식.특징:클라이언트 측에 저장됩니다.주로 사용자 인증, 세션 유지, 사용자 맞춤 설정에 사용됩니다.서버와의 통신 시, HTTP 요청에 자동으로 포함되어 전송됩니다.속성:크기 제한: 약 4KB.유효기간 설정 가능:만료 기간이 설정된 쿠키는 일정 시간 동안 유지됩니다.세션 쿠키는 브라우저 종료 시 삭제됩니다.장점:서버 부하 감소(클라이언트에 저장되므로).간단한 데이터 저장 가능.단점:보안 취약: 데이터가 평문으로 저장될 수 있어 민감한 정보는 저장하지 않음.브라우저 제한: 크기와 개수 제한.예시:로그인 유지: 쇼핑몰에서 로그인 후, 페이지를 닫았다가 다시 열어도 로그인 상태가 유지되는 것.사용자 설정 저장: 웹사이트에서 다크 .. 2024. 11. 12. 이전 1 다음 728x90 반응형
