The subdocument of

Runtime

• Node
• 가장 널리 사용되는 JavaScript 런타임으로, 서버 측에서 JavaScript를 실행할 수 있도록 해줍니다.
  V8 엔진을 사용하며, 서버 사이드 애플리케이션 개발에 많이 사용됩니다.
• Bun
• 고속 JavaScript 런타임으로, JavaScript 및 TypeScript를 실행하는 데 특화되어 있습니다.
  JavaScript 번들링과 테스팅 도구가 내장되어 있어, 성능을 높이고 개발 경험을 개선합니다.
• Deno
• Node.js의 창시자 Ryan Dahl이 만든 현대적인 JavaScript/TypeScript 런타임입니다.
  V8 엔진을 사용하며, 내장 TypeScript 지원과 더 엄격한 보안 모델을 제공합니다.
• QuickJS
• 가벼운 JavaScript 엔진으로, 서버 및 임베디드 시스템에 적합합니다.
  크기가 작고 매우 빠른 초기화를 제공하여, 메모리 제약이 큰 환경에서 자주 사용됩니다.
• Web Browsers (Chrome, Firefox, Safari, Edge 등)
• 각 브라우저에 내장된 JavaScript 엔진(V8, SpiderMonkey, JavaScriptCore 등)으로 웹 애플리케이션을 실행합니다.
  클라이언트 측에서 JavaScript를 실행하는 기본 런타임 환경입니다.

Package Manger

• (Node Package Manager)
• Node.js의 기본 패키지 매니저로, 가장 널리 사용되는 JavaScript 패키지 매니저입니다.
  npm 레지스트리를 사용하여 다양한 오픈소스 라이브러리와 도구들을 관리하고 배포할 수 있습니다.
• Yarn
• Facebook에서 개발한 패키지 매니저로, npm보다 빠른 속도와 더 나은 안정성을 제공하는 것이 목적입니다.
  캐시 기능과 병렬 설치 방식으로 더 빠르게 패키지를 설치할 수 있습니다.
• pnpm
• 디스크 공간 효율성을 목표로 한 패키지 매니저로, 동일한 패키지를 여러 프로젝트에서 사용할 때 저장 공간을 절약합니다.
  node_modules 폴더의 중복을 최소화하여 속도와 성능을 향상시킵니다.
• Bun’s Package Manager
• Bun 런타임에 내장된 패키지 매니저로, 설치 속도가 매우 빠릅니다.
  번들링과 테스트 도구가 내장되어 있어 개발 환경을 간소화합니다.
• jspm
• JavaScript 패키지를 ESM(ECMAScript Modules) 형태로 제공하는 패키지 매니저로, 웹 애플리케이션에서 바로 사용할 수 있습니다.
  일반적으로 import 구문을 통해 패키지를 직접 로드할 수 있도록 설계되어 있습니다.

Testing Tools

Framework 종속적인 Unit Testing Tool

• vitest for vite
• jest for React

E2E Testing Tool

• Cypress: 빠르고 사용자 친화적인 웹 애플리케이션 테스트 도구로, JavaScript 중심 프로젝트에 적합.
• Nightwatch: Selenium 기반의 테스트 프레임워크로, 기존 Selenium 테스트 환경을 사용하는 경우 적합.
• Playwright: 여러 브라우저를 지원하며, 고급 웹 애플리케이션 테스트에 유리한 최신 도구.
• Puppeteer: Chromium 기반 브라우저 자동화에 특화된 도구로, 웹 스크래핑에 적합.
• Selenium: 다양한 브라우저와 언어를 지원하는 전통적인 도구로, 대규모 테스트 환경에 유리.
• TestCafe: 간편한 설정과 다양한 브라우저 지원을 제공하는 도구로, 빠른 테스트 환경 구축에 적합.

Build Tools

Module Bundler

• webpack
• 모듈 번들러로, JavaScript 파일뿐만 아니라 CSS, 이미지 등 다양한 파일을 하나의 번들로 묶어줍니다.
  코드 분할, 트리 셰이킹(tree shaking), 로더(loader)와 플러그인(plugin) 시스템이 강력하여 복잡한 애플리케이션에 적합합니다.
  환경설정이 유연하고 강력하지만 설정이 다소 복잡할 수 있습니다.
• vite
• Vue.js의 창시자 Evan You가 만든 빌드 도구로, 기본적으로 esbuild를 활용하여 빠른 빌드 속도를 제공합니다.
  개발 중 HMR을 활용해 빠른 반응성을 제공하며, ESM을 사용하여 브라우저에서 모듈을 바로 로드합니다.
  Vue, React, Svelte 등 다양한 프레임워크와의 호환성이 뛰어나고, 빠른 개발 환경 설정에 적합합니다.
• bun
• 번들링, 테스트, 패키지 관리까지 모두 지원하는 올인원 도구입니다.
  JavaScript와 TypeScript 코드를 매우 빠르게 빌드할 수 있으며, 런타임과 패키지 매니저 기능이 내장되어 있습니다.
  성능 최적화와 사용성 개선을 목표로 하며, 특히 빠른 빌드와 번들링이 요구되는 프로젝트에 유리합니다.
• rollup
• ES6 모듈을 중심으로 설계된 번들러로, 간단한 설정으로 모듈을 최적화하고 번들링할 수 있습니다.
  트리 셰이킹이 뛰어나, 코드가 최적화된 결과물을 얻기 쉽습니다.
  라이브러리나 모듈 개발에 자주 사용되며, 번들 크기를 줄이고 성능을 높이기에 유리합니다.
• esbuild
• 매우 빠른 빌드 속도를 제공하는 JavaScript 빌드 도구로, Go 언어로 작성되어 있습니다.
  번들링뿐만 아니라 트랜스파일링도 지원하며, 기본적인 번들링 작업을 극히 짧은 시간 안에 수행합니다.
  코드 분할과 트리 셰이킹을 지원하며, 프로젝트의 빌드 시간을 줄이려는 경우에 유용합니다.
• rsbuild
• Rspack을 사용해 기본 설정을 제공하고, 더 간단한 개발 환경을 제공합니다. 기본적인 설정이 포함되어 있으며, React, Vue, Svelte 등 다양한 프레임워크를 지원합니다. Rsbuild는 핫 모듈 교체(HMR) 및 최적화 기능을 제공해 사용자 경험을 개선합니다.
• rspack
• Rust로 작성된 고성능 JavaScript 번들러로, Webpack과 유사한 설정과 플러그인 호환성을 제공하며 유연한 구성이 가능합니다.
• parcel
• 제로 설정 빌드 도구로, 빠른 개발 환경을 제공하며 사용이 매우 간단합니다.
  파일 유형에 따라 자동으로 빌드 설정을 해 주어 초기 설정을 간소화할 수 있습니다.
  HMR(Hot Module Replacement)을 지원하여 개발 중 빠르게 결과를 확인할 수 있어, 빠른 프로토타이핑에 유리합니다.

Module Bundler가 아닌 빌드도구

• Snowpack
• 번들링 없이 ESM(ECMAScript Modules)을 활용하여 개발하는 빌드 도구로, 코드 변경 시 파일만 즉각적으로 빌드합니다.
  빠른 초기 로딩 속도와 즉각적인 업데이트가 가능하여 빠른 피드백을 제공합니다.
  프로젝트 초기 단계나 특정한 파일 구조를 사용할 때 유리하지만, 현재는 Vite가 더 많이 사용되고 있습니다.

Compiler

• babel
• swc
• tsc for

ETC

Grammar Extends

• jsx

  – required react
  – optional vue extends vnode

Code Management

• ESLint
• Prettier

CSS Management

• purecss
• openprops
• unocss