CalendarApi
-
[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] 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] 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..
