개발

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

[import-visualizer] 5. CDN의 한계

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