라이브러리 분석 방법론

이 글은 라이브러리 소스를 처음 뜯어볼 때 어디서부터 보면 덜 헤매는지 정리한 메모입니다.. 특히 렌더링이나 차트 라이브러리처럼 코드량이 큰 경우에, 무작정 다 읽기보다 어떤 순서로 좁혀가야 하는지 기준을 남겨두려는 목적이 컸습니다.

1. 큰 그림을 파악하라

• 아키텍처 이해:
  전체 플로우(예, chart.init, setOption, resize 등)를 파악하여, 라이브러리가 어떤 컴포넌트들(시리즈 모델, 뷰, 렌더러 등)로 구성되어 있는지 이해합니다.

2. 진입점(Entry Point)부터 시작

• 초기화 과정 확인:
  예제 코드의 chart.init 부분과 echarts-gl.js의 registerPostInit/registerPostUpdate 등 초기화 훅을 분석합니다.
• 옵션 적용 흐름:
  chart.setOption()이 호출될 때 어떤 시리즈가 생성되고, 그 시리즈가 내부적으로 어떤 레이아웃/렌더링 로직을 호출하는지 살펴봅니다.

3. 관심 영역 집중: bar3D 관련 부분

• bar3D 시리즈 모델:
  Bar3DSeries.js에서 bar3D가 어떻게 정의되고, 옵션과 데이터가 어떻게 처리되는지 분석합니다.
• 기하구조(Geometry) 구성:
  bar3D에 사용되는 Bars3DGeometry.js 등을 통해, 바의 형태(정육면체 등)를 생성하는 로직을 확인합니다.
• 렌더링 및 레이아웃:
  coordinate system (cartesian3D, globe, geo3D 등)과 레이어(LayerGL)의 역할을 파악하고, bar3D의 위치, 크기, 회전 등의 계산 방법을 이해합니다.

4. 의존성 및 외부 모듈 파악

• 내부 의존성:
  echarts의 기본 기능, claygl, gl-matrix, orbitControl 등 바3D 구현에 관여하는 외부 라이브러리들 중 꼭 필요한 부분만 살펴봅니다.
• 분석 범위 제한:
  모든 외부 모듈까지 깊게 파고들 필요는 없고, bar3D 커스터마이징과 직결되는 부분(예: Geometry 처리, 시리즈 옵션, 레이아웃 계산)에 집중합니다.

5. 점진적 분석과 수정 전략 수립

• 단계별 분석:
  각 모듈(예, Bar3DSeries, Bars3DGeometry, LayerGL 등)을 한 번에 전부 이해하기보다는, 먼저 전체 플로우를 이해한 후, 필요한 부분만 집중적으로 분석합니다.
• 디버깅 툴 활용:
  개발자 도구, 로그 출력, 소스 코드 읽기 등을 활용해 실제 데이터 흐름과 렌더링 결과를 확인합니다.
• 커스터마이징 포인트 파악:
  기존 bar3D가 어떤 방식으로 정육면체 바를 생성하는지 파악한 후, cone3D를 만들기 위한 변환 포인트(예, Geometry의 버텍스 생성, 색상/쉐이딩 처리 등)를 찾아내어 수정할 부분을 결정합니다.

6. 문서 및 커뮤니티 자료 활용

• 공식 문서 및 예제:
  ECharts와 echarts-gl의 공식 문서, GitHub 리드미, 코드 주석 등 참고.
• 오픈 소스 커뮤니티:
  유사한 커스터마이징 사례나 문제를 해결한 개발자들의 토론을 찾아보고, 경험을 참고합니다.

요약

• 전체 흐름 파악: 초기화, 옵션 적용, 렌더링 라이프사이클을 이해합니다.
• 관심 영역 집중: bar3D와 관련된 시리즈 모델, 레이아웃, Geometry 등을 집중 분석합니다.
• 의존성 최소 분석: 필요한 외부 모듈만 확인하여 불필요한 범위를 줄입니다.
• 점진적 접근: 단계별로 분석 후, cone3D 커스터마이징을 위한 수정 포인트를 선정합니다.

이와 같이 단계별로 접근하면, 라이브러리 전체를 이해하지 않고도 bar3D 관련 로직을 상세하게 분석할 수 있으며, 이후 cone3D로 변환하는 데 필요한 수정 사항을 명확하게 파악할 수 있습니다.