👇🏻보리 노트 카테고리👇🏻61 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.to.. 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. 6개월동안 달려온 코드잇 프론트엔드 부트캠프.. 🏃🏻♀️➡️6개월 달린 코드잇 프론트엔드 부트캠프 회고록코드잇 스프린트 6기2024년 3월 7일 ~ 2024년 9월 2일🤔내가 이걸 왜 시작했냐면...가장 큰 이유는.. 졸업 후, 여러 회사 면접을 보면서 내 기술적인 역량이 많이 부족하다는 것을 깨달았었다. 면접에서 받았던 피드백과 스스로의 기술 수준을 객관적으로 평가해보았을 때, 특히 리액트에 대한 심도 있는 이해가 부족하다는 것을 느꼈다. 그래서 기술적 지식을 보강하고, 리액트를 보다 깊이 공부할 필요성을 절감했고, 여러 학원을 찾아보다 코드잇 부트캠프에 지원하게 되었다.❓왜 코드잇내 주변 친구들이 국비 지원 학원에 다닌 경험이 있었다. 그 친구들은 팀 프로젝트에서 혼자 모든 일을 떠안고 힘들었다고 푸념하는 경우가 많았다. 팀플의 어려움과 .. 2024. 9. 5. 카카오 간편 로그인 구현하기 카카오 간편 로그인 구현하기✅카카오 로그인 절차인가 코드 발급: 사용자가 카카오 로그인 버튼 클릭 → 카카오 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 카카오가 인가 코드를 서비스에 리다이렉트.토큰 발급: 서비스가 인가 코드로 카카오에 토큰 발급 요청 → 카카오는 서비스에 사용자 토큰 발급.회원 확인 및 등록: 서비스가 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요시 회원 등록 → 서비스 로그인 처리.서비스 로그인: 서비스가 세션 발급 → 사용자 클라이언트에서 로그인 완료 및 서비스 화면으로 이동.위를 바탕으로 카카오 소셜 로그인을 구현해보자.1. 앱 등록하기아래 링크로 들어가 애플리케이션을 추가한다.https://developers.kakao.com/console/app2... 2024. 8. 24. 이전 1 2 3 4 ··· 7 다음 반응형
