[import-visualizer] 4. 시각화

이제 라이브러리의 핵심 기능인 시각화에 대해 고려해야 한다.

 

시각화를 하기 위한 다양한 라이브러리가 있다.

(물론 직접 만들 수도 있을 것이다)

 

이 프로젝트에서 요구하는 것은 다이어그램 또는 계층도를 나타내는 기능을 갖고 있어야 한다.

라이브러리 선정

React D3 Tree (bkrem.github.io)

React D3 Tree

d3.js에서 원하는 형태를 구현할 수 있는 도구가 있는 것을 확인했다.

 

따라서, 방금까지 얻은 데이터들을 D3에서 사용할 수 있는 형태로 만들어줘야 한다.

 

재귀적으로 각 파일들을 탐색하여 D3에서 사용할 수 있는 트리 구조를 만들어야 한다.

 

또한, D3의 트리 구조를 수정하여 레이아웃을 만들 수 있는 npm 라이브러리가 있으므로 이 라이브러리를 활용할 수 있도록 데이터를 맞춰야 한다.

react-d3-tree - npm (npmjs.com)

react-d3-tree

interface RawNodeDatum {
  name: string;
  attributes?: Record<string, string | number | boolean>;
  children?: RawNodeDatum[];
}

이 라이브러리에서 요구하는 node의 구조는 위와 같다.

 

name에 파일 이름을 설정하고 children에 imports 목록을 넣는다면 의도한 대로 내용을 구현할 수 있을 것으로 보인다.

 

react-d3-tree의 경우 React 기반의 라이브러리다.

 

이는 결국 이 프로젝트에서 리액트가 필요함을 의미한다.

 

이 프로젝트에 불필요한 리액트를 추가하기 보다는 CDN을 활용하여 리액트 코드를 받아오는 것을 목표로 했다.

(새로운 의존성을 추가하지 않고 단순히 트리를 렌더링 하는 것이 목표이므로)

 

트리를 나타내는 HTML 파일을 만들고 open이라는 라이브러리를 활용하여 이 파일을 열어서 보여줄 것이다.

open - npm (npmjs.com)

open

문제: NodeJS 환경에서 HTML을 만드는 방법

CDN 방식을 사용하기로 했지만 리액트를 렌더링 할 수 있을 뿐이며 데이터를 채워넣을 마땅한 방법이 없었다.

 

CDN을 통해 받아올 수 있는 것은 리액트의 구동에 필요한 코드기 때문이다.

 

이를 해결하기 위해 HTML 안에 라이브러리의 함수들을 넣어두고 렌더링 되는 과정에 동적으로 컨텐츠를 채워넣는 방법과 HTML에 들어갈 데이터를 채워두고 렌더링만 하는 방법이 있다.

 

다른 라이브러리를 참고하여 어떻게 이 문제를 해결했는지 참고했다.

 

참고한 라이브러리는 rollup-plugin-visualizer이며 rollup에서는 HTML 템플릿을 만들어두고 데이터를 채운 뒤 HTML 파일로 저장할 수 있도록 구성되어 있었다.

rollup-plugin-visualizer/plugin/render-template.ts at master · btd/rollup-plugin-visualizer (github.com)

rollup-plugin-visualizer/plugin/render-template.ts at master · btd/rollup-plugin-visualizer

결과적으로 최종적인 흐름은 다음과 같다.

1. cli 기반으로 트리 구조를 만들게 된다
2. HTML을 만들게 된다
3. HTML을 파일로 저장한다
4. open 라이브러리를 이용하여 브라우저에 표시할 수 있도록 한다

여기서 CDN을 사용하기 위해 jsdelivr에서 react-d3-tree를 검색하니 결과가 있었다.

react-d3-tree CDN by jsDelivr - A CDN for npm and GitHub

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

React, jsdelivr를 활용한다면 html을 구성하여 내보낼 수 있을 것으로 판단했다.

 

data는 cli 기반으로 데이터를 만들어 템플릿 리터럴로 넣을 수 있을 것으로 판단했다.

문제: open 라이브러리 경로 문제

open을 사용하여 파일을 여는 과정에서 경로와 관련된 문제가 발생했다.

 

나는 이 프로젝트에서 화면에 보여줄 HTML 파일이 남는 것을 원하지 않았다.

(최대한 깔끔하게 흔적을 남기고 싶지 않은 개인적 욕심)

 

또한, 이 라이브러리를 사용하는 곳의 경로에 HTML이 있어야 파일을 찾을 수 있는 문제가 있다.

 

다시 한 번 말하면 import-visualizer에서 open 라이브러리를 사용하고 있으며 open 라이브러리의 두 번째 인자에 상대 경로를 넣게 되면 import-visualizer를 설치한 프로젝트를 기준으로 경로를 탐색하게 되는 문제가 있다.

 

이를 해결하기 위해서는 설치된 import-visualizer를 기준으로 경로를 계산할 수 있어야 한다.

(import-visualizer를 설치한 프로젝트 기준이 아니라)

 

Process | Node.js v22.3.0 Documentation (nodejs.org)

Process | Node.js v22.3.0 Documentation

다시 한 번 process.argv의 내용을 보면 두 번째 인자는 실행되고 있는 파일 정보를 제공하고 있다.

 

이를 활용하면 import-visualizer가 실행되고 있는 bin/index.js의 경로를 가져올 수 있을 것으로 판단했다.

 

resolve와 상대 경로를 이용하여 라이브러리의 index.html 경로를 찾을 수 있도록 했다.

await open(resolve(process.argv[1], '../../index.html'));