Firebase6 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 App Router + PWA + Firebase로 알림 구현하기 Next.js App Router + PWA + Firebase로 알림 구현하기다른 개발자 블로그 보면 푸시 알림 금방 금방 구현했다고 하던데, 나는 계속 오류가 나고, 도대체 왜 알림이 두 번 뜨는지(아직 해결 못 함 ㅎ), 왜 권한 요청이 제대로 안 되는지 도통 알 수가 없었다. 구글링 해보면 다들 쉽게 잘 하는 것 같은데, 나는 뭐가 그렇게 꼬였는지 한 번 해결하면 또 다른 문제가 터지고... 정말 힘들었다. Next.js App Router + PWA + Firebase를 조합해서 푸시 알림을 구현한 과정과 그동안 겪은 문제들, 해결 방법을 정리해보자..❓PWA란PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 앱처럼 사용할 수 있게 해주는 기술이다. 기본적으로는 웹사이트지.. 2025. 1. 26. 리액트 캘린더와 Firebase로 CRD 구현하기 📆리액트 캘린더와 Firebase로 CRD 구현하기‼️구현하고자 하는 것1. 사용자가 새로운 루틴을 추가할 수 있는 모달 창 제공2. 사용자는 시작 날짜와 종료 날짜를 설정하고, 반복 주기 표시하기3. 사용자가 특정 날짜에 루틴을 완료했다고 표시하기4. react-calendar를 사용하여 날짜별로 루틴을 완료한 여부를 시각적으로 표시하기🔥데이터를 Firestore에 저장할 때 사용할 데이터 구조 정의하기habitName: 루틴 이름startDate: 시작 날짜endDate: 종료 날짜frequency: 루틴을 수행할 요일들type Habit = { id: string name: string startDate: string endDate: string frequency: string[] c.. 2024. 12. 16. Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie) 🔥Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie)Next.js App Router에서 Layout을 활용해 메인페이지 하위에 공통 레이아웃을 적용해 AuthGuard를 적용해보자.메인페이지 하위 폴더 내에는 무조건 로그인을 해야 접속할 수 있게!!0. 폴더구조1. 로그인 시 토큰 저장로그인 시 Firebase에서 발급된 JWT 토큰을 쿠키에 저장해 인증 상태를 유지한다.npm install cookies-nextconst onSubmit = async (data: FormData) => { try { const userCredential = await signInWithEmailAndPassword( auth, d.. 2024. 12. 1. [firebase 인증 오류] firebase: error (auth/invalid-credential). 🔥Firebase 인증 오류: "auth/invalid-credential" 문제 해결 방법로그인 오류에서 계속 default 로 설정한 오류 메세지만 나오는 이슈를 발견했다...case에 따라 오류메세지가 다르게 나와야하는데... error를 찍으면 "auth/wrong-password" 또는 "auth/user-not-found" 오류 대신 "auth/invalid-credential"만 나온다.. const onSubmit = async (data: FormData) => { try { await signInWithEmailAndPassword(auth, data.email, data.password) alert('로그인 성공!') router.push('/mai.. 2024. 11. 30. 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. 이전 1 다음
