한Bun 써보는 거 어때?

Bun is a fast all-in-one JavaScript runtime

안녕하세요. 프론트엔드 개발팀 ‘기리 와 니키’ 입니다.

무더운 여름, 후텁지근한 날씨와 쌓여있는 업무에 많이들 지치실 텐데요

이 여름의 열기만큼이나 뜨거운 스포트라이트를 받는 기술이 있어

이번 기회에 ‘뜨거운 양파 Bun‘에 대해 소개해볼까 합니다.

출처 : bun.sh

Bun 이란?

Bun은 Node 또는 Deno와 같은 JavaScript 런타임 및 패키지 관리자입니다.

Bun : https://bun.sh/ 
github : https://github.com/oven-sh/bun

왜 빠를까?

Bun은 V8엔진을 사용하는 기존의 Node, Deno와는 달리 일반적으로 더 빠른것으로 간주되는 WebKit의 JavaScriptCore를 기반으로 구축되었으며, C++, Rust가 아닌 시스템 하드웨어에서 읽을 수 있는 저수준 프로그래밍 언어인 Zig로 작성되어있어 더 빠르게 동작할 수 있는 것으로 보입니다.

ziglang : https://ziglang.org/ko/

Bun의 특징

• 속도를 우선으로 개발되었습니다.
• React를 서버로 렌더링하거나 데이터베이스 쿼리를 실행할 때 Node 및 Deno보다 약 3배 정도 빠릅니다.
• npm과 호환할 수 있는 패키지 매니저를 포함합니다.
• yarn install을 bun install로 바꾸기만 해도 최대 20배 정도 빠르게 설치할 수 있습니다.
• V8 엔진 대신 WebKit에서 사용하는 JavaScriptCore을 엔진을 사용합니다.
• 기존에 작업 중인 JavaScript / TypeScript의 개발환경을 그대로 쓸 수 있도록 설계되었습니다.
• Node.js의 모듈 resolution 알고리즘을 구현하므로 node_modules을 그대로 사용할 수 있습니다.
• ESM 및 CommonJS를 모두 지원하나, 내부적으로는 ESM을 사용합니다.
• 모든 파일이 트랜스파일 되기 때문에 TypeScript 및 JSX를 모두 지원합니다.
• .env 파일로부터 자동으로 환경변수를 불러오기 때문에, 더 이상 require("dotenv").config() 를 작성할 필요가 없습니다👍

Bun install

Bun의 설치 및 사용 명령어들은 Node와 비슷한 부분이 매우 많습니다.

저희가 Bun을 처음 봤지만 생소하지 않게 느껴지는 이유도 Node와 유사한 명령어 때문이라고 생각 됩니다.

curl -fsSL https://bun.sh/install | bash

Bun command

Bun을 설치 후 터미널에 bun -help를 입력해 보시면 많은 명령어가 나오는데, 자주 사용할만한 명령어를 몇 가지 정리해보았습니다.

• bun dev : 로컬 서버 실행
• bun create : 프로젝트 생성 ex) bun create react [project-name] (react cli 설치)
• bun run : bun 스크립트 실행
• bun install : package.json에 대한 종속성 설치
• bun add : 새로운 패키지 종속성 추가
• bun remove : 설치된 패키지 종속성 제거

Node vs Bun 속도 비교

Bun과 Node의 속도 차이를 보기 위하여 피보나치수열을 구현하여 테스트 해 보았습니다.

// 피보나치수열
function fibonacci(n) {
 return n < 1 ? 0 : n < 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2);
}

// 실행 시간 측정
console.time('fibonacci');
console.log(fibonacci(n));
console.timeEnd('fibonacci');

• fibonacci(10)

fibonacci(10) Node 실행

fibonacci(10) Bun 실행

• fibonacci(50)

fibonacci(50) Node 실행

fibonacci(50) Bun 실행

• 50을 넘기면 계산하는 데 너무 오래 걸려서 50까지만 테스트해보았습니다.
• 위의 결과를 보면 값이 커질수록(무거워질수록) 속도 차이는 더 커질 것으로 예상됩니다.
• 단순한 테스트이므로 프로젝트에 도입했을 시 얼마만큼의 이점이 있는지를 판단할 명확한 기준이 될 수는 없다고 생각이 듭니다.

npm install vs Bun install

TypeScript가 적용된 create-react-app 기준으로 속도 측정 테스트를 해 보았습니다.

• npm install (22초)

• Bun install (4.23초)

• 기본 create-react-app 패키지 인스톨 시 시간 차이는 약 5배 정도 나는 것으로 확인이 됩니다.
• 패키지의 내용이 무거워질수록 더 큰 시간 차이가 날 것으로 예상됩니다.

Bun으로 React CLI 설치해보기

마지막으로 Bun을 사용하여 create-react-app을 설치 해 보도록 하겠습니다.

1. React CLI 설치

bun create react bun-react

• 설치가 완료되면 아래와 같은 package.json의 구성이 나오는데, npm으로 설치한 create-react-app의 package.json과 비교하면 구조가 상당히 단순합니다.

• Bun으로 설치하였을 경우에는 react-scripts 와 browserslist 설정 파일이 없습니다.

2. production build를 위한 react-scripts 설치

bun add react-scripts

3. package.json 파일 내부에 script 추가

...
"scripts": {
    "start": "bun dev",
    "build": "react-scripts build"
  }
...

• bun run build 명령어 입력 > Would you like to add the defaults to your package.json? › (Y/n) 위와 같은 메시지가 나올 때 Y를 선택하면 package.json에 기본 browserslist 설정이 완료되며, build에 성공합니다.

4. 로컬 서버 실행

• package.json의 script에 추가한 명령어인 bun run start 또는 bun dev를 입력하면 로컬서버가 실행됩니다.

마무리

Bun은 현재 macOS(x86 및 Arm), Windows 하위 시스템(WSL)에서만 사용 가능하여 개발 환경이 한정적입니다. 현재 v0.1.4로 v1도 나오지 않은 베타버전이라 속도만 바라보면 괜찮다고 생각은 들지만, 보안 및 다른 어떠한 이슈가 생길 지 모르므로 프로덕션 단계에 적용하기까지는 시간이 필요할 것으로 보입니다.

아마 내년정도면 사용해 볼만할지도..?