개발 🐾

문제 상황Next.js를 사용해 캘린더 페이지를 개발하는 중,Supabase 통신 중 발생하는 에러를 페이지 라우터 세그먼트 내의 error.tsx로 통합해서 처리하려 했다.하지만 에러를 던질 때 내가 지정한 메시지와 런타임 중 발생하는 시스템 메시지가 섞여 나오는 문제가 있었다.또한, app/api/**/route.ts (라우트 핸들러)supabase 호출 함수(fetch)클라이언트 컴포넌트 (page.tsx)탠스택 쿼리(useQuery)이렇게 여러 레이어를 거치면서 에러 흐름을 깔끔하게 잡는 것도 고민이 필요했다. 최종적인 에러 흐름은 아래와 같다.라우트 핸들러성공or에러를 객체 형태로 받아서 return 👉🏻 페이지에서 에러 객체를 잡아서 throw 👉🏻 error.tsx 잡음 더보기impo..

오전 스크럼 시간에 캘린더 구현 기능을 이야기 나누던 중, 튜터님의 한 마디"약속 데이터는 한 번에 다 받아오나요? 월별로 넘어갈 때마다 데이터를 가져오는 건 어떨까요?" 테스트 단계인 지금은 임의의 값 두어 개만 넣어놓고 전체를 가져오기 때문에 크게 문제가 안 되겠지만,실제로 이 서비스가 활성화된다면..여러 유저가 약속 일정을 추가하게 되고, 시간이 지나 아주 예전 데이터까지 다 불러오게 된다면... 안 되겠다. 매 달마다 데이터를 가져오고 캐싱해두어야겠다. 월별 데이터 캐싱하기 간단히 설명하자면 캘린더 컴포넌트 - useQuery 커스텀 훅 - supabase 데이터 페칭 함수 세 로직의 관계를 수정하면 된다. 캘린더 컴포넌트캘린더 컴포넌트의 역할은 다음과 같다.해당 달의 상태 관리 - Date 객체..

달력이라면 필요한 공휴일 ! 공공데이터 API 발급 공휴일 정보를 얻어오기 위해서 공공데이터를 이용하였다. 회원가입과 로그인을 하고 활용신청을 클릭한다.신청이 완료되면 일반 인증키 두 개가 발급되는데, Encoding 키를 이용하였다.  API 적용 라우트 핸들러.env.local 파일에 키 값을 둘 때 한 가지 유의할 점이 있다.supabase의 어논키 같은 경우는 브라우저에 노출되어도 크게 문제가 안 되기 때문에 'NEXT_PUBLIC'을 붙여서 사용한다. 하지만 공공데이터 같은 경우는 회원가입 후 발급받았기 때문에 브라우저에 노출이 조금 꺼려졌다.따라서 'NEXT_PUBLIC'을 사용하지 않았다.const ENV = { SUPABASE_URL: process.env.NEXT_PUBLIC_SUPAB..

시작 요일, 월간만 보여주기 월요일부터 시작const localizer = dateFnsLocalizer({ format, parse, startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 1 }), // 월요일 시작 getDay, locales,});  월간만 보여주기    RBC 주요 컴포넌트 좌측 상단에 날짜 넘기기 / 오늘 날짜 버튼을 두어 달력의 이동을 구현하고 싶었다.사례를 찾다보니 RBC의 요소들을 여러 컴포넌트로 쪼개서 사용할 수 있다는 것을 알게되었다. 쪼갤 수 있는 주요 컴포넌트는 다음과 같다.components={{  toolbar,           // 상단 툴바  event,             // 이벤트 셀  ..

이전 상황 : Tanstack Query 적용 중 undefined 방지useEffect로 처리했던 이전 로직을 tanstack으로 관리하기 위해 커스텀 훅으로 뺐다.아래 로직은 formatted 로직을 제외한, supabase에서 데이터를 받아오는 부분만 커스텀으로 뺐을 때의 로직이다.'use client';import { Calendar, dateFnsLocalizer } from 'react-big-calendar';import { format, parse, startOfWeek, getDay } from 'date-fns';import { enUS } from 'date-fns/locale/en-US';import { ko } from 'date-fns/locale/ko';import { useS..

RBC에 대한 기본적인 기능 및 설정은 얼추 마무리되고, 실제 데이터와 연동하고자 한다.supabase 테이블에 적용된 데이터를 가져와서 캘린더에 출력해보았다.supabase 테이블 연결 설정은 간략히 아래와 같이 진행했다.페이지, 컴포넌트 생성 및 연결supabaseClient 생성 (supabaseClient.ts)plans 테이블 값 불러오기 로직 (supabaseApi.ts)plans 타입 지정컴포넌트에서 호출 : useState, useEffect  new Date() 초기값을 빈 배열로 두어 이벤트 상태를 관리하였다.하지만 state의 타입을 로 지정하였을 때 에러가 발생했다. 에러는 다음과 같이 나타났다."이 호출과 일치하는 오버로드가 없습니다. '"start"' 형식은~ , '"end"' ..

RBC의 렌더링 방법(CRS)까지 파악하여 캘린더 형태를 출력하였다!RBC의 기본적인 스타일이며, 커스터마이징을 위한 내용들을 정리한다.  RBC의 기본 스타일 RBC npm 문서를 읽던 중 SASS에 대해 알게 되었다.문서에는 다음과 같이 나와있다.   이 말인즉슨, RBC의 기본 스타일이 적용된 CSS 파일(react-big-calendar.css)이 있고 이를 바로 import 하여 접근할 수 있다.하지만 스타일을 커스터마이징하려면 SASS 파일을 수정해야 한다.이렇게 수정한 SASS 파일은 새로운 CSS 파일을 빌드하며 직접 import 한다. 초기 세팅 중 아래와 같이 캘린더 컴포넌트에 인라인 스타일 요소를 적용시켰다.공식 문서에 나와있듯 달력의 컨테이너 요소에 높이를 주어야 화면에 나타나기 때..

리액트 빅 캘린더(RBC)를 구현하기 전, 캘린더는 사용자와의 상호작용이 많이 필요하기 때문에(이벤트 핸들러) 클라이언트 컴포넌트여야 한다고 생각했다.실제로 "use client"를 명시하지 않으면 아래와 같은 오류가 발생했다.  CSR인 이유오류가 발생했다는 것은 필히 클라이언트 컴포넌트여야 한다는 것인데.. 🤔그 이유가 무엇일까?1. RBC는 내부적으로 클래스 컴포넌트를 사용우선 사진과 같은 오류는 클래스 컴포넌트 기반 라이브러리를 서버 컴포넌트에서 렌더링하려고 할 때 발생한다.클래스 컴포넌트는 서버 컴포넌트에서 동작할 수 있도록 설계되지 않았다.따라서 RBC는 Next.js의 서버 컴포넌트 환경에서는 이를 직접 실행할 수 없다. 2. 이벤트 핸들링일정 클릭, 드래그 등 사용자와의 상호작용이 필요한..

RBC npm 문서를 읽던 중, 날짜 형식을 지정해야 한다는 점을 알았다.RBC는 기본적으로 날짜 및 시간을 처리하지 않기 때문에형식을 지정하기 위해 네 가지의 플러그인을 지원하고 있다.나만의 생각 정리RBC는 달력 형태를 만들어 줄 뿐,해당 숫자가 날짜를 뜻하는 바임을 알게 해주는 것은 플러그인의 역할이다.즉, 캘린더와 사용자 사이에서 캘린더에게는 문자열로 전달, 사람에게는 날짜로 전달해 주는 통역가 역할이다.  RBC에서 지원하는 네 가지 플러그인을 비교해보았다.공식문서: Moment.js , Globalize.js , date-fns , Day.js 라이브러리번들 크기성능Tree Shaking 지원TypeScript 지원타임존 지원Moment.js약 260KB느림XO(moment-timezone 필..

리액트 빅 캘린더(RBC)를 프로젝트에 적용하기 전, 파악 겸 연습으로 개인 파일을 생성했다.초기 세팅부터 난관이 시작되는데...협업 시 적용하기 위해 기록해본다. 진행 상황리액트 빅 캘린더 설치pnpm dev오류 : You forgot to add 'mini-css-extract-plugin' plugin 'please read' 링크로 들어가보니 'CSS 코드가 포함된 JS 파일 별로 CSS 파일을 생성' 무슨 말??Webpack은 모든 코드(JS, CSS 등)를 번들링해서 하나의 JavaScript 파일로 만듬하지만 이렇게 하면 CSS가 JS 번들에 포함되어 브라우저에서 로딩할 때 최적화되지 않을 수 있음 mini-css-extrant-plugin 적용 [리액트 환경] 아래는 리액트 환경에서 min..