Bun 설치 및 React 프로젝트 생성하기

Bun은 JavaScript 및 TypeScript 프로젝트를 위한 번들러(bundler)입니다. 본 글에서는 Bun을 이용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다.

 

Bun 설치하기

먼저, React 프로젝트를 생성하기 전에 Bun을 설치해야 합니다. 본 글에서는 macOS 환경에서 Bun을 설치하는 방법에 대해 소개합니다. 다른 환경에서의 설치 방법은 아래 공식 사이트를 참고해주세요.

• Bun: https://bun.sh/

 

brew를 이용하여 Bun을 설치하도록 하겠습니다. 만약, brew가 설치되어 있지 않다면 아래 글을 참고하여 설치를 진행해주시길 바랍니다.

MacOS에 Homebrew 설치하기

 

brew install oven-sh/bun/bun

 

위 명령어를 실행하여 Bun을 설치합니다. 정상적으로 설치가되었는지 확인하기 위해 버전을 출력해봅시다.

$ bun --version
1.1.25

 

React 프로젝트 생성

Bun이 설치되었으면, 이제 React 프로젝트를 생성해봅시다. bun에서는 react app을 생성할 때는 2가지 보일러플레이트(boilerplate)를 사용할 수 있습니다.

• Create React App
• Vite (권장)

 

Create React App기반 프로젝트 생성

CRA를 이용하여 React 프로젝트를 생성해 보겠습니다. 

bun create react-app my-bun-app

 

그리고, React 앱을 실행해봅시다.

cd my-bun-app
bun install
bun start

 

bun create react-app으로 프로젝트 생성 후 실행

 

bun은 번들러 역할 뿐만 아니라, 런타임, 패키지 관리 역할도 합니다. 따라서, npm, yarn 과 같이 패키지 관리를 위한 명령어를 수행할 수 있습니다.

 

Vite 기반 프로젝트 생성 (권장)

이번엔 CRA가 아닌 Vite 기반의 React 프로젝트를 생성해봅시다.

bun create vite my-bun-app

 

위 명령어를 수행하면, 어떤 프레임워크를 사용할 것인지 선택할 수 있습니다. 본 글에서는 React 프로젝트를 생성하는 방법에 대해 소개하고 있으므로, React를 선택합니다.

React 선택

 

그리고, JavaScript를 사용할 것인지 혹은 TypeScript를 사용할 것인지 선택합니다. 저는 TypeScript와 SWC 트랜스파일러를 선택하였습니다.

취향에 맞게 프로젝트 생성

 

이제 아래 명령어를 통해 앱을 실행해봅시다.

cd my-bun-app
bun install
bun dev

명령어 수행

 

http://localhost:5173으로 접속하여 정상적으로 앱이 실행되는지 확인해봅시다.

 

의존성 관리하기

그럼 Bun에서는 어떻게 의존성(dependency)을  관리할까요? Bun도 yarn과 npm과 같이 동일한 명령어로 의존성을 추가하거나 삭제할 수 있습니다.

 

# axios 의존성 추가하기
bun add axios

# axios 의존성 삭제하기
bun remove axios

 

 

만약, devDependencies에 추가하려면, 다른 패키지 관리자 툴과 동일하게 --dev 옵션을 사용합니다.

bun add --dev prettier

 

Reference

Installation | Bun Docs