2021.05.28

자바스크립트 개발의 지형을 바꾸는 7가지 툴

Matthew Tyson | InfoWorld
자바스크립트 세계는 매년이 풍년인 것 같다. 2021년도 다르지 않다. 특히 새로운 세대의 번들러와 빌드 툴이 “적당히 좋은” 툴이라는 기존의 관성에 도전하고 있다. 이런 새로운 종류의 툴은 더 빠른 속도, 더 나은 개발 환경, 더 높은 프로덕션 빌드 품질에 초점을 둔다. 

여기서는 자바스크립트 개발을 더 쉽게 만드는 새로운 스타로 부상 중인 툴 7가지를 살펴본다. 
 
ⓒ Getty Images Bank
 

ECMAScript 모듈(ESM) 

ECMAScript 모듈은 ES 모듈 또는 ESM이라고도 하며, 공식 자바스크립트 모듈 구문이다. 따라서 엄밀히 말해 툴은 아니지만 자바스크립트 개발 및 툴 전반에 광범위한 영향을 미친다. 자바스크립트 모듈 사용과 관련해서는 그동안 많은 혼란과 불확실성이 있었다(Node.js의 CommonJS 구문 등). 그러나 최근 ESM의 승인 및 브라우저에서의 보편적 구현을 통해 새로운 가능성이 열리고 있다. 

ESM 구문의 일반적인 형태는 <예시 1>에서 볼 수 있다. 첫 번째 라인은 기본 내보내기를 가져오는 구문이다. 두 번째는 구조 분해를 사용해 모듈 내의 멤버를 지정한다. 

예시 1. ESM 구문 
import aModule from 'module-name'; 
import { moduleMember, anotherMember } from 'module-name'; 


이제 마이크로소프트 엣지까지 ESM을 지원하면서 모든 주요 브라우저가 ESM을 지원하게 됐다. 브라우저가 모듈을 사용하는 방법은 두 가지다. 포함된 자바스크립트 스크립트에서 사용하는 방법, 그리고 예시 2와 같이 특수한 “module” 스크립트 태그에서 직접 사용하는 방법이다. 

예시 2. 스크립트 모듈을 통해 가져오기 
<script type="module" src="https://unpkg.com/browse/react@17.0.1/"></script> 
<script type="module"> 
  import React from 'react'; 
</script> 
<script type="module" src="../my-module.js"></script> 


예시 2에서 처음 2개의 script 태그는 절대적 URL을 지정하는 방법을 보여준다. 첫 번째 인스턴스에서 src 특성을 사용하며, 두 번째에서는 자바스크립트 가져오기를 실행한다. 세 번째 script 태그는 같은 도메인에서 제공되는 상대적 가져오기를 보여준다. 참고로, 다른 도메인의 스크립트인 경우 CORS 제한이 적용된다. 

오랜 시간 동안 브라우저의 모듈 관련 제약을 우회하기 위해 다양한 번들러(근래에는 대부분 웹팩(Webpack))가 스크립트를 묶는 데 사용됐지만, ESM에 대한 폭넓은 브라우저 지원으로 그 상황이 바뀌었고, ESM 지원을 활용하는 새로운 종류의 툴이 개발되고 있다. 

그러나 번들링이 해야 하는 역할도 여전히 있다. 브라우저가 앱을 위한 모든 모듈을 네이티브로 요청하도록 허용할 경우 수많은 요청으로 인해 성능이 저하될 수 있기 때문이다. 번들링, 경량화(minification), 스마트 코드/CSS 분할 등은 우수한 성능을 위해 여전히 중요하다. 

ESM을 지원하는 브라우저는 여기서 볼 수 있다. 
 

esbuild

esbuild는 번들러 분야에서 비교적 새로운 툴이다. 다른 여러 툴과 마찬가지로 강점은 빠른 속도에 있다. 자바스크립트가 아닌 고(Go)로 작성되어 Go에 내장된 병렬처리의 이점을 활용한다. 또한 파싱과 코드 생성 중에 공유 메모리를 지능적으로 사용한다. 

프로젝트의 벤치마크를 보면 esbuild의 속도가 어느 정도인지 감을 잡을 수 있다. 벤치마크에서는 다른 번들러에 비해 100배 이상 성능이 우수한 것으로 나타났다. 

기본적으로 esbuild는 브라우저용으로 번들링되지만, Node.js용으로도 번들링이 가능하다. package.json 및 node_modules를 통해 NPM에 연결한다는 면에서 다른 빌드 툴과 비슷한 방식으로 작동한다. 또한 명령줄을 사용하기에 요구사항이 너무 복잡해지고 다루기 어려워지는 경우 빌드 명령을 롤업하는 데 사용할 수 있는 자바스크립트 API도 제공한다. 

esbuild는 번들링에 초점을 두며 dev 모드 서버는 포함하지 않는다. 코드/CSS 분할과 같은 일부 기능은 아직 개발 중이다. 다른 툴에서 프로덕션 번들링 기능에 esbuild를 사용할 수 있다(아래 바이트 참조). 

esbuild는 2021년 5월을 기준으로 깃허브 별표 수는 약 2만 5,000개, 주간 NPM 다운로드 횟수는 57만회 정도다. 여기서 다루는 프로젝트 중에서 몸집은 가장 작지만 사용량이 빠르게 늘고 있으며 탁월한 성능을 제공하는 만큼 매력적인 옵션이다. 

예시 3. esbuild 자바스크립트 API 사용하기 
require('esbuild').build({ 
  entryPoints: ['app.jsx'], 
  bundle: true, 
  outfile: 'out.js', 
}).catch(() => process.exit(1)) 


esbuild는 앱 코드와 모든 종속 항목을 포함한 완전한 독립형 번들을 결과물로 제공한다. 스벨트(Svelte)부터 포스트CSS(PostCSS), YAML에 이르기까지 다양한 사용 사례를 위한 많은 플러그인이 있다. esbuild는 기본 상태에서 타입스크립트, JSX, JSON과 같은 일반적인 형식을 지원한다. 
 

파슬(Parcel)

파슬도 빠질 수 없는 툴로, 개념적으로는 웹팩, 롤업과 비슷하다(아래 참조). 파슬은 구성 오버헤드를 낮추는 외에, 비록 esbuild와 비교할 수 없기는 해도 성능 개선도 강점으로 내세운다. 

파슬에는 기본적으로 구성 없는 코드 분할 및 HMR(Hot Module Replacement)이 포함된다. 또한 기본적으로 많은 파일 형식(이미지 등)을 지원하므로 추가 구성 없이 처리할 수 있다. 



2021.05.28

자바스크립트 개발의 지형을 바꾸는 7가지 툴

Matthew Tyson | InfoWorld
자바스크립트 세계는 매년이 풍년인 것 같다. 2021년도 다르지 않다. 특히 새로운 세대의 번들러와 빌드 툴이 “적당히 좋은” 툴이라는 기존의 관성에 도전하고 있다. 이런 새로운 종류의 툴은 더 빠른 속도, 더 나은 개발 환경, 더 높은 프로덕션 빌드 품질에 초점을 둔다. 

여기서는 자바스크립트 개발을 더 쉽게 만드는 새로운 스타로 부상 중인 툴 7가지를 살펴본다. 
 
ⓒ Getty Images Bank
 

ECMAScript 모듈(ESM) 

ECMAScript 모듈은 ES 모듈 또는 ESM이라고도 하며, 공식 자바스크립트 모듈 구문이다. 따라서 엄밀히 말해 툴은 아니지만 자바스크립트 개발 및 툴 전반에 광범위한 영향을 미친다. 자바스크립트 모듈 사용과 관련해서는 그동안 많은 혼란과 불확실성이 있었다(Node.js의 CommonJS 구문 등). 그러나 최근 ESM의 승인 및 브라우저에서의 보편적 구현을 통해 새로운 가능성이 열리고 있다. 

ESM 구문의 일반적인 형태는 <예시 1>에서 볼 수 있다. 첫 번째 라인은 기본 내보내기를 가져오는 구문이다. 두 번째는 구조 분해를 사용해 모듈 내의 멤버를 지정한다. 

예시 1. ESM 구문 
import aModule from 'module-name'; 
import { moduleMember, anotherMember } from 'module-name'; 


이제 마이크로소프트 엣지까지 ESM을 지원하면서 모든 주요 브라우저가 ESM을 지원하게 됐다. 브라우저가 모듈을 사용하는 방법은 두 가지다. 포함된 자바스크립트 스크립트에서 사용하는 방법, 그리고 예시 2와 같이 특수한 “module” 스크립트 태그에서 직접 사용하는 방법이다. 

예시 2. 스크립트 모듈을 통해 가져오기 
<script type="module" src="https://unpkg.com/browse/react@17.0.1/"></script> 
<script type="module"> 
  import React from 'react'; 
</script> 
<script type="module" src="../my-module.js"></script> 


예시 2에서 처음 2개의 script 태그는 절대적 URL을 지정하는 방법을 보여준다. 첫 번째 인스턴스에서 src 특성을 사용하며, 두 번째에서는 자바스크립트 가져오기를 실행한다. 세 번째 script 태그는 같은 도메인에서 제공되는 상대적 가져오기를 보여준다. 참고로, 다른 도메인의 스크립트인 경우 CORS 제한이 적용된다. 

오랜 시간 동안 브라우저의 모듈 관련 제약을 우회하기 위해 다양한 번들러(근래에는 대부분 웹팩(Webpack))가 스크립트를 묶는 데 사용됐지만, ESM에 대한 폭넓은 브라우저 지원으로 그 상황이 바뀌었고, ESM 지원을 활용하는 새로운 종류의 툴이 개발되고 있다. 

그러나 번들링이 해야 하는 역할도 여전히 있다. 브라우저가 앱을 위한 모든 모듈을 네이티브로 요청하도록 허용할 경우 수많은 요청으로 인해 성능이 저하될 수 있기 때문이다. 번들링, 경량화(minification), 스마트 코드/CSS 분할 등은 우수한 성능을 위해 여전히 중요하다. 

ESM을 지원하는 브라우저는 여기서 볼 수 있다. 
 

esbuild

esbuild는 번들러 분야에서 비교적 새로운 툴이다. 다른 여러 툴과 마찬가지로 강점은 빠른 속도에 있다. 자바스크립트가 아닌 고(Go)로 작성되어 Go에 내장된 병렬처리의 이점을 활용한다. 또한 파싱과 코드 생성 중에 공유 메모리를 지능적으로 사용한다. 

프로젝트의 벤치마크를 보면 esbuild의 속도가 어느 정도인지 감을 잡을 수 있다. 벤치마크에서는 다른 번들러에 비해 100배 이상 성능이 우수한 것으로 나타났다. 

기본적으로 esbuild는 브라우저용으로 번들링되지만, Node.js용으로도 번들링이 가능하다. package.json 및 node_modules를 통해 NPM에 연결한다는 면에서 다른 빌드 툴과 비슷한 방식으로 작동한다. 또한 명령줄을 사용하기에 요구사항이 너무 복잡해지고 다루기 어려워지는 경우 빌드 명령을 롤업하는 데 사용할 수 있는 자바스크립트 API도 제공한다. 

esbuild는 번들링에 초점을 두며 dev 모드 서버는 포함하지 않는다. 코드/CSS 분할과 같은 일부 기능은 아직 개발 중이다. 다른 툴에서 프로덕션 번들링 기능에 esbuild를 사용할 수 있다(아래 바이트 참조). 

esbuild는 2021년 5월을 기준으로 깃허브 별표 수는 약 2만 5,000개, 주간 NPM 다운로드 횟수는 57만회 정도다. 여기서 다루는 프로젝트 중에서 몸집은 가장 작지만 사용량이 빠르게 늘고 있으며 탁월한 성능을 제공하는 만큼 매력적인 옵션이다. 

예시 3. esbuild 자바스크립트 API 사용하기 
require('esbuild').build({ 
  entryPoints: ['app.jsx'], 
  bundle: true, 
  outfile: 'out.js', 
}).catch(() => process.exit(1)) 


esbuild는 앱 코드와 모든 종속 항목을 포함한 완전한 독립형 번들을 결과물로 제공한다. 스벨트(Svelte)부터 포스트CSS(PostCSS), YAML에 이르기까지 다양한 사용 사례를 위한 많은 플러그인이 있다. esbuild는 기본 상태에서 타입스크립트, JSX, JSON과 같은 일반적인 형식을 지원한다. 
 

파슬(Parcel)

파슬도 빠질 수 없는 툴로, 개념적으로는 웹팩, 롤업과 비슷하다(아래 참조). 파슬은 구성 오버헤드를 낮추는 외에, 비록 esbuild와 비교할 수 없기는 해도 성능 개선도 강점으로 내세운다. 

파슬에는 기본적으로 구성 없는 코드 분할 및 HMR(Hot Module Replacement)이 포함된다. 또한 기본적으로 많은 파일 형식(이미지 등)을 지원하므로 추가 구성 없이 처리할 수 있다. 



X