런타임/컴파일타임/SWC/Vite/Deno/Bun

들어가기 전..

 

제가 연차는 쌓여가는데.. 토이프젝 제외하고 (그 마저도 우리의 npm 웹팩이 잘 해주었으니까..)

빌드한 적도.. 설계한 적도 없어서.. 뒤늦게 공부를 하고 있습니다..

유지보수 말고 신규 프로젝트도 진행해봐야 하는데...휴..

 

---

 

 

 

런타임(Runtime) 과 컴파일타임(Compiletime)

 

컴파일타임

프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정

런타임

컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때

 

 

컴파일타임 오류 유형

신택스 오류
- 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류
타입 체크 오류
- 파일 참조 오류

런타임 오류 유형

- 프로그램이 실행중에 발생하는 형태의 오류
- 널 참조 오류
- 메모리 부족 오류

 

---

 

SWC

Rust 기반 컴파일러 겸 번들러

Speedy Web Compiler의 약자로,

말 그대로 매우 빠른 웹 컴파일러의 기능을 제공 최신 js 기능을 사용하는 js/ts 파일을 불러오고,

주요 브라우저에서 지원하는 코드로 변환한다.
( swc는 한국인 개발자가 개발했다 )

 

SWC의 장점

-단일 코어 동기 벤치마크에서도 babel보다 16~20배 빠르다.
실제 성능 차이는 swc가 작업자 스레드에서 작동하고 babel이 이벤트 루프 스레드에서 작동하기 때문에 더 큽니다. 

nextjs 새 버전의 기본 엔진으로 도입하였고, 기존 react project에 적용하는 case가 있다.

 

SWC :https://swc.rs/
github :https://github.com/swc-project/swc swc-plugin-react-native-web
git: https://github.com/nissy-dev/swc-plugin-react-native-web

 

---

 

Vite

VITE는 네이티브 ES 모듈을 지원하는 웹 번들링 툴

Vue 3 이상 동작하게 설계 되었고 번들 시에는 Rollup.js를 사용하여 프로덕션 빌드를 제공

 

 

VITE의 장점

빠른 콜드 서버 스타트
번들링을 수행하지 않고 서버 콜드 스타트가 매우 빠르다

인스턴트 HMR (hot module replacement)
vue.js 코드는 수정 후 저장하면 HMR 되면서 바로 변경된 사항을 볼 수 있다.
VITE는 HMR할 때 변경된 모듈만 교체하므로 프로그램의 크기에 상관없이 HMR이 일관되게 빠르다.

진정한 온-디맨드 방식
코드는 온-디맨드 방식으로 컴파일
→ 실제로 보여지는 현재 화면만 컴파일 전체 앱이 번들링될 때까지 기다릴 필요가 없어서 프로젝트의 크기가 클 경우 더 효과적

 

VITE의 단점 

- Full Page Load 시에는 기존의 vue-cli 보다 느릴 수 있다
- 아직 CSS Preprocessor의 HMR을 지원하지 않는다

 

지원하고 있는 템플릿

 

사용법

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

 

Vite :https://deno.land/
github :https://github.com/vitejs/vite

 

---

 

Deno

Rust 기반 런타임 Node.js

창립자 Ryan Dahl이 만들었다

 

Deno 장점

샌드박싱 기능
= 보안에 매우 신경 씀
명시적으로 권한을 허용하지 않으면 하드 드라이브에 접근할 수 없으며,
악성코드도 마음대로 실행할 수 없다.

ESM 지원
import 키워드에 URL을 지정하는 방식으로
모듈을 로드 처음 실행할 때 dependency를 하드디스크에 저장해놓기 때문에 이후에 오프라인에서도 실행 가능

import { serve } from "http://deno.land/std/http/server.ts";​

Top-Level await 지원(async가 없어도 된다니..)

for await (const req of s) {
	req.respond({ body: "Hello World\n" });
}

- 즉시 사용 가능한 TypeScript 및 견고한 표준 패키지 모음을 지원
- 의존성 없이 실행할 수 있는 파일 하나로 배포
- 의존성 검사기(dependency inspector)와 코드 포매터(code formatter)를 내장

 

Node 와의 차이

(대부분 장점에 적힌 내용..)

 

그래서 왜 안쓰는지?

- 사용자가 적어 오픈 소스 생태계가 활발하지 않고, 레퍼런스 부족
- 150만 노드 패키지의 손실
= 구글의 V8 엔진을 사용하지만 NPM 패키지와 호환되지 않는 자체 패키지 매니저를 사용
= 현재 ~5000개의 Deno 모듈만 사용

Deno :https://deno.land/
github :https://github.com/denoland/deno

 

---

 

Bun

JavaScript 런타임 및 패키지 관리자

2022년 7월 초부터 공개 베타로 제공

 

Bun은 V8엔진을 사용하는 기존의 Node, Deno와는 달리

일반적으로 더 빠른것으로 간주되는 WebKit의 JavaScriptCore를 기반으로 구축되었으며,

C++, Rust가 아닌 시스템 하드웨어에서 읽을 수 있는 저수준 프로그래밍 언어인 Zig로 작성되어있어

더 빠르게 동작할 수 있는 것으로 보입니다.

- console.log(’hi’); 시 deno보다 bun이 2배를, node16보단 4.5배 빠른 속도를 보인다

 

 

Bun의 장점

- 속도를 우선으로 개발
-모든 npm 패키지, ESM 및 CommonJS를 모두 지원
  내부적으로는 ESM을 사용.
- 모든 파일이 트랜스파일되기 때문에 typescript 및 jsx를 지원 (.tsconfig 지원)
- 자체 JS 번들러도 포함

 

But..

고급 번들러 기능을 사용하는 사람들을 위한 일부 기능이 부족할 수 있다.

window 사용자는 설치가 번거로워 window 설치 패키지가 제공되어야 할 거 같다.

리눅스 하위 시스템 설치 후 가상화 기술 설정 등..

 

 

사용법

1. bun 설치

// http.js
export default {
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
};

> curl https://bun.sh/install | bash

 

2. 파일 경로 추가

> curl https://bun.sh/install | bash
> vim ~/.zshrc  //텍스트 편집기 사용
export PATH="/Users/owner/.bun/bin:$PATH"  // 설정 경로 파일에 추가
> source ~/.zshrc // 경로 확인
> bun --version
0.1.4

 

 

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

 

---

 

 

주절주절.. 요약본이지만 긴 글 봐주셔서 감사합니다..

틀린 점 있다면 코멘트 달아주세요..

 

 

 

참고

https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/ https://jwchang0206.medium.com/make-create-react-app-faster-with-rust-6c75ffa8fdfd https://marrrang.tistory.com/m/10 http://chanlee.github.io/2016/08/18/what-is-the-rollup-js/ https://v3.vuejs.org/guide/migration/introduction.html https://engineering.ab180.co/stories/webpack-to-vite https://velog.io/@eamon3481/Vite-는-Webpack을-대체-가능할까 https://kdydesign.github.io/2022/02/17/deno-tutorial/ https://laikhan-workshop.tistory.com/m/54 https://medium.com/@YNNSme/node-js-is-dead-long-live-bun-3d888eab63d7 https://geekconfig.com/tutorial/install-bun-for-windows-a-modern-javascript-runtime-such-as-node-or-deno

 

다음에 공부할 내용.. monorepo vs multirepo

https://d2.naver.com/helloworld/0923884 https://tech.buzzvil.com/handbook/multirepo-vs-monorepo/ https://velog.io/@sms8377/DevOps-MonoRepo란 https://blog.mathpresso.com/팀워크-향상을-위한-모노레포-monorepo-시스템-구축-3ae1b0112f1b