[import-visualizer] 1. 프로젝트 시작 (요구사항 분석)

추상 구문 트리 (AST)란?

추상 구문 트리 (AST)란?

위의 글에서 AST란 무엇이며 어떻게 사용 중이며 어떻게 응용할 수 있을지에 대해 다뤘다.

 

AST를 응용하면서 어떤 것을 만들 수 있을지 고민하다가 저번부터 만들고 싶었던 프로젝트 구조를 트리로 볼 수 있는 라이브러리를 만들어 보기로 했다.

 

이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.

들어가며

처음에는 AST를 활용하여 React Component들의 계층도를 만드는 라이브러리를 만들고 싶었다.

 

하지만, React에 종속적인 라이브러리가 될 것 같기에 더 범용성 있는 방향으로 개발하고자 하였다.

 

사실 우리가 주로 사용하는 React에서 컴포넌트의 계층을 나타낸다는 것이 결국 다른 컴포넌트를 import해서 컴포넌트에 삽입하는 것을 보여주는 것이 된다.

 

여기서 import를 사용해야 하는데(ESM 기준) React에서 한 걸음 뒤로 물러서서 보면 다른 ESM 방식의 프로젝트에도 적용할 수 있을 것이라 생각했다.

Why AST?

처음 시작은 AST를 응용하기 위한 프로젝트에서 시작했다.

 

물론 나중에는 배보다 배꼽이 더 커진 기분이 들지만 AST에 대해 학습하며 문자열과 실제 코드를 구분할 수 있게 되었고 이는 파일 내용을 텍스트로 가져와 직접 정규식 등으로 가져오지 않아도 됨을 의미한다.

 

다시 말하자면 import라는 단어가 있을때 이것이 실제 모듈을 import하기 위해 존재하는 것인지, 변수 이름이 import인지 주석으로 import에 대해 설명하고 있는지 구분하기 위해서는 AST를 활용하는 방안이 적절하다고 판단했다.

요구사항 및 생각 해볼 점

이 라이브러리의 요구사항은 크게 다음과 같이 분류할 수 있다.

• AST를 구성하여 import 문을 분석 및 가져오기
• root 파일을 설정할 수 있음
• root 파일의 내용에 대해 import를 가져오고 가져온 import를 토대로 해당 파일에 접근하는 방식을 반복하여(재귀적으로) import에 대한 정보를 가져옴
• 원하는 디렉토리에 있는 파일만 포함하는 기능이 포함
• 트리 구조를 형성
• 시각화
• 라이브러리로 배포

여기서 생각 해볼 점은 다음과 같다.

• 특정 파일이 여러 곳에서 import 되는 경우는?
• index로 부터 시작되는 모든 파일에 대한 트리 구조를 어떻게 구성하는가?

다른 라이브러리에서는 특정 파일이 여러 곳에서 import 되는 경우 하나의 Node를 생성하게 되고 이 Node로 부터 import 하고 있는 파일간의 관계를 보여준다.

 

Node를 하나만 만들기에 내가 원하는 트리 구조로 계층을 나타내기에는 어렵다.

(마인드맵 형태에 가까운 결과가 나오게 됨)

 

따라서, 이를 해결하고자 여러 곳에서 import 되는 경우도 서로 다른 파일로 간주하고 Top-Down 방식의 트리로 나타낼 수 있도록 구성할 것이다.

 

다음으로 트리 구조를 구성하기 위해서는 재귀함수 방식을 채택하였다.

 

트리를 반복적으로 구성하면서 각 자식에 대해 leaf 까지 같은 작업을 반복하기에 재귀함수가 적절한 방법이 될 것이라 판단했다.

프로젝트 구성

처음에는 프로젝트는 JS로 구성했다.

 

빌드 등을 신경쓰지 않고 일반적인 Node.js에서 사용하기 가장 쉬운 VanillaJS로 구성했다.

 

cli 기반의 라이브러리가 될 것이기 때문에 /bin/index.js를 생성한 뒤 아래와 같이 코드를 작성하여 잘 실행되는지 확인할 수 있도록 한다.

#!/usr/bin/env node

console.log('test');

npm link

npm link를 사용해 이 라이브러리를 다른 로컬 라이브러리에서 쉽게 테스트 할 수 있도록 한다.

 

npm link를 입력했다면 다른 프로젝트에서는 npm link import-visualizer를 입력하여 현재 개발중인 라이브러리와 link 시킬 수 있다.

 

visualizer에서 업데이트가 있다면 즉시 다른 프로젝트에도 반영되기에 로컬에서 라이브러리를 테스트 할 수 있는 좋은 방법이다.

"scripts": {
  "asd": "import-visualizer",
}

link된 프로젝트에서는 위와 같이 일반 라이브러리를 다루듯이 사용할 수 있다.

 

이제 라이브러리를 만들면서 실제 사용 테스트까지 해볼 수 있는 환경이 갖춰졌다.

---

[참고자료]

vite-bundle-visualizer - npm (npmjs.com)

rollup-plugin-visualizer - npm (npmjs.com)