회원가입4 React Native에 React Query 적용하기 React Native에 React Query 적용하기React Query란?React Query는 서버 상태 관리 라이브러리로 아래와 같은 기능을 제공한다!데이터 페칭, 캐싱, 동기화, 업데이트 관리네트워크 요청 상태(로딩, 에러, 성공) 추적서버 데이터 캐싱 및 리패칭 최적화이번 프로젝트에서 회원가입 기능을 구현하면서, React Query를 도입했는데 연습용으로 사용해봤다. React Query는 서버와의 비동기 통신을 효율적으로 관리하고, 상태 관리가 복잡하지 않게 해주는 도구로 잘 알려져 있다. 기존에는 서버와의 비동기 통신을 처리하기 위해 fetch나 axios를 사용했었지만, React Query는 비동기 상태를 자동으로 관리해줘서 상태 변화에 따른 처리 로직을 더욱 깔끔하게 작성할 수 있었.. 2025. 2. 8. 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 = 회원가입/로그인(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. 이전 1 다음
