Node.js의 Vite와 Deno
Node.js는 가장 오래되고 널리 사용되는 런타임이며, Vite는 Node.js 기반의 개발 서버이자 빌드 도구입니다. Deno는 Node.js의 창시자인 라이언 달이 만든 새로운 런타임으로, 보안과 현대적인 표준을 강조합니다. Vite와 Deno는 현재 호환되지 않습니다. Vite는 Node.js에 의존하는 많은 패키지들을 사용하고 있으며, Deno는 Node.js와 다른 모듈 시스템과 API를 가지고 있습니다. 하지만 앞으로 Deno가 npm 패키지들을 지원하게 되면, Vite와 Deno가 함께 작동할 수 있도록 하는 프로젝트들이 진행 중입니다.
References
(1) [Deno] Node.js의 대안!! Deno 알아보기 - Dev. DY (2) "데노 vs. Node.js" JS 런타임 선택 가이드 - ITWorld Korea (3) Vite can support deno runtime? · Issue #109 · vitejs/vite · GitHub (4) vite and deno: an experiment - DEV Community (5) Support Vite · Issue #15427 · denoland/deno · GitHub (6) deno와 node.js 비교 | Swtpumpkin Blog
주목받는 자바스크립트 런타임 환경
자바스크립트 런타임 환경은 자바스크립트 코드를 실행할 수 있는 환경을 말합니다. 브라우저 역시 자바스크립트 런타임 환경 중 하나입니다.
- React Native: React Native는 모바일 앱 개발을 위한 자바스크립트 런타임 환경입니다. React Native는 네이티브 모듈과 통신하면서 자바스크립트 코드를 실행합니다. React Native의 장점은 웹 개발자가 쉽게 모바일 앱을 만들 수 있다는 것이고, 단점은 성능이나 디버깅이 어렵다는 것입니다.
- Electron: Electron은 데스크톱 애플리케이션 개발을 위한 자바스크립트 런타임 환경입니다. Electron은 Node.js 와 Chromium을 결합하여 웹 기술로 데스크톱 애플리케이션을 만들 수 있게 합니다. Electron의 장점은 크로스 플랫폼 개발이 쉽다는 것이고, 단점은 메모리 사용량이 많다는 것입니다.
- QuickJS: QuickJS는 가볍고 임베디드 시스템에 적합한 자바스크립트 엔진입니다. QuickJS는 C 언어로 작성되었으며, ES2020 표준을 지원합니다. QuickJS의 장점은 속도가 빠르고 메모리 사용량이 적다는 것이고, 단점은 아직 안정성이나 호환성이 부족하다는 것입니다.
- Duktape: Duktape는 C 언어로 작성된 임베디드 자바스크립트 엔진입니다. Duktape는 ES5 표준을 지원하며, ES6의 일부 기능도 사용할 수 있습니다. Duktape의 장점은 메모리 사용량이 적고 소스 코드가 작다는 것이고, 단점은 성능이나 호환성이 낮다는 것입니다.
- GraalVM: GraalVM은 자바스크립트를 비롯한 여러 언어를 실행할 수 있는 고성능 런타임 환경입니다. GraalVM은 JIT 컴파일러와 폴리글랏 엔진을 통해 다양한 언어 간의 상호 운용성과 최적화를 제공합니다. GraalVM의 장점은 속도가 빠르고 유연하다는 것이고, 단점은 설치나 설정이 복잡하다는 것입니다.
- Rhino: Rhino는 자바로 작성된 자바스크립트 엔진입니다. Rhino는 자바와 자바스크립트 간의 통합을 쉽게 할 수 있게 해줍니다. Rhino의 장점은 자바와 호환되고 안정적이라는 것이고, 단점은 성능이나 메모리 사용량이 높다는 것입니다.
References
(1) "데노 vs. Node.js" JS 런타임 선택 가이드 - ITWorld Korea (2) [JavaScript] 자바스크립트 런타임 | Beomy (3) JavaScript 기반 라이브러리, 프레임워크 비교 (4) [JavaScript] 자바스크립트 런타임 | Beomy (5) 런타임 환경 (6) Windows에서 Java 런타임 설정 업데이트
Vite와 Deno
Vite는 자바스크립트 빌드 도구이고, Deno는 자바스크립트 런타임 환경입니다. Vite는 웹팩과 같은 번들러를 대체하는 빌드 도구입니다. Vite는 ES 모듈을 기반으로 하여 개발 서버와 프로덕션 빌드를 제공합니다. Vite의 장점은 속도가 빠르고 설정이 쉽다는 것이고, 단점은 호환성이나 안정성이 낮다는 것입니다. Deno는 Node.js와 유사한 자바스크립트와 타입스크립트를 위한 런타임 환경입니다. Deno는 보안과 표준을 중시하며, URL을 통해 모듈을 가져올 수 있습니다. Deno의 장점은 보안이 강하고 타입스크립트를 지원한다는 것이고, 단점은 생태계가 작고 호환성이 낮다는 것입니다.
References
(1) 차세대 빌드 도구 비교 | TOAST UI :: Make Your Web Delicious! (2) vite and deno: an experiment - DEV Community (3) [Deno] Node.js의 대안!! Deno 알아보기 - Dev. DY
자바스크립트 빌드 도구
자바스크립트 빌드 도구에는 웹팩, 롤업, 스노우팩, Vite 등이 있습니다. 웹팩은 가장 널리 사용되는 빌드 도구로, 모듈 번들러라고도 합니다. 웹팩은 자바스크립트뿐만 아니라 HTML, CSS, 이미지 등의 리소스도 모듈로 취급하여 의존성을 분석하고 하나의 파일로 번들링합니다. 웹팩의 장점은 다양한 플러그인과 로더를 통해 많은 기능을 제공한다는 것이고, 단점은 설정이 복잡하고 느리다는 것입니다. 롤업은 웹팩과 유사한 모듈 번들러입니다. 롤업은 ES 모듈을 기준으로 하여 트리 쉐이킹과 코드 스플리팅을 지원합니다. 롤업의 장점은 ES 모듈을 최적화하여 작고 효율적인 번들을 생성한다는 것이고, 단점은 웹팩보다 지원하는 기능이 적다는 것입니다. 스노우팩과 Vite는 ES 모듈을 기반으로 한 차세대 빌드 도구입니다. 스노우팩과 Vite는 개발 서버와 프로덕션 빌드를 제공합니다. 스노우팩과 Vite의 장점은 속도가 빠르고 설정이 쉽다는 것이고, 단점은 호환성이나 안정성이 낮다는 것입니다.
References
(1) 자바스크립트 개발 도구와 테스트-3 :: JS 탐구생활 (2) [learning javascript] chapter 2. 자바스크립트 개발 도구 (3) 차세대 빌드 도구 비교 | TOAST UI :: Make Your Web Delicious!
웹팩 빌드 도구를 베이스로 하는 프레임워크는 Nuxt.js와 Next.js 등이 있습니다. 이들은 웹팩을 사용하여 서버 측 렌더링을 지원하는 메타 프레임워크입니다. 바벨은 웹팩과 별개의 도구로, 자바스크립트 코드를 변환해주는 컴파일러입니다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있도록 호환성을 보장해줍니다. 웹팩은 바벨을 로더로 사용하여 모듈 번들링 과정에서 코드 변환을 수행할 수 있습니다.
References
(1) 차세대 빌드 도구 비교 | TOAST UI :: Make Your Web Delicious! (2) 웹팩과 바벨 무엇이 다른가. 리액트에서는 뭘 써야 할까? · Tonic (3) Webpack과 Babel을 이용한 React 개발 환경 구성하기 | Berkbach (4) [나만의 웹팩 만들기] 2. babel 추가하기 | hoilzz (5) Webpack이란 무엇인가? 정의와 필요성, 그리고 장단점 | 하늘네트 (6) 2022년 웹 개발을 위한 상위 10가지 최고의 웹 백엔드 프레임워크 ...
Parcel 번들러
Parcel도 웹팩과 비슷한 번들러입니다. Parcel은 웹팩보다 설정이 간단하고 빠른 번들링 속도를 자랑합니다. 하지만 웹팩보다는 기능이 적고 커스터마이징이 어렵습니다. 웹팩 대체 번들러로는 Vite, Rollup, Snowpack 등이 있습니다. 이들은 모두 웹팩보다 더 빠르고 간편하게 번들링을 할 수 있다고 주장합니다. 하지만 각각 장단점이 있으므로 프로젝트의 목적과 요구사항에 따라 적절한 번들러를 선택하는 것이 중요합니다.
References
(1) Parcel 한국어판 (2) 🚀 시작하기 (3) 리액트 프로젝트 초기 설정 - CRA vs Vite (4) Parcel로 빠르게 프로젝트 시작하기 (5) Webpack : 웹팩 찍먹하기 (+ module, bundler, loader) (6) (Webpack) 웹팩 - 모듈 번들러와 로더 | Let's Sunny
웹팩이 모듈화할 수 있는 리소스
웹팩은 모듈 번들러로서, 자바스크립트 파일뿐만 아니라 CSS, HTML, 이미지, 폰트 등의 리소스 파일도 모듈로 취급합니다. 이렇게 하면 각 리소스 파일을 재사용하고 의존성 관리를 할 수 있습니다.
- ECMAScript 모듈
- CommonJS 모듈
- AMD 모듈
- Assets (CSS, HTML, 이미지, 폰트 등)
- WebAssembly 모듈
그 밖에도 웹팩은 로더를 통해 다양한 언어와 전처리기로 작성된 모듈을 지원합니다. 예를 들어 TypeScript, Sass, Babel 등의 로더가 있습니다.
References
(1) JavaScript | Webpack 기초 정리 :: Pathas' Path as Web Developer (2) [스터디 with 실전 리액트 프로그래밍] 17편 - 웹팩 (3) Module | 웹팩 (4) Modules | 웹팩 (5) Webpack : 웹팩 찍먹하기 (+ module, bundler, loader)
웹팩의 로더와 플러그인은 다음과 같이 차이점이 있습니다.
- 로더는 파일을 해석하고 변환하는 과정에 관여합니다. 예를 들어 CSS 파일을 자바스크립트로 변환하거나 TypeScript를 자바스크립트로 컴파일하는 등의 작업을 수행합니다.
- 플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공합니다. 예를 들어 번들된 결과물을 난독화하거나 특정 텍스트를 추출하는 등의 작업을 수행합니다. 로더는 모듈 규칙(module.rules) 속성에 배열 형태로 설정하고, 플러그인은 플러그인(plugins) 속성에 배열 형태로 설정합니다.
References
(2) [javascript] Webpack 로더 대 플러그인; 차이점이 뭐야? - 리뷰나라 (3) 플러그인 - 웹팩(Webpack) 기본편 | 김정환 :: Interactive Developer (4) Plugin | 웹팩 핸드북 (5) javascript — 웹팩 로더와 플러그인; 차이점이 뭐야? (6) [TIL]Webpack과 인사하기 - 웹팩 기본 사용법, 모드/로더/아웃풋
웹팩의 모드와 환경변수는 다음과 같이 설명할 수 있습니다.
- 웹팩의 모드는 웹팩의 동작 방식을 결정하는 옵션입니다. development, production, none 중 하나를 선택할 수 있습니다. 각 모드에 따라 웹팩은 내부적으로 최적화를 수행하거나 소스맵을 생성하거나 프로세스 환경 변수를 설정합니다.
- 웹팩의 환경변수는 웹팩이 실행되는 노드 환경에서 사용할 수 있는 변수입니다. 예를 들어 dotenv 모듈을 사용하여 .env 파일에 저장된 변수들을 불러올 수 있습니다. 또한 webpack.DefinePlugin을 사용하여 전역 변수로 등록하여 코드 내에서 구분할 수 있게 할 수 있습니다.
References
(1) Concepts | 웹팩 (2) [Webpack] Webpack과 환경변수 (3) Webpack Dev Server를 이용한 개발 환경 구성 Part1 (4) dotenv를 사용한 NodeJS 환경변수 설정과 Webpack 번들로 환경변수 ...
웹팩의 엔트리와 아웃풋
- 엔트리는 웹팩이 모듈을 해석하고 번들링하는 시작점입니다. 엔트리에 지정된 파일부터 의존하는 모듈들을 찾아내어 하나의 결과물로 만듭니다. 엔트리는 entry 속성에 문자열이나 배열이나 객체로 설정할 수 있습니다.
- 아웃풋은 웹팩이 번들링한 결과물을 저장할 위치와 파일명을 지정하는 옵션입니다. 아웃풋은 output 속성에 객체로 설정하며, path와 filename 속성은 필수입니다. path는 절대경로를 사용해야 하고, filename은 [name], [hash], [chunkhash] 등의 키워드를 사용할 수 있습니다.
References
(1) 프론트엔드 개발환경의 이해: 웹팩(기본) | 김정환 블로그 (2) 프론트엔드 개발환경: 웹팩
일반적으로 많이 사용되는 웹팩 플러그인과 로더
- 플러그인
- HtmlWebpackPlugin: HTML 파일을 생성하고 번들링된 스크립트를 자동으로 삽입해주는 플러그인입니다. - MiniCssExtractPlugin: CSS 파일을 별도로 추출하고 HTML 파일에 링크하는 플러그인입니다. - CleanWebpackPlugin: 빌드 전에 output 폴더를 자동으로 삭제해주는 플러그인입니다. - OptimizeCssAssetsWebpackPlugin: CSS 파일을 최적화하고 압축하는 플러그인입니다. - TerserWebpackPlugin: JS 파일을 최적화하고 압축하는 플러그인입니다.
- 로더
- babel-loader: 바벨을 사용하여 JS 파일을 변환하는 로더입니다. - css-loader: CSS 파일을 모듈로 인식할 수 있게 해주는 로더입니다. - style-loader: CSS 파일을 동적으로 스타일 태그로 삽입해주는 로더입니다. - file-loader: 이미지나 폰트 등의 파일을 모듈로 인식할 수 있게 해주는 로더입니다. - url-loader: 작은 크기의 이미지나 폰트 등의 파일을 base64로 인코딩하여 JS나 CSS에 내장시켜주는 로더입니다.
References
(1) 웹팩 설정하기 - 플러그인 (2) Webpack : 웹팩 찍먹하기 (+ module, bundler, loader) (3) 최고의 10가지 워드프레스 플러그인 추천 (2020) | 옵티머 (4) (Webpack) 웹팩 - 모듈 번들러와 로더 | Let's Sunny (5) 사용중인 VSCode(Visual Studio Code) 확장 플러그인 목록 (6) Loaders | 웹팩
웹팩의 설정 방법
- 웹팩을 설치하기 위해서는 npm을 이용해야 합니다. npm은 Node.js를 설치하면 함께 설치됩니다.
- 웹팩과 웹팩 CLI 패키지를 설치합니다. CLI는 커맨드 라인 인터페이스로, 터미널에서 웹팩 명령어를 사용할 수 있게 해줍니다.
- 웹팩에서 기본적으로 인식하는 설정 파일 이름은 webpack.config.js입니다. 이 파일을 프로젝트 루트 폴더에 생성합니다.
- 설정 파일에는 mode, entry, output, module, plugins 등의 속성을 정의할 수 있습니다. - mode: 개발 모드(development)와 배포 모드(production)를 구분하여 최적화 옵션을 적용할 수 있습니다. - entry: 번들링할 파일의 시작점을 지정합니다. - output: 번들링된 결과물의 파일명과 경로를 지정합니다. - module: 로더를 사용하여 다양한 형식의 파일들을 모듈로 변환할 수 있습니다. rules 배열에 각각의 로더와 적용할 파일 확장자를 정의합니다. - plugins: 번들링 과정에 추가적인 기능을 제공하는 플러그인들을 사용할 수 있습니다. plugins 배열에 각각의 플러그인 객체를 생성하여 넣습니다.
References
(1) [webpack] webpack 설치부터 실행까지 (2) 웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins) (3) 웹팩(Webpack) 기본 사용법 (CLI) | Engineering Blog by Dale Seo