React+typescript 컴포넌트 라이브러리 생성하기 ①번들러

리액트 프로젝트를 생성하는 방법에는 여러가지가 있다. 특히 CLI (Command Line Interface)를 많이 사용하는데, 복잡한 밑작업 필요없이 커맨드 한 줄로 프로젝트를 간편하게 생성할 수 있는 마법의 명령어이다.

 

대표적인 CLI로는 CRA (create-react-app)와 Vite가 있는데, 대략 아래와 같은 차이가 있다.

 

출처: https://medium.com/@YAKStack/create-react-app-vs-vite-b46be5ceb934

 

요약하자면 CRA는 커뮤니티가 활성화되어있고 많은 기능을 제공하는 대신 속도가 느리고 커스터마이징이 어려운 반면, Vite는 사전 제공 기능은 덜 풍부하지만 커스터마이징이 비교적 자유롭고 빌드 속도가 빠르다는 장점이 있다. 실제로 사용해 보았을 때, CRA는 빌드 속도가 느린 대신 Vite보다 모바일 환경에서 지원되는 기능이 많다는 느낌을 받았었다. 그렇다면 이 차이는 어디에서 오는걸까? CRA는 Webpack, Vite는 Rollup을 번들러로 사용하고 있는데, 번들러란 무엇일까?

 

번들러 (Bundler)

 

 

번들러란 파일을 번들번들하게 만들어주는 도구이다. 

 

기술이 발전하고 예전에 비해 웹 사이트가 복잡해지면서 페이지를 만드는 데 필요한 코드의 수도 늘어나게 되었는데, 스크립트를 여러 파일로 나누어 작성하다보니 동일한 변수명을 가진 파일들이 늘어나거나 다운로드에 걸리는 시간이 늘어나며 문제가 발생하기 시작했고, 해당 문제를 해결하기 위해 생겨난 것이 바로 번들러이다.

 

위 이미지는 CRA의 기반이 되는 번들러인 Webpack의 설명 이미지로, 해당 그림을 보면 알 수 있듯이 번들러는 애플리케이션 제작에 필요한 파일들을 bundle로 묶어 관리하는것으로 코드의 병목현상을 줄이고, 유지보수성을 올리는 데 도움을 준다.

 

번들러의 역할

 - 웹 어플리케이션을 구성하는 여러 파일을 하나의 bundle로 묶어 관리한다

 - 각 모듈간의 의존성 관계를 파악하여 코드가 순서대로 실행되도록 도움을 준다

 - 다양한 서드파티 기능을 이용할 수 있도록 한다

 - 기타등등..

 

번들러의 종류

현재 수많은 번들러가 존재하지만, 그 중 특히나 많이 사용되는 webpack, vite, rollup, esbuild에 대해 알아보자. 이전까진 webpack이 압도적 인기를 자랑했으나 vite가 무서운 속도로 성장하여 결국 앞질렀다!! 이유가 뭘까?

 

 

 

webpack

웹팩은 2012년에 Tobias Koppers에 의해 제작된 번들러로, CRA에서 사용하고 있는 바로 그! 번들러이다. 오래된만큼 레퍼런스도 다양하고 안정적이며, 커뮤니티도 활성화되어있다. 웹팩의 특징은 아래와 같다.

 

 - 각 모듈을 함수로 감싸고 로더와 모듈 캐시를 구현하는 번들을 생성한다.

   (로더: css나 jsx, tsx같은 파일을 webpack이 알아들을 수 있도록 변환해주는 도구)

 - Hot Module Replacement: 소스코드의 변화를 감지하여 브라우저를 새로고침할 필요 없이 바로 적용해준다.

 - Code Splitting: 파일을 여러 번들 파일로 분리하여 병렬로 스크립트를 로드하는 방식으로, 페이지 로딩 속도가 빨라진다.

 

 

ESBuild

JavaScript가 아닌 GO로 작성된 번들러이며, JS 기반의 번들러보다 10배에서 높게는 100배까지 빠르다고 한다. 작성일 기준 최신 버전이 0.21.5이다. 즉, 아직 개발 중이다. 특징은 아래와 같다. 

 

 - 속도가 빠르다.

 - 코드 파싱, 출력과 소스맵 생성을 모두 병렬로 처리함.

 - es5 이하의 문법은 100% 지원되지 않음 (IE와의 호환성이 좋지 않다)

 - JS에 특화되어 있기 때문에 TS의 타입 체킹이나 프론트엔드 언어, HMR 등의 기능이 없다.

 

 

rollup

2017년에 탄생한 번들러로, 과거 CommonJS 형태로만 번들링이 가능했던 Webpack과는 다르게 ES6 문법으로 빌드가 가능하다. ( 웹팩도 v5부터는 ES6으로 빌드가 가능해졌다.) 또, 트리 쉐이킹을 지원하기 때문에 라이브러리를 만들 때 주로 활용되는 번들러이다.

 

 - Tree Shaking

import, export 시 불필요한 부분은 제외하고 필요한 코드만 불러오는 기능.

 ex) import React from "react" -> import { useState } from "react"

단, CommonJS의 경우 import가 아닌 require문을 사용하기 때문에 일부만 불러오는 것이 불가능하므로, ES6을 문법을 사용하는 모듈을 사용하는 편이 바람직하다.

 - 모듈을 호이스팅하여 한 번에 평가하기 때문에 빌드 속도가 빠르다.

 

Vite

ESBuild와 rollup이 섞여서 태어난 키메라이다. ESBuild로 파일을 통합하고 rollup으로 번들링을 진행하기 때문에 매우매우 빠르다. 서버를 구동하면서 숨 돌릴 시간조차 주지 않는다.

 

 - 개발 환경에서는 esbuild, 프로덕션 환경에서는 rollup을 사용하므로 속도가 빠르나, 개발 환경과  프로덕션 환경이 달라 webpack에 비해 빌드 안정성이 떨어진다.

 - ES6 기반이기 때문에 ES5 이하를 타겟으로 잡으려면 pollyfill등의 처리를 해 주어야 한다.

 - 모든 CommonJS 및 UMD(module.exports + define) 파일을 ESM(import, export)으로 불러올 수 있도록 변환한다. 

 

- 

 

이상이 대략적인 번들러 비교이다. 각자 목적에 맞는 번들러를 선택하여 프로젝트를 생성하도록 하자.

 

CLI를 이용해 프로젝트를 생성하면 편하겠지만, 강좌 영상을 보다보니 직접 리액트 환경을 구성하는 경우가 많았다.. 남들이 하는 데에는 이유가 있는 법! 번들러나 바벨, tsconfig에 대해 공부도 할 겸 직접 react 환경을 구성하고자 한다.

 

나는 라이브러리를 만들고 싶기 때문에 본 시리즈에서는 npm init으로 프로젝트 생성 후 rollup을 사용할 예정이다.

다음 편에는 tsconfig 파일에 대해 알아보려고 한다. 아마도..