프론트엔드 개발 생태계에서 Rust 개발 툴들

AWS Submit 2024에서 개발을 할 때 중요하게 고려해야할 요소에 대해서 들었던 기억이 있다.

그건 바로 "비용"인데, 비용을 중요한 요소로 고려한다면 프로그래밍 언어부터 효율적으로, 리소스를 적게 사용하는 그런 고성능의 언어를 선택하는 것도 하나의 방법이라는 이야기를 들었다.

 

그 이야기를 듣고 떠올렸던 게 바로 FE 개발 환경에 사용되는 bundler, compiler, formatter 같은 개발 툴들이 Rust로 작성되는 경우가 많아지고 있다는 점이었다.

 

 AWS를 사용할 때 Rust를 사용해서 비용이 낮아질까?

👻 적은 메모리를 사용 -> 더 작은 인스턴스를 사용할 수 있다. (비용 절감)

 

Rust는 다음과 같은 장점을 지니는 언어로, 개발자들 사이에서 인지도가 올라가고 있는 언어이다.

• Rust는 메모리 안전성을 보장한다.
  Rust는 컴파일 타임에 메모리 오류를 방지하는 강력한 소유권 시스템을 가지고 있다.
  이를 통해 null 포인터 역참조, 댕글링 포인터, 버퍼 오버플로우 등의 문제를 방지할 수 있다.
• Rust는 C와 C++와 유사한 수준의 성능을 제공하면서도 안전성을 희생하지 않는다.
  시스템 프로그래밍 언어로서, Rust는 저수준 제어와 고성능을 요구하는 애플리케이션에 적합하다.
• Rust는 웹 어셈블리(WebAssembly) 지원을 통해 브라우저에서 고성능 애플리케이션을 개발할 수 있다.
  이는 특히 게임 개발, 이미지/비디오 처리, 가상 현실(VR) 등 성능이 중요한 웹 애플리케이션에 유리하다.

요약하자면, 안전성이 우수하고 성능이 좋은 언어이기에 비용 효율을 고려할 때 떠올릴 수 있는 언어중 하나라고 할 수 있다.

 

그리고 실제로 Rust를 사용해 작성된 FE 개발 툴들에 대해서 알아보았다.

SWC

사실, Rust가 생소하든 이미 익숙하든 FE 생태계에서 Rust는 많이 사용되고 있다.

Next.js에서 공식적으로 babel 대신 채택한 SWC가 있기 때문이다.
https://swc.rs/

Rust-based platform for the Web – SWC

SWC 공식문서의 일부

 

SWC는 공식문서에 따르면 20배 더 빠르고, 이는 코어수가 증가할수록 더 증폭된다.

 

Turbopack

거기에 더해서 Next.js는 실험적인 기능으로 turbopack을 지원한다.

https://turbo.build/pack

Turbopack

turbopack역시 swc와 마찬가지로 rust로 작성되었으며 빠른 성능을 자랑한다.

아직 베타긴 하지만, 추후에는 Next.js에서 webpack을 대체하지 않을까 싶은 기대감이 있다.

 

next.js에서 develop 환경에서 turbopack을 사용해볼 수 있다. (--turbo 옵션)

{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

 

https://nextjs.org/docs/architecture/turbopack

Architecture: Turbopack | Next.js

 

Farm

turbopack 이외에도 rust로 작성된 번들러가 있는데, 바로 farm이다.

farm의 공식문서에 있는 벤치마크

 

벤치마크에 따르면, webpack보다는 당연히 빠르고, Vite보다도 빠른 모습을 보여주고 있다.

https://www.farmfe.org/

Farm Documentation | Farm

아직 사용량은 낮지만, 번들러쪽에서도 rust를 이용한 '더 빠른' 번들러들의 시도가 이어지는 것 같다.

 

Biome

그리고 lint와 formatter에서도 Rust를 이용한 시도가 이어지고 있는데 바로 biome이다.

https://biomejs.dev/

Biome

기존의 eslint + prettier 환경을 하나로 통합한 것으로, 아직 기능이 부족하긴 하지만 더 빠른 개발 환경을 제공하는 개발툴이다.

 

👻 Rust는 이렇듯 FE  생태계에 많은 새로운 바람을 불어넣어왔다.

 

 

+

또한 관련된 내용으로 wasm-bindgen를 떠올릴 수 있다.

https://github.com/rustwasm/wasm-bindgen

GitHub - rustwasm/wasm-bindgen: Facilitating high-level interactions between Wasm modules and JavaScript

Rust는 WebAssembly를 타겟으로 컴파일할 수 있는 우수한 언어이고,

wasm-bindgen과 같은 도구를 사용하면 Rust 코드와 JavaScript 간의 상호 운용성을 쉽게 확보할 수 있다.

이를 통해 Rust로 작성된 고성능 모듈을 프론트엔드 애플리케이션에 통합할 수 있다.

(Rust와 WebAssembly가 결합되어 더 나은 성능이 필요한 곳에 활용되고 있다)

 

✨ 위의 소개한 라이브러리들은 WebAssembly를 통해서 성능을 향상시키고, 어떤 라이브러리는 wasm-bindgen을 통해 Rust와 JavaScript 간의 상호 운용성을 제공하기도 한다.

 

😎 그밖에도 컴포넌트 기반 프론트엔드 프레임워크인 yew는 Rust의 강력한 기능을 바탕으로 개발 되는 등 새로운 시도들이 있다고 한다.

 

 

😊 틀린 내용이 있다면 알려주세요. 곧바로 수정할 수 있도록 할게요 !