현황 공유

• 터미널 영역 리사이즈
• 풀이 채점 기능
• 모범 답안 기능
• Git에 대해 소개하는 랜딩 페이지
• d3 tree 레이아웃을 이용한 Git graph 시각화 및 애니메이션

Git graph 구현 과정

첫번째 후보 : gitgraph.js 라이브러리

• 장점: 리액트 컴포넌트 지원, 색상 자동 설정, Git 히스토리 데이터만 전달하면 쉽게 시각화 가능

gitgraph.js 구현 화면

<aside> ❌ 애니메이션이 필수 기능인데 라이브러리에서 지원하지 않음

</aside>

두번째 후보 : React-D3-Tree 라이브러리

• 장점: Git 히스토리 데이터만 전달하면 D3 tree 레이아웃으로 시각화한 컴포넌트 제공, 애니메이션 지원, 줌 인/아웃과 드래그 지원

• 단점: 애니메이션 기능이 레거시이며 커스텀하기 어려움

<aside> ❌ - 애니메이션 기능이 레거시인게 마음에 걸림

• 기술적 도전과제인 그래프 데이터 시각화에 대한 딥다이브가 부족하다고 판단
• 그리고 이미 만들어진 라이브러리의 디자인을 커스텀하는 것보다 직접 D3로 그리면서 우리 서비스에 맞게 커스텀하는게 더 적합하다고 생각함

</aside>

세번째 후보 : D3 tree

• 장점: Git 히스토리 데이터를 계층 구조로 변환하는 메서드 지원, 트리의 노드 위치 좌표값 계산, 데이터를 바인딩해 생성/수정/삭제 애니메이션 적용 가능

  

<aside> ❌ 노드의 부모가 여럿일 때 계층 구조로 변환할 수 없음

</aside>