프론트엔드 인프라

번들러, 트랜스파일러, 린터, 패키지 매니저, 모노레포, CI/CD, 도구의 내부를 열어보고 진화의 맥락을 이해합니다

1. 01

   번들러는 왜 필요한가

   import를 브라우저가 이해할 수 없던 시절부터 ESM 네이티브까지, 번들러의 존재 이유를 시각화합니다

2. 02

   Webpack에서 Vite로

   Webpack이 느린 이유와 Vite가 빠른 이유, 두 번들러의 내부 동작을 비교합니다

3. 03

   트랜스파일러와 컴파일러

   Babel → SWC → esbuild, 왜 Rust/Go로 갈아탔는가, 트랜스파일러의 내부 동작과 진화를 시각화합니다

4. 04

   린터와 포매터

   ESLint는 코드를 어떻게 분석하는가? Prettier와 왜 분리하는가? AST 기반 분석의 내부를 시각화합니다

5. 05

   패키지 매니저

   npm, yarn, pnpm은 node_modules를 어떻게 다루는가, 호이스팅, 팬텀 의존성, symlink 전략을 시각화합니다

6. 06

   모노레포

   왜 하나의 저장소에 여러 패키지를 넣는가, Turborepo, Nx의 태스크 캐싱과 의존성 그래프를 시각화합니다

7. 07

   CI/CD 파이프라인

   커밋부터 배포까지, lint, type-check, test, build, deploy 파이프라인의 각 단계를 시각화합니다