원티드 프리온보딩 인턴쉽 3주차 과제

AI기반 RPA 기술에 특화된 벤처기업 플렉시스 기업 과제 입니다.

🔗 결과 링크

• 최종 결과물 바로가기

📝 과제 목적

• 주어진 데이터를 기반으로 시계열 차트 만들기
• Best Practice 만들어 제출하기

✅ 과제 진행 방법

기능 구현 목록을 작성 후 아래와 같이 분류하였습니다.

1. 시계열 차트 구현
2. 툴팁 구현
3. 필터링 구현

분류에 따라 팀원 개개인이 과제를 수행했습니다. 리뷰 시간을 정하여 해당 시간에 PR에서 코드리뷰를 했습니다. 투표를 통해 Best Practice를 선정한 후, 다른 과제 중 좋았던 구현들을 의논하여 추가하였습니다. 이슈와 PR메시지를 활용하여 문서화하였습니다.

🌟 Best Practice 선정 및 이유

• Mar 17, 2023 　|　필터링 기능 구현

  • useSearchParams를 커스텀 훅으로 만들어서 재사용 및 가독성 향상

  • 지역에 대한 다중 필터링

• Mar 15, 2023  　|　차트, 호버 기능 구현

  • 중복되는 년도, 월을 분리하는 함수를 만든 것

  • 코드의 가독성 (변수명 활용을 잘 하여 의미부여를 명확하게 한 점)

  • useChart 커스텀 훅을 이용한 관심사 분리가 된 점

🐞 이슈 및 버그

• Mar 17, 2023  　|　Charts 크기에 따른 하이라이트 이슈
• Mar 16, 2023  　|　Recharts dot 렌더링 이슈 공유
• Mar 15, 2023  　|　EDA: 목데이터 특성 파악

👨‍💻 팀원 소개

🚀 기능

• 시계열 차트
• 툴팁 표시
• 필터링 기능 (지역별, 다중선택)

✨ 기술 스택

• React
• Typescript
• axios
• craco
• react-router-dom
  • 쿼리스트링으로 필터 관리
• Recharts
  • 컴포넌트 단위로 리액트스럽게 코드관리 가능
  • 상세한 문서 및 예시
  • 다양한 커스터마이징 기능을 제공

🤝 협업 툴

• Discord
• Notion
• Github

🗂️ 디렉토리 구조

src
 ┣ api
 ┣ assets
 ┃ ┗ icons
 ┣ components
 ┃ ┗ chart
 ┣ constants
 ┣ interface
 ┣ lib
 ┃ ┣ hooks
 ┃ ┗ utils
 ┗ pages
   ┗ chartpage

⚙️ 설치 및 실행 가이드

Install

npm i

Build

npm run build

Start

npm start