📌  정보

• 기간: 2024. 01 ~ 2024. 08
• 역할: 테일즈런너 어드민 프론트 개발
• 참여인원: 2명
• 사용 기술: React, TypeScript, TanStack Query

📌  작업 내용

• 전반적인 프로젝트 수행
  • 프로젝트 초기 기획 단계에서부터 참여하여 요구 사항 분석, 페이지 설계, 데이터 흐름 정의 등 전체적인 프로젝트 진행을 하였습니다.
• 프론트엔드 개발 50% 담당
  • 페이지 설계 및 구현: 공지사항 CRUD 기능을 구현하기 위해 React와 TypeScript를 사용하여 각 페이지를 설계하고 개발했습니다. 주요 페이지로는 공지사항 작성, 상세보기, 수정, 리스트 페이지가 포함되었습니다.
  • 공통 컴포넌트 개발: 재사용 가능한 서치바, 리스트, 테이블 컴포넌트를 설계하여 여러 페이지에서 일관된 UI를 유지할 수 있도록 했습니다.
  • 데이터 관리 및 최적화: TanStack Query를 활용하여 효율적인 데이터 패칭 및 캐싱을 구현하고, React Router의 lazy와 loader 기능을 통해 초기 로딩 속도를 개선했습니다.
  • 입력 폼 관리: React Hook Form을 사용하여 복잡한 입력 폼을 효율적으로 관리하고 검증 기능을 간소화하여 개발 효율성을 높였습니다.

📌 개발 프로세스 및 접근 방식

• 페이지 구성

  • 페이지는 CRUD(Create, Read, Update, Delete) 기능에 맞춰 설계 하였습니다.
  • 페이지 폴더는 다음과 같은 예시(공지사항)로 구성하였습니다.
    • noticeWritePage: 작성 페이지
    • noticeDetailPage: 상세 보기 페이지
    • noticeModifyPage: 수정 페이지
    • index: 메인 페이지
      • 서치바와 리스트를 공통 컴포넌트로 관리하였습니다.
      • 서치바 컴포넌트는 URL의 쿼리 파라미터(param)을 활용해 검색 구현하였습니다.
    • util: 공통 기능/유틸리티 모음
      • makeNoticeListTable
        • 메인 페이지에 리스트를 구성할 때 사용됩니다.
        • tableList를 빈 배열로 초기화 한 후, 데이터를 tableCellPush 형식으로 유동적이게 구현하였습니다.
      • makeNoticeCRUDTable
        • json 형식으로 데이터를 구성해 작성 페이지, 상세 보기 페이지, 수정 페이지에서 공통적으로 사용 되어지게끔 구성하였습니다.

• 데이터 관리

  • React-Router-Dom의 lazy와 loader 기능을 활용하여 페이지별 데이터 로딩을 효율적으로 처리하였습니다. 이를 통해 초기 로딩 속도를 개선하고, 사용자가 필요한 데이터만 로드하도록 최적화하였습니다.
  • TanStack Query를 사용하여 데이터 패칭, 캐싱, 그리고 상태 관리를 구현하였습니다. 이를 통해 서버와의 불필요한 요청을 줄이고, 데이터 동기화 문제를 효과적으로 해결했습니다.
  • 각 페이지의 데이터를 라우트 레벨에서 로드함으로써 성능 최적화를 도모하였으며, 사용자 경험을 향상시키는 데 기여하였습니다.

• 입력 관리

  • React-Hook-Form을 활용해 입력 데이터 관리 최적화하였습니다.
  • 특히 어드민 페이지처럼 입력 필드가 많은 경우, React-Hook-Form을 이용해 폼 상태를 효율적으로 관리하고 검증을 간소화하였습니다.

📌 트러블 슈팅