분류 전체보기

[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에 상관없이 사용할 수 있도록 하는 것이 목표였으므로 일괄적인 확장자를 적용..

[import-visualizer] 2. 경로별칭

이전 단계에서 프로젝트의 설정이 끝났다. 이제는 요구사항에 맞게 만들면 된다.이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.Cli 기반의 프로그램cli 기반의 프로그램을 실행할 때 아래와 같이 입력하는 경우가 많다. --option1 option1 --option2 option2Node.js에서는 위에서 option1과 같은 프로그램 실행 인자를 process를 이용해 가져올 수 있다. #!/usr/bin/env nodeconsole.log(process.argv);위와 같이 process.argv의 내용을 살펴보면 아래와 같은 결과를 확인할 수 있다.첫 번째 요소는 해당 파일을 실행하는 nodejs의 경로, 두 번째 ..

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

추상 구문 트리 (AST)란? 추상 구문 트리 (AST)란?[CS: 운영체제] 컴파일러 [CS: 운영체제] 컴파일러컴퓨터는 const a = 10;을 읽을 수 없다. 컴퓨터는 0과 1밖에 이해하지 못하기 때문이다. 나는 0과 1로만 작성된 코드를 읽을 수 없다. 나는 컴퓨터가29223.tistory.com위의 글에서 AST란 무엇이며 어떻게 사용 중이며 어떻게 응용할 수 있을지에 대해 다뤘다. AST를 응용하면서 어떤 것을 만들 수 있을지 고민하다가 저번부터 만들고 싶었던 프로젝트 구조를 트리로 볼 수 있는 라이브러리를 만들어 보기로 했다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.들어가며처음에는 AST를 활용하여..