개발/개발과정

[import-visualizer] 9. 상대경로 문제와 스택 오버플로우

이때 발생한 문제점으로 상대 경로를 제대로 읽을 수 없다는 것과 스택 오버플로우 문제가 발생했다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.상대경로import './style.css';import typescriptLogo from './typescript.svg';import viteLogo from '/vite.svg';import { setupCounter } from '../counter';import { test } from './test.ts';이렇게 생긴 경우 ../counter를 가져올 수 없는 문제가 발생했다. 기존의 함수에서는 ../과 같은 상대 경로를 고려하지 않았다. 기존 방식의 전체적인 수정..

[import-visualizer] 8. tsc의 한계 및 배포

tsc를 활용하려 했지만 tsc의 한계를 만났다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.tsc의 한계#!/usr/bin/env nodeimport open from 'open';import { resolve } from 'path';import { unlink } from 'fs/promises';import { cliConfig } from '../plugin/cliConfig';import { getConfigFile } from '../plugin/getConfigFile';import { FileTree } from '../plugin/FileTree';import { generateTemplate } ..

[import-visualizer] 7. 번들링(빌드)

다음 고민으로 번들링을 수행할지 안할지 결정하는 것이었다. 처음 JS로 작업한 이유는 빌드를 고려하지 않았기 때문이다. improt-visualizer라는 이름에 맞게 esm에서만 사용할 수 있도록 하는 것이 목표였기 때문에 cjs 방식을 고려할 필요가 없었기 때문이다.(나중에 require-visualizer도?) 지금 이대로 배포해도 문제가 없지만 연습삼아 하는 것 + TS가 없으니 리책토링 엄두가 안남의 이유로 TS를 도입하기로 결정했다.(리팩토링 과정에서 TS의 장점을 최대한 살리기 위해) 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.TSC(TypeScript로 변환하는 과정은 생략) 이 프로젝트에서 빌드는 2..

[import-visualizer] 6. 트리 생성

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