react-hook-form4 Next.js에 firebase 연동해서 회원가입 구현하기 🔥Next.js에 firebase 연동해서 회원가입 구현하기[🔥Next 뽀개기] - Zod + React Hook Form = 회원가입 뚝-딱! Zod + React Hook Form = 회원가입 뚝-딱!✅Zod, React Hook Form으로 회원가입 만들기❓Zod기존에 yup을 사용하다가 zod도 많이 쓰는 걸 봐서 사용해봤다. zod는 타입스크립트와의 호환성이 뛰어나다. zod는 타입 추론을 자동으로 지원하므로, 별bori-note.tistory.com 이전 포스팅에서 작업한 회원가입 폼에 firebase를 연동해 사용자 정보를 저장하려고한다. firebase의 auth는 이메일/비밀번호라 기존 폼에서 아이디를 이메일로 바꿔주고 작업을 진행했다.1. 아래 링크로 접속해 console로 이동해 .. 2024. 11. 29. Zod + React Hook Form = 회원가입 뚝-딱! ✅Zod, React Hook Form으로 회원가입 만들기❓Zod기존에 yup을 사용하다가 zod도 많이 쓰는 걸 봐서 사용해봤다. zod는 타입스크립트와의 호환성이 뛰어나다. zod는 타입 추론을 자동으로 지원하므로, 별도의 타입을 명시하지 않고도 스키마에서 바로 타입을 추론할 수 있다.type FormData = z.infer; // signupSchema로부터 타입 자동 추론0. zod 설치npm install react-hook-form zod @hookform/resolvers1. 회원가입 스키마 만들기zodResolver를 이용해 zod 스키마로 유효성 검사를 해준다.import { z } from 'zod'export type SignupInput = z.inferexport const si.. 2024. 11. 27. react-hook-form + yup = 회원가입/로그인(feat.쿠키) ✨회원가입react-hook-form & yup으로 폼 제출하기👇🏻기본 틀 const { register, handleSubmit, formState: { errors, isValid }, trigger, } = useForm({ resolver: yupResolver(authSchema), mode: 'all', }); // confirmPassword를 제외하고 폼 제출 const onSubmit: SubmitHandler = ({ confirmPassword, ...data }) => { console.log('폼 제출', data ); }; return ( .. 2024. 8. 2. input 공통 컴포넌트로 만들기 (feat. react-hook-form + yup) 리액트 훅 폼+yup을 사용해 input 공통 컴포넌트 만들기✨초기작업타입에 따라 input 분기처리하기import { passwordOffIcon, passwordOnIcon } from '@/libs/utils/Icon';import Image from 'next/image';import React, { useState } from 'react';import { FieldError, UseFormRegisterReturn } from 'react-hook-form';type InputProps = { label: string; name: string; type?: 'text' | 'password'; placeholder: string; register: UseFormRegisterRetur.. 2024. 8. 1. 이전 1 다음 반응형
