개발/개발과정

[import-visualizer] 6. 트리 생성

이제 모든 데이터를 다 마련했고 시각화 수단도 마련했다. 시각화를 위한 데이터를 만들기만 한다면 시각화를 할 수 있을 것으로 생각한다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.재귀함수트리의 순회, 생성에 있어서 가장 먼저 떠오른 방법이 재귀함수였다. 재귀적 특성을 보이며 자식을 따라 leaf까지 재귀적으로 작동하기 때문이다. 간단하게 재귀함수를 만들어보면 아래와 같다.import { appendExtensions } from './appendExtensions.js';import { getAllFiles } from './getAllFiles.js';import { getImportPaths } from './g..

[import-visualizer] 5. CDN의 한계

CDN 방식으로 react-d3-tree를 가져올 수 있는 방법이 없었다. esm, cjs 모두 에러가 발생하며 다른 버전을 사용해도 에러가 발생하는 것은 마찬가지였다.그냥 직접 빌드하자리액트가 필요하다면 리액트를 직접 설치해서 배포될 빌드 파일에 포함해버리면 어떨까 라는 생각을 하게 되었다.(그냥 빌드된 js만 있으면 리액트도 실행할 수 있는거 아닌가?) 리액트에 대한 의존성이 추가되지만 devDependencies에 추가 할 수 있을 것으로 판단했다. devDependencies에만 추가해도 라이브러리를 개발하는데 문제가 없고 결국 빌드된 리액트 파일이 라이브러리에서 직접 사용할 예정이기 때문이다.(사용자가 직접 빌드하거나 실행할 일은 없을 것이므로 가능) 이를 사용하기 위해서는 결국 빌드를 한 번 ..

[import-visualizer] 4. 시각화

이제 라이브러리의 핵심 기능인 시각화에 대해 고려해야 한다. 시각화를 하기 위한 다양한 라이브러리가 있다.(물론 직접 만들 수도 있을 것이다) 이 프로젝트에서 요구하는 것은 다이어그램 또는 계층도를 나타내는 기능을 갖고 있어야 한다.라이브러리 선정React D3 Tree (bkrem.github.io) React D3 Tree bkrem.github.iod3.js에서 원하는 형태를 구현할 수 있는 도구가 있는 것을 확인했다. 따라서, 방금까지 얻은 데이터들을 D3에서 사용할 수 있는 형태로 만들어줘야 한다. 재귀적으로 각 파일들을 탐색하여 D3에서 사용할 수 있는 트리 구조를 만들어야 한다. 또한, D3의 트리 구조를 수정하여 레이아웃을 만들 수 있는 npm 라이브러리가 있으므로 이 라이브러리를 활용할 ..

[import-visualizer] 3. 확장자

저번 작업을 통해 경로 별칭을 해제하고 실제 경로를 가져올 수 있었다. 여기서 문제점은 이 파일들의 확장자가 없다는 것이다.(모자이크가 심하게 되어있지만 확장자가 없다) 예를 들어 App.tsx에서 src/pages 안에 있는 Component1.tsx를 import 하는 경우 실제로는 import Component1 from src/pages/Component1이 사용된다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.확장자를 어떻게 추가할 수 있을까?확장자를 어떻게 추가할 수 있을지 고민을 많이 했던 것 같다. JS, TS, JSX, TSX에 상관없이 사용할 수 있도록 하는 것이 목표였으므로 일괄적인 확장자를 적용..