KODA 통계 페이지 구현

 

 

  

 

👆 통계 페이지 구현 움짤

 

 

KODA

 

 

 

총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작

그 중 맡았던 통계 페이지(FE)를 기록합니다

 

통계 페이지 (FE) 편

 

 

 

---

 

구현한 기능

 

 

• recharts 라이브러리 사용, 통계 시각화

 

---

 

 

 

통계 페이지는 외부 라이브러리를 접해보고자 처음부터 꼭 구현하고 싶었던 페이지였는데 팀 계획에서 shouldHave 리스트에 있어 조금 늦게 작업에 들어갔다. 다행히 기획-계획 했던 프로젝트 첫주에 라이브러리를 살펴 놓고 노션에 정리했기 때문에 기능 구현은 빠르게 할 수 있었다

 

 

 

👇 정리한 해당 노션

: https://www.notion.so/wecode/6b7e7099535a4438ae2d60aab21488c9

 

가장 많이 쓰이는 nivo와 recharts 중 고민이 많았는데 기능 구현이 먼저였기 때문에 먼저 빠르게 접하고 쓸 수 있는 recharts를 선택했다.

 

 

사용법은 매우 간단했다

 

npm install recharts

 

후에

https://recharts.org/en-US/

로 들어가 원하는 차트를 고른 후

import 한 후 쓰면 된다

 

 

 

데이터 형식은

 

 

이렇게 받았는데 사실 프론트에서 할 일보단 백엔드 팀원이 좀 더 고생스럽게 구현했던 페이지라 생각한다 😂

폼데이터 형식으로 받은 데이터를 통계 시각화를 위해 다시 코드를 만드셔야 했는데 라이브러리에 써야하는 데이터 형식은 정해져있었기에 매우 조심스럽게 요청 드렸던 기억이 남는다. 

 

 

 

아쉬운 점이 있다면

 

 

 

2022.10.10~ 2022.10.12

에러 체크 / 수정하는 기간에 기획자님께 구현 페이지에 대해 다시 피드백을 받았는데

 

차트 범례와 항목마다 색이 달랐으면 좋겠다는 의견을 주셨다

 

 

 

 

👇 피드백 후

 

 

이는 발표 전까지 빠른 시간 내에 수정했어야했는데 사용한 차트 자체가 색깔을 넣기 매우 까다로워 (커스텀 목록에 색이 없어 코드를 새로 넣어야했다) 이는 구현하지 못하고 범례만 새로 만들었다 🥲

 

이 때문에 링크 페이지와 비슷하게 기능을 제대로 살펴보고 사용했어야한다는 교훈을 다시 얻을 수 있었고 차트 자체를 바꾸는 리팩토링을 진행할 예정에 있다. 또한 객관식은 차트로 구현했지만 주관식 문항과 개인정보(이름 / 핸드폰 번호)도 추가로 데이터를 받아 보여지게 했는데 급하게 구현하다보니 fetch 함수를 재사용하지 못하고 state를 너무 많이 썼다는 코드 퀄리티 아쉬움이 굉장히 많이 남는다. 스타일 컴포넌트를 사용했기 때문에 UI 재사용은 했지만 기능과 fetch를 신경쓰지 못해 급하게 만들었다는 티가 나는 페이지가 되어 부끄럽다는 생각도 든다.

 

이는 필히 리팩토링 예정에 있으며 axios 컴포넌트를 하나로 빼서 관리하면 좋을 거 같다는 생각이 든다.

 

 

---

 

 

 

 

👇 KODA Project 회고록 링크

 

https://0119eunji.tistory.com/57?category=1055529 

KODA Project 회고록 및 위코드 수료 회고록