본문 바로가기
All Side/Runtime > BunJS

[Bun 시리즈] #1 Bun 공식문서에서 알려주는 Quickstart 따라해보기

by developerBeluga 2023. 10. 22.
728x90
반응형

 

 

 

 

 

 

 

NodeJS를 두고 지금 BunJS에 눈돌아갔니?

 

맞다.

어느날 우연히 본 영상 하나로 난 Bun으로 사이드프로젝트를 만들어야겠다 생각했다.

 

https://youtu.be/a8uPDppckQk?si=OkesGXLDoiwBG1cR

코딩애플님의 'Bun 서버가 4배 빠르다는건 진짜인가(vs Node.js)'의 영상이었다.

이걸 보면 Bun에 관심이 갈 수 밖에 없다 👍

 

한 번씩 서버를 킬 때 느려터졌네 하는 순간들이 있었는데...

드디어 NodeJS를 대처할 수 있는 JS 런타임 및 패키지 관리자가 생겨서 너무 좋다 😆

(Bun은 최근에서야 1.0 버전을 출시하면서 그동안 많은 제약들을 벗어났다는 평을 받고 있다.)

 

 

 

 

맛보기로 공식문서가 제공하는 튜토리얼 따라하기

https://bun.sh/docs/quickstart

 

Quickstart | Bun Docs

Let's write a simple HTTP server using the built-in Bun.serve API. First, create a fresh directory. Run bun init to scaffold a new project. It's an interactive tool; for this tutorial, just press enter to accept the default answer for each prompt. Since ou

bun.sh

👆 따라할 사람은 공식문서 클릭클릭

 

quickstart라는 폴더를 만들어줬다.

(mkdir quickstart 명령어 쓰면 됨)

 

bun init

bun을 설치해준다.

 

 

 

Issue 발생! Bun 미설치로 인한 오류

command not found: bun이라는 오류가 나왔다.

생각해보니 Node를 설치한 것처럼 Bun도 설치해줘야 할 것 같았다.

공식문서에서 바로 Installing 페이지를 발견했다.

 

brew tap oven-sh/bun 
brew install bun

homebrew로 간단하게 설치할 수 있다.

 

 

bun --version으로 잘 설치했는지 확인해보면 잘 나온다.

굳 👍

 

 

다시 튜토리얼 시작

bun init 명령어를 다시 입력하니 잘 생성됐다.

 

quickstart 파일에 들어간 bun 런타임을 돌리기 위한 파일들이 잘 있다.

잘 설치됐구나 하고 넘어갈려고 할 때...!

신기한걸 발견했다 💡

(눈치챈 사람 손)

 

바로 tsconfig.json 파일이 있다.

NodeJS에선 TypeScript를 쓰기 위해선 따로 명령어를 사용했다.

근데 Bun 설치 명령어 한 번에 TypeScript도 쓸 수 있는거다.

 

 

 

 

TypeScript에 대한 NodeJS와 BunJS의 차이

기본적으로 NodeJS는 TypeScript 파일을 지원하지 않는다.

그래서 TypeScript를 실행하려면 외부 종속성이 필요하다.

 

그에 비해 BunJS는 런타임에 자바스크립트 트랜스파일러가 통합되어져 있다 ❗️

그래서 TypeScript를 실행하는데 외부 종속성이 필요 없다.

 

고로 TypeScript를 쓴다면 파일을 실행할 때 둘의 속도 차이가 더 벌어지는거다.

TypeScript 개발자라면 BunJS를 더욱 고려해도 좋을 것 같다.

(내 이야기 ㅋ)

 

 

 

튜토리얼 마무리

갑자기 tsconfig 파일을 발견하면서 왜 있나하면서 다른 길로 급발진 했지만 마무리를 하기 위해 서버를 실행해보자.

index.ts 파일을 보면 console.log가 있다.

공식문서에 나온 것처럼 코드를 바꿔주자.

 

const server = Bun.serve({
    port: 3000,
    fetch(req) {
      return new Response("Bun!");
    },
  });
  
 console.log(`Listening on http://localhost:${server.port} ...`);

아주 간단하게 3000포트로 http 서버를 만들어줬다.

localhost:3000에 접속하면 Bun!이라는 글자가 보여야 한다.

 

 

bun index.ts를 해주니 잘 나온다.

굳 👍

 

+ 매번 bun index.ts 해주기 귀찮다면 package.json에 명령어를 추가해주자.

{
  "name": "test",
  "module": "index.ts",
  "type": "module",
  "scripts": {
    "start": "bun run index.ts" // 여기에 추가하기 💡
  },
  "devDependencies": {
    "bun-types": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

bun run start를 해주면 아까와 같이 잘 켜진다.

 

아니 근데 bun 너무 좋다 😍

NodeJS에서 매번 TypeScript 쓰기 위해서 해줘야하는게 많았다.

그게 또 귀찮아요...

 

근데 BunJS은 내가 서버를 낄 때까지 뭘 해주지 않았음에도 ts 파일이 잘 돌아간다.

너무 감동이 심하다 😭

 

 

 

 

 

인정띠

아주 간단한 튜토리얼만 사용했기 때문에 아직 Bun을 막 추천할 수 없지만 큼큼

(벌써부터 좋은걸요?)

 

 

앞으로 사이드프로젝트를 하면서 BunJS에 대해 공부하면서 알게 된 점과 공부한걸 공유하도록 하겠다.

굳 👍

 

 

 

 

 

 

 

728x90
반응형

댓글