*접속 유저/접속 횟수 총합 등의 위젯은 접속한 당시의 날짜를 보여주는 것으로 가정해, 데이터에 포함된 날짜 중 임의로 '당일 날짜'를 지정해 표시했습니다.
*DAU의 경우 '당일 날짜'로부터 일주일간의 데이터를 표시했습니다.
Tech stack
프레임워크
언어
빌드 도구
상태관리 라이브러리
유닛 테스트
컴포넌트 문서화
*인터렉션이 많고 실시간으로 변경되는 데이터를 보여주는 프로젝트 특성상, SSR을 고려하지 않고 React와 Vite를 선택해 구현했습니다.
📒 구현 사항
접속 유저의 총합
1. 일자별 데이터 합산 표현
SUM(Unique Event Count)
2. 전일 대비 증감값 표현
접속 횟수의 총합
1. 일자별 데이터 합산 표현
SUM(Total Event Count)
2. 전일 대비 증감값 표현
이벤트 추이에 대한 추이 차트
Serial 차트
1. 차트 내 두 개의 series(line, bar) 표현
unique_view: line, page_view: bar
탑 리퍼러
1. 리퍼러별 접속 유저를 내림차순으로 정렬
2. Top 4 까지 범례로 표현
3. Top 5 부터 합산 후 범례명을 etc로 표현
Country > Region > City, 이벤트 카운트 테이블
1. 부분합 (Row Grouping + 드릴다운 기능)
2. 컬럼별 데이터 정렬 가능
오름차순, 내림차순
📒 (참고) 추가 구현 사항
레이아웃 고정 버튼
레이아웃 초기화
위젯의 위치를 고정하고, 내부 콘텐츠를 클릭 및 조정할 수 있습니다. (TopReferral table 조작 시 참고)
위젯을 리사이징하거나 위치를 변경한 이후 레이아웃을 초기화할 수 있습니다.
📒 Point
테스트가 용이하고 재사용성 높은 컴포넌트 설계
스토리북을 사용해 독립적인 UI만을 담당하는 컴포넌트를 분리해 설계하고 문서화했습니다.
데이터에 따른 각 비주얼라이징 타입별 위젯이 어떻게 표시되는지 제 3자가 빠르게 파악할 수 있고, 협업이 용이하도록 했습니다.
필요에 따라 presentational/ container component를 분리하여 테스트에 용이한 컴포넌트를 작성했습니다.
각 props에 따라 변경되는 UI를 문서화했습니다.
위젯의 공통 레이아웃 컴포넌트를 만들고, 빈 데이터가 전달될 경우의 fallback UI를 적용했습니다.
api 호출 로직 캡슐화
xhr 통신을 사용하되, api 호출 로직을 캡슐화하여 http 메서드별 모듈화된 구조를 만들어 재사용성을 높였습니다. 제네릭 타입을 사용해 요청과 응답의 타입을 명시함으로써 안전하고 예측가능한 코드를 작성할 수 있도록 했습니다. 또한 실무 래벨에서 생각했을 때 api mocking, 인증 토큰관리 등에 api 호출시 대응해야하는 사항에 대한 유언성과 확장성을 고려하였습니다.
🧪 Test
vitest를 사용해 유닛 테스트 코드를 작성해 필요한 로직을 검증했습니다.
📒 CI/CD
unit test pre-commit
husky pre-commit을 사용해 작성한 유닛 테스트 코드로 리팩토링 및 추가 작업에 대한 안정성을 확보할 수 있도록 했습니다.
storybook 자동 빌드/배포
협업 프로세스를 고려해 PR 리뷰 단계에서 직관적으로 UI 리뷰를 진행할 수 있도록 설정했습니다.
Vercel 자동 배포 적용
trunk-based development 브랜치 전략을 고려해 작업을 진행했으며, 코드 푸시 및 main 브랜치 머지 시마다 자동 배포되도록 설정했습니다.
storybook과 프로덕트 배포가 성공 여부를 PR에서 미리 체크하고, 승인 및 머지할 수 있도록 설정했습니다.
📒 Task
github issue 생성을 통해 task를 관리하고, 관련 PR에 연결해 쉽게 찾아보고 히스토리를 관리할 수 있도록 했습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent