해당 프로젝트에서 사용하는 패키지매니저와 의존성 라이브러리에 대해서 간략하게 알아보았습니다.

• 패키지 매니저

  • pnpm

    사용 이유 :

    • yarn 사용 시 의존성 설치 과정에서 CI/CD빌드 파이프라인 시간이 늘어나 배포 효율이 감소.
    • yarn berry의 Zero Install은 git에 zip 파일로 관리가 되는데 git디렉토리가 무거워지고 의존성 변경 시 해당 파일들도 변경되기 때문에 코드 리뷰 번거롭고 불편.
    • 로컬 디렉토리에 캐싱된 의존성이 있을 경우 빠르게 의존성 설치 가능.
    • CI/CD 환경에서도 영구적으로 캐싱해서 사용하는 것도 가능.

• 의존성

  • shadcn/ui

  • formkit/auto-animate : 추가 설정 필요없는 애니메이션

  • tanstack/react-table : headlessUI, 테이블 구현

  • axios : 네트워크 통신

  • class-variance-authority : tailwindcss에서 변수 미리 생성 및 지정 가능하게 도와주는.

  • clsx : 클래스 이름 조건부로 적용할 수 있게 도와줌.

  • cmdk : ⌘K으로 명령 메뉴의 컴포넌트를 렌더링할 수 있게 해줌.

  • cookies-next : 쿠키 관리

  • date-fns-tz / date-fns : 날짜 계산, timezone으로 나라별 날짜 계산

  • form-data : 읽을 수 있는 "멀티파트/양식 데이터" 스트림을 생성하는 라이브러리입니다. 다른 웹 애플리케이션에 양식 및 파일 업로드를 제출하는 데 사용할 수 있습니다.

    → 쉽게 파일의 타입을 지정해주는건가?, 제출 폼 양식의 타입?

  • immer : 불변성을 신경쓰지 않으면서 업데이트를 해줄 경우 immer가 불변성 관리를 대신 해준다.

  • lodash : 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는데에 사용된다.

  • react-day-picker : 날짜 선택 컴포넌트

  • react-device-detect : 모바일 접속 감지

  • react-hook-form : 성능이 우수하고 사용하기 쉬운 유효성 검사를 통한 form

  • react-toastify : toast 알림

  • tailwind : css

  • zod : 유효성 검사

  • zustand : 전역 관리

  • swiper : 캐러셀 구현

  • swr : 서버 상태 관리를 위한 라이브러리.

    → 왜 react-query 안쓰고? swr을 사용했을까?

    • 가벼운 라이브러리

    비교	SWR	React Query
    전반적인 API 설계	일부 고정 기능으로 개발자를 위한 최소한의 API 제공	완벽하게 사용자 정의할 수 있는 기능을 갖춘 개발자를 위한 상세하고 다소 복잡한 API를 제공
    번들 크기(gzipped)	4.2KB	11.4KB
    인기도, 커뮤니티 지원 및 문서화	좋은 커뮤니티, 잘 관리된 저장소, 데모가 포함된 전반적으로 좋은 문서	좋은 커뮤니티, 잘 관리된 저장소, 많은 실제 예제와 완전한 API 참조가 포함된 유익한 문서
    기본 데이터 가져오기 및 변형 기능	개발자 요구 사항을 충족하지만 개발자는 일부 기능에 대해 추가 코드를 작성해야 하며 심층적인 사용자 지정 문제에 직면할 수 있다.	심층적인 사용자 정의 지원으로 개발자 요구 사항을 충족한다. 소규모 프로젝트와 통합하려는 개발자는 API가 약간 더 복잡하다는 것을 알 수 있다.
    성능 최적화	요청 중복 제거, 렌더링 최적화 및 최적화된 캐싱 지원	요청 중복 제거, 렌더링 최적화 및 최적화된 캐싱 지원
    내장된 유용성 기능	포커스 재검증, 네트워크 상태 재인출, 데이터 사전 인출, 간격 기반 재검증	포커스에 대한 재검증, 네트워크 상태 다시 가져오기, 데이터 사전 가져오기, 간격 기반 재검증, 요청 취소, 오프라인 변형 및 스크롤 복원 기능
    개발자를 위한 내장 기능	페이지 매김 및 무한 로딩 기능을 제공한다. Chrome 및 Firefox 확장을 사용하여 개발자 도구 GUI를 제공한다.	페이지네이션 및 무한 로딩 기능을 제공한다. 캐시 조작을 지원하는 공식 개발자 도구 GUI가 함께 제공된다.
    리액트 서스펜스	지원	지원
    다른 프런트엔드 라이브러리에 대한 공식 지원	아니오, 유사한 커뮤니티 라이브러리 사용 가능: **https://github.com/ConsoleTVs/sswr**	진행 중 유사한 커뮤니티 라이브러리 사용 가능: **https://github.com/DamianOsipiuk/vue-query**

Admin

페이지별 어떠한 기능을 담당하고 있는지 확인해보는 시간을 가져보았습니다.

• admin/account/administrator/[id]

  해당 관리자 권한 수정 페이지

• admin/account/administrator/add

  관리자 추가 페이지

• admin/account/administrator

  관리자 목록 페이지

• admin/account/cooperative-firm

  협력업체 목록 페이지

• admin/account/cooperative-firm/add

  • 이해가 안간 부분
    • url을 배열 형태로 반환하면 데이터를 url 순서대로 가져오는것인지. (투표지역,사업파트너)
    • multiFetcher함수가 여러번 선언되는데 처음 보는 코드라 아직까지 이해가 어려운 부분입니다.

  const getFetchUrl = () => {
    return [`/vote-area/all`, `/backoffice/business-partner/broker/all`];
  };
  
  const { data } = useSWR(getFetchUrl(), multiFetcher);
  
  //utils/common.ts
  export function multiFetcher(urls: string[]): Promise<any[]>;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  export function multiFetcher(urls: ArgumentTuple): Promise<any[]>;
  
  export function multiFetcher(urls: string[] | ArgumentTuple) {
    return Promise.all(
      urls.map((url) => axiosInstance.get(url).then((res) => res.data))
    );
  }
  

• admin/account/cooperative-firm/firmId

  파트너사 상세보기 페이지

  • 궁금한 점 해당 route layout에서는 SWRProvider를 제공하도록 구성되어있는데 api를 호출하지 않고 직접 S3 버켓에서 데이터를 가져오는지 궁금합니다.

궁금한 점