esbuild로 react app 만들어보기!

안녕하세요! 이번시간에는 esbuild를 알아보도록 하겠습니다!!

esbuild는 기존에 흔하게 사용되는 webpack과 같은 모듈 번들러입니다!

자바스크립트 어플리케이션을 빌드하는것은 시간이 참 오래걸리고 꽤 복잡하죠..

프로젝트가 커지면 커질 수록 빌드하는 속도가 더 늘어날것이고 이것이 생각보다 꽤 짜증을 유발할 수 가 있는것같습니다!!

개발이나 배포할때 빌드가 오래걸리면 은근히 답답하죠 ㅠㅠ

그래서 그 고민을 해결해줄 수 있는 esbuild에 대해 알아보고 한번 간단하게 프로젝트를 구성해보겠습니다

Esbuild란?

한마디로 엄~~~~~~~~~~~~~~~청 빠른 모듈번들러입니다. 공식사이트에서 소개되는바로는 웹팩보다 100배나 빠르다고 나오네요!

esbuild 공식사이트 소개 이미지

공식사이트에서 나오는 위의 이미지를 보면 속도 차이가 어마어마하네요....

어쩌면 웹팩의 시대가 저물어가는것일까요..?

esbuild는 기본적으로 Go 언어 기반으로 개발된 번들러랍니다.

자 그럼 얼마나 빠른지 직접 만들어보고 확인해보겠습니다!

아래와 같이 터미널에서 root 폴더를 만들고 npm init -y를 실행해 package.json을 만들어줍시다.

mkdir esbuild-react-app
cd esbuild-react-app
npm init -y

그리고 esbuild도 설치해주죠

npm i esbuild

그런 다음 저희는 react와 typescript로 프로젝트를 만들거기때문에 해당 라이브러리를 설치해줍시다

npm i react react-dom @types/react @types/react-dom typescript

그리고 root폴더를 src로 설정하여 tsconfig.js 를 아래의 CLI로 만들어줍시다

npx tsc --init --rootDir src --jsx react

설정은 마무리 되었으니 src폴더를 만들어 App.tsx를 만들어줍니다

그러면 위와 같이 디렉토리 구조가 완성됩니다

App.tsx 안에 아래와 같이 코드를 작성합니다.

import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <h1>현재 숫자는 {count}입니다</h1>
      <button onClick={handleClick}>숫자 증가</button>
    </div>
  );
};

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

그런 다음 빌드를 위해 package.json 안에 아래의 스크립트를 추가해줍시다

"build": "esbuild src/app.tsx --bundle --minify --sourcemap --outfile=public/bundle.js"

src폴더안에 있는 app.tsx를 압축해서 sourcemap형태로(디버깅을 쉽게해주는 옵션) 번들링할것이며 번들 파일은 public폴더안에 bundle.js라는 파일로 만들어준다는 뜻입니다.

하지만 지금 저희는 public폴더도 없고 그 안에서 번들된 파일을 바라볼 index.html이 아직 없기 때문에 public 폴더를 만들고 index.html 을 만들어 아래와 같이 만들어주겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

자 그럼 모든 준비가 끝났습니다!

그러면 빌드 스크립트를 실행시켜보겠습니다!

터미널에서 아래 명령어를 실행시켜줍시다!

npm run build

그러면 아래와 같이 빌드 성공된 모습이 나오며 public에 저희가 설정한 bundle.js가 나오게됩니다

public/bundle.js      139.0kb
public/bundle.js.map  311.9kb

⚡ Done in 60ms

60ms 라니!! 어마어마 하지않나요? 정말 순식간에 빌드가 됩니다.

자 그럼 빌드 된 스크립트 파일이 잘 실행됐는지 확인해볼까요?

cd public
open index.html

를 실행시켜 html를 켜보면은

위와 같이 잘 출력되고 이벤트도 잘 실행되는 것을 확인 할 수 있습니다!!

정말 대단한 번들러같습니다...!!

esbuild가 이렇게 엄청난 퍼포먼스를 보여주지만

아직까지는 webpack 생태계가 워낙 거대할 뿐더러 esbuild는 역사가 짧아 대규모 프로젝트에서 사용하기에는 불안전하다고 생각합니다

하지만 작은 단위의 프로젝트는 esbuild를 충분히 사용해볼만한 가치가 있다고 생각합니다!

esbuild는 webpack이 webpack-dev-server와 같이 세트로 사용되는것처럼 Vite와 Snowpack가 같이 패키지로 사용되는 추세인것 같습니다

Create-react-app 처럼 손쉽게 웹팩설정으로 갖춰진 react app을 설치할 수 있는 것처럼

Vite.js에서도 손쉽게 CLI 명령어 한줄만으로 esbuild와 React app을 설치 할 수 있는 기능들을 제공해주니

위의 코드 처럼 직접 esbuild 환경을 구축은 안해도 될 것 같습니다!

앞으로 번들러 생태계에 어떠한 변화가 있을지 지켜보면 좋을것 같습니다!

이상 간단하게 esbuild로 react app을 구축해보았습니다. 감사합니다.