프론트 산악회🌾 프론트 산악회🌾

Front-End/Project

• [WizSched] Drag & Drop 보드 컴포넌트 - (2) Task Object 배열로 만들기

  Front-End/Project 2024. 8. 17. 07:33

  🍀목차먼저, 단순한 형태인 string 배열로 이해해 보자실제 데이터와 비슷하게 만들어보자어디를 고쳐야 할까?  먼저, 단순한 형태인 string 배열로 이해해 보자   참고한 코드는 해당 codesandbox이다! 공식 문서 Sortable도 같이 보면 좋다.   아래와 같은 형태, backlog에 있는 1이나 2를 드래그한다면 active.data.current.sortable안에서 데이터들을 확인할 수 있다. const [items, setItems] = useState({ backlog: ['1', '2'], weekly: ['4', '5', '6'], });       DndContext에 전달하는 이벤트 핸들러는 직접 구현한다. codesandbox에서는 아래와 같이 구현했다.o..

• [WizSched] Drag & Drop 보드 컴포넌트 - (1) dnd-kit 적용

  Front-End/Project 2024. 7. 27. 07:06

  🍀목차목표dnd-kit을 선택한 이유dnd-kit   목표 할 일을 관리하는 Drag & Drop 보드 컴포넌트를 만들기 위해 dnd-kit을 사용해 본다.dnd-kit을 선택한 이유 처음에는 HTML Drag and Drop API, useRef 훅 등을 사용해서 직접 만들어보려 했지만, 두 개의 보드 사이를 드래그 가능한 요소가 이동해야 함, 마우스-키보드-포인터 이벤트 리스너 설정, 웹 접근성 등... Drag & Drop은 필요한 기능이나 예상시간 이상이 소요될 것이라 판단되어 라이브러리를 사용하였다. 가장 유명한 라이브러리는 react-dnd와 react-beautiful-dnd였고, dnd-kit는 둘에 비해서는 신생 라이브러리였다. 셋의 비교를 해보았다. react-beautiful-dnd..

• [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..