💻 프로젝트(과제)
개발인원 | 1인 과제
개발기간 | 21.08 - 22.10 (8주)
프로젝트(과제) 소개
시각화된 그래프를 통하여 광고성과를 분석하고, 개선 액션을 이끌어 낼 수 있는 다차원 시각화 리포트 페이지 개발
기존 표를 통해 제공되고 있는 성과리포트의 문제를 분석하고, 이를 해결할 수 있는 기능을 구현
- 숫자로 표현되어, 떨어지는 직관성
problem - “그래프를 통해 한눈에 파악하도록 함”
solution
- 역방향 분석과 다차원 분석이 불가능한 기능적인 제약
problem - “Widget을 통해 metric과 segment를 자유롭게 생성”
solution
🛠 기술 스택
- React | Recoil | Cypress
🧑🏽💻 담당 역할 및 기능
- 4번의 스프린트를 통해 기획 부터 개발 까지 하나의 프로젝트 진행
- 2번의 프로젝트 발표 진행
- 기능 도입 검토를 위한 기획팀 대상 중간 발표 진행
🖥 세부 개발 내용
[1. Overview 및 Widget 차트 구현]
- Chart.js 라이브러리를 통해 metric과 segment 에 따라 data를 요청하여 적용하고, 4가지 타입의 그래프로 표현하도록 구현
- chart 내부에서 클릭된 segment로 모든 Widget의 Filter를 적용하는 drilldown filtering 적용
[2. 최적화를 위한 리팩토링]
- 과제 중 읽은 CleanCode의 주요 내용을 적용
- 주요로직을 빠르게 읽을 수 있도록 함수화를 통한 세부 구현의 분리
- 프로젝트 전반의 추상화 수준을 맞추어 예측 가능한 코드 작성
- 렌더링 최적화 진행
- 하나의 차트의 변경에 따라, 다른 모든 차트가 리렌더링 되며 UI적인 이슈 발생
- React.memo() 를 통해 props가 변경되지 않을 경우 리렌더링을 방지
- useCallback()을 통해 의존성이 변경되지 않는한 참조를 유지하여 리렌더링 방지
- Recoil 상태 라이브러리 도입
- 최상단 컴포넌트(App)가 비대해지고, prop 드릴링 문제 발생
- 여러 라이브러리 중, API response로 받는 성과데이터의 파생 상태 값의 처리가 용이하고, 비동기 상태 처리를 지원하는 Recoil을 선택하여 도입
- React.Suspense를 통한 비동기 상태 처리 진행
- SelectorFamily()의 parameter로 성과지표를 사용하여, 같은 요청을 반복하지 않도록 캐싱 처리
[3. Cypress 테스트]
💡 성장 경험
개발 뿐 아니라 기획 과정의 고민 경험
주도적 학습과 적용의 경험
👀 서비스 화면
