Front-End/Project
-
[WizSched] QueryErrorResetBoundary 적용, 에러 처리Front-End/Project 2024. 4. 2. 22:46
🍀 목차설계QueryErrorResetBoundary?구현 설계 개발하며 마주친 401, 403 등의 에러들을 어떻게 처리할지 고민했다. 사용자 입장에서 어떤 에러가 발생했는지 알 수 있게 최대한 상수화해 보자는 생각이 들었다. 작성은 Google Calendar 가이드 API 오류 처리 항목을 참고했다. 401, 403 에러인 경우 재로그인을 해야 하므로 redirect 변수를 true로 주었다. const ERRORS: ErrorMap = { 400: { message: '잘못된 요청입니다.💦', redirectState: { redirect: false, }, }, 401: { message: '잘못된 인증 정보입니다. 재로그인 해주세요.💦', ..
-
[WizSched] TanStack Query v5를 적용하여 Google CalendarList 받아오기Front-End/Project 2024. 3. 27. 11:47
🍀 목차CalendarList API왜 react-query(TanStack Query)를 적용했는가3 Core Concepts of React Query적용하기 CalendarList API 문서GET https://www.googleapis.com/calendar/v3/users/me/calendarList CalendarList API는 사용자의 캘린더 목록에 있는 캘린더를 반환한다. 기본 캘린더(Primary Calendar)는 단일 사용자 계정과 관련된 특별한 유형의 캘린더이다. 사용자 계정마다 자동으로 생성, ID는 일반적으로 사용자의 기본 이메일 주소와 일치한다. 이 기본 캘린더는 삭제하거나 사용자가 소유 해제할 수 없다. 하지만 다른 사용자와 공유할 수는 있다. 기본 캘린더 외에도 ..
-
[WizSched] Calendar 컴포넌트 - 날짜 이동 기능Front-End/Project 2024. 2. 28. 14:40
🍀 목차목표date-fns기능 구현디자인 구현최종 완성 GIF 목표현재 월에 대한 캘린더를 보여준다.월을 이동할 수 있다.그 외 추가 디자인(오늘임을 확인할 수 있는 color 표시, 전월과 익월 날짜 스타일링)등 date-fns 아무런 라이브러리를 사용하지 않고 구현하고 싶었지만, 목표 기간이 있기에 Date 객체를 다루며 마주칠 에러들을 모두 방지하며 완성하기엔 무리가 있어 보여 라이브러리의 도움을 받기로 했다. 그중에서도 date-fns는 필요한 기능만 가져올 수 있고, TypeScript 지원, 날짜 변경 시 불변성을 지키며 새로운 객체를 반환해 주는 점, 필요로 했던 기능이 모두 있던 점 등을 매력적으로 느껴 선택하게 되었다. // 설치yarn add date-fns 사용한 메서드들은 아..
-
[WizSched] Google Calendar API 테스트Front-End/Project 2024. 2. 7. 11:14
🍀 목차Axios 설치설정테스트 메인 페이지의 캘린더 섹션에서는 현재 사용자의 월(月:Month) 캘린더를 보여주도록 기획했다. 이번 글에서는 Axios를 사용해서 Google Calendar API를 테스트해 보고 데이터가 성공적으로 넘어오는지 확인해 본다. Axios 설치 Google Calendar API와 통신하기 위해 HTTP 통신 라이브러리인 axios를 설치한다. Promise 기반의 HTTP 클라이언트로 다양한 브라우저(Fetch와 달리 IE도 지원)를 지원한다. axios 추가 라이브러리를 설치해야 한다. npm install axiosyarn add axios fetch(resource)fetch(resource, options)// options -> method, heade..
-
[WizSched] Supabase onAuthStateChange 활용하기Front-End/Project 2024. 2. 2. 16:22
🍀 목차문제onAuthStateChange?정리Session구현 문제 OAuth를 통해 유저로그인을 하는 코드는 아래와 같았다. const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github'}) 그런데 이 signInWithOAuth 메서드는 redirect를 유발하고, 해당 코드가 성공하는 순간 작성된 redirect URL로 이동한다. 이 사실을 알지 못하고 해당 코드 아래에 data가 있으면 유저 상태를 변경하는 로직을 작성했고, 그 유저 상태에는 NULL만 들어가게 되었다. 공식 문서를 부분적으로 읽다 보니 제대로 이해하지 못하고 작성하여 발생한 문제 같다. Supabase의 auth는 onAuthState..
-
[WizSched] Supabase와 Google OAuth를 이용한 로그인 구현Front-End/Project 2024. 1. 26. 06:14
🍀 목차Supabase 설정OAuth 기본Google Cloud Platform 설정로그인 구현 Supabase 설정 우선 supabse를 설치한다. yarn add @supabase/supabase-js 인증 시스템에는 두 부분이 있다.Authentication(인증) : 특정 사용자의 신원을 확인한다. 이 사람을 허용해야 하는가? 그렇다면, 누구인가?Authorization(인가) : 특정 사용자가 특정 자원에 접근하거나 사용할 수 있는 권한을 부여한다. 들어가면, 무엇을 할 수 있는가? 사용자의 신원을 확인하여 인증하고 로그인하면, 인가를 통해 특정 자원에 대한 권한 부여 및 관리를 하게 된다. Authentication인증 또한 여러 방법이 있다.email, phone, passwor..
-
[WizSched] react-router-dom v6 Outlet 적용Front-End/Project 2024. 1. 11. 02:53
🍀 목차문제Outlet적용하기 문제 지금까지 프로젝트에서 Header가 고정된 레이아웃을 만들 때 app.tsx에서 Header를 선언하여 사용했었다. 이 구조를 다시 보니 라우팅을 관리하는 컨테이너와 UI 컴포넌트가 뒤섞여 있어 읽기 어렵다고 생각했다. 또한 프로젝트에 여러 API를 활용하기에 페이지마다 Header가 달라질 수 있다 판단했다. 그럴때마다 pathname을 이용해 조건문을 작성하여 렌더링 여부를 판단하기는 번거롭다고 느꼈다. 이를 어떻게 개선할 수 있을까 검색해 보다가 react-router-dom(v6)의 Outlet을 알게 되었다. Outlet Outlet은 중첩 라우트 구조에서 자식 라우트를 표시하는 데 사용된다. 부모 라우트의 특정 위치에서 자식 라우트를 렌더링 할 수..
-
[WizSched] 설정 기록Front-End/Project 2023. 12. 15. 02:04
🍀 목차Issues, TemplatesProjectsdefault branch 변경Vite Template을 활용하여 React+TS 세팅ESLint 설정Prettier 설정Tailwind CSS 설치postcss.config.jstailwind.config.jstsconfig.json 프로젝트 요약Google APIs를 활용한 프로젝트 Issues, Templates 개선에 대한 고민만 담은 라벨 추가(예정) Issue 템플릿을 등록하여 이슈 등록 시 편하게 만든다. 개인 프로젝트기에 매번 Assignees는 나이고, Feat 관련 이슈는 Labels를 매번 Feat으로 붙여줘야 할 테니 default로 바꿔주었다. 비슷하게 Bug, Refector, 기타 작업을 위한 템플릿도 만들..