전체 글

[import-visualizer] 10. 개발 회고

최종 배포 주소는 아래와 같다.import-visualizer - npm (npmjs.com) import-visualizerimport-visualizer. Latest version: 0.1.1, last published: 2 days ago. Start using import-visualizer in your project by running `npm i import-visualizer`. There are no other projects in the npm registry using import-visualizer.www.npmjs.comHBSPS/import-visualizer: A library that allows you to visualize the hierarchy of imports ..

[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..