효율, 협업, DX 등 다양한 이유로 다양한 개발 도구를 사용합니다.

은탄환은 없다 라는 말이 흔히 쓰이듯이,

프로젝트 성격에 적합한 도구를 선택해야 합니다.

태스크 러너

단어 그대로 작업 실행을 도와주는 도우미입니다.

반복적인 작업을 자동화하는데 주로 사용합니다.

Grunt와 gulp.js는 태스크 러너입니다.

스크립트를 하나로 묶고 난독화하거나, SCSS를 CSS로 컴파일하는 작업 등을 자동화하는데 사용합니다.

번들링과 다양한 기능을 한번에 제공하는 webpack, Vite등 강력한 통합 기능 번들러가 태스크 러너의 일까지 수행할 수 있게 되면서 많이 사용하지 않게 되었습니다.

모듈 번들러

브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했습니다.

번들러란 나눠진 JS 스크립트를 브라우저에서 실행할 수 있도록 하나의 스크립트로 묶어주는 툴입니다.

프론트엔드 개발이 복잡해지면서, 협업과 유지보수를 위해 파일을 나눠 개발하는 모듈화에 대한 필요성이 늘어나 번들러가 탄생했습니다.

webpack, Vite, Turbopack 등의 모던 번들러들은

스크립트 모듈화를 넘어 에셋 관리, 개발 서버와 프록시, HMR 등 다양한 기능을 포함하거나 플러그인으로 확장 가능해 번들러를 넘어 통합 개발 도구처럼 사용됩니다.

패키지 매니저

자바스크립트 생태계는 세계에서 가장 규모가 큰 오픈소스 생태계입니다. 없는 게 없죠.

이를 편하게 이용할 수 있게 도와주는 것이 패키지 매니저입니다. 의존성이나 버전 관리, 패키지 배포 등의 기능을 제공합니다.

라이브러리 사용이 필연적인 프론트엔드 개발에서, 팀 내 개발 환경 통일에도 도움이 되겠죠?

대표적으로 npm과 yarn이 있습니다. 기능은 거의 동일하며 yarn은 종속 패키지 병렬 다운로드를 지원합니다.

자바스크립트 엔진과 런타임 환경

퀴즈 정답은 Node.js - V8 입니다.

Node.js는 자바스크립트 런타임, V8은 자바스크립트 엔진입니다.

자바스크립트 엔진

말 그대로 JavaScript 코드를 실행하는 역할을 합니다.

V8은 JIT 컴파일을 사용하며,

크로미움 기반 브라우저, Node.js와 일렉트론 등의 JS 엔진입니다.

다른 보기들처럼 동일 범주로 묶이려면

V8 - SpiderMonkey(Firefox) | Chakra(Edge) | Nitro(Safari)

가 되어야 맞겠죠?

자바스크립트 런타임

런타임은 프로그램이 구동되는 환경입니다.

초기 자바스크립트는 브라우저 런타임에서만 동작했습니다.

JS를 브라우저 밖에서 이용하려는(서버) 시도가 있었고,

V8 엔진을 이용해 브라우저 밖에서도 동작하는 Node.js가 탄생했습니다.

> node index.js 커맨드를 이용해 자바스크립트 파일을 실행할 수 있죠?

서버사이드를 위한 런타임으로 동기적 모듈 시스템인 CJS를 사용합니다.

다른 보기들처럼 동일 범주로 묶이려면 Node.js - Bun | Deno 등이 되어야 맞겠죠?