원티드 프리온보딩 3주차

주어진 데이터를 기반으로 시계열 차트 만들기

배포주소

프로젝트 실행 방법

react app

npm i
npm run dev

요구사항

1. 시계열 차트 만들기
   • 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
   • 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
   • Area 그래프의 기준값은 value_area 값을 이용해주세요
   • Bar 그래프의 기준값은 value_bar 값을 이용해주세요
   • 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)
   
   
2. 호버 기능 구현
   • 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요
   
   
3. 필터링 기능 구현
   • 필터링 기능을 구현해주세요, 필터링은 특정 데이터를 하이라이트 하는 방식으로 구현해주세요
   • 필터링 기능은 버튼 형태로 ID값(지역이름)을 이용해주세요
   • 필터링 시 버튼에서 선택한 ID값과 동일한 ID값을 가진 데이터 구역만 하이라이트 처리를 해주세요
   • 특정 데이터 구역을 클릭 시에도 필터링 기능과 동일한 형태로 동일한 ID값을 가진 데이터 구역을 하이라이트해주세요

🌟 최종 결과

1. 시계열 차트 만들기

2. 호버 기능 구현

3. 버튼을 통한 필터링

4. 클릭을 통한 필터링

5. area / bar 필터링

작업 방식 안내

1. 차트 라이브러리 recharts, apexcharts, chart.js 중 원하는 라이브러리를 선택합니다.
2. 각 요구사항마다 이슈를 생성합니다.
3. 요구사항에 해당하는 작업이 완료되면, 해당 이슈에 대한 커밋을 작성합니다.
4. 작성한 코드에 대해 리뷰를 진행하며 사용했던 차트 라이브러리에 대한 장단점을 설명합니다.
5. Best Practice를 선정하고, 개선사항을 토론합니다.
6. 개선사항에 맞게 코드를 수정합니다.
7. 모든 작업이 완료되면 최종 결과물을 도출합니다.

개선사항

1. Query string을 통한 필터링 구현

• Query String을 이용한 필터링을 사용하면 URL에 필터링 정보가 들어 있기 때문에 새로그침 등의 이벤트가 발생했을 때도 필터링 정보가 유지된다는 장점이 있어 개선하기로 하였다.

2. rechart를 사용해 차트 구현

• rechart 라이브러리는 React에서 개발되었기 때문에 React 앱에서의 사용성이 뛰어나다 또한 빠르고 가벼우며, 데이터 양이 적을 때 빠르게 렌더링 된다는 장점이 있어 사용하기로 하였다.

3. 범례로 필터링

• 범례를 사용하면 사용자가 여러 개의 데이터 시리즈를 비교하는 데 도움이 된다. 각 데이터 시리즈가 어떤 색상이나 패턴으로 표시되는지 파악할 수 있으므로, 두 개 이상의 데이터 시리즈를 쉽게 비교할 수 있다는 점에서 기능을 추가하기로 결정하였다.

convention

git Flow

• branch : 기능별 작업
• main(master) : 최종 배포

Commit Message Pre-fix

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 내부 문서 추가/수정
• style: 코드 스타일 수정
• refactor: 코드 리팩토링
• test: 테스트 추가/수정
• chore: 빌드 관련 코드 수정
• env: 초기 세팅

회고 및 회의록

회고
회의록
기술 및 기능 리뷰

팀원

유지석(팀장)	김현우	이영우	한세준
정원호	조해솔	김일곤	최하은