본문 바로가기

전체 글81

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.
페이지네이션 초간단 구현하기 (React) 📄리액트로 페이지네이션 초간단 구현하기1. 기본 설계페이지네이션은- 현재 페이지- 전체 페이지 수- 한 페이지에 표시할 개수가 필요하다!const [currentPage, setCurrentPage] = useState(1);const itemsPerPage = 4; 2. 데이터 필터링const totalPages = Math.ceil(filteredHabits.length / itemsPerPage);const displayedHabits = filteredHabits.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage,);한 페이지 당 4개가 보여야 하기때문에 slice를 해준다!!ex) currentPage가 1일 때, (1.. 2024. 12. 23.
Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트) 📊Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트)‼️구현하고자 하는 것전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기Chart.js의 Doughnut 차트를 사용해 완료/미완료 비율을 시각적으로 표현하기전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기HabitCard 컴포넌트 안에 자식인 HabitCardChart 컴포넌트를 넣어준다. const startDate = new Date(habit.startDate) const endDate = new Date(habit.endDate) // frequency에 해당하는 요일을 계산 const frequencySet = new Set(habit.frequency.map((day) => day.toLowerCa.. 2024. 12. 20.
리액트 캘린더와 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.
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.
구글 간편 로그인 구현하기 🎉구글 간편 로그인 구현하기✅구글 로그인 절차1. 인가 코드 발급: 사용자가 구글 로그인 버튼 클릭 → 구글 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 구글이 인가 코드를 애플리케이션에 리다이렉트.2. 토큰 발급: 애플리케이션이 인가 코드로 구글에 토큰 발급 요청 → 구글이 애플리케이션에 액세스 토큰 발급.3. 사용자 정보 확인: 애플리케이션이 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요 시 회원 등록 → 애플리케이션 로그인 처리.4. 서비스 로그인: 애플리케이션이 세션 발급 → 사용자가 로그인 완료 후 애플리케이션 화면으로 이동.위를 바탕으로 구글 소셜 로그인을 구현해보자.✅구현 순서1. 앱 등록하기아래 링크로 들어가 Oauth 클라이언트 ID를 생성해준다.https:/.. 2024. 9. 7.

티스토리툴바