“나만 알고 싶은” 자바스크립트 프로젝트 7선

아직 모르는 사람이 많은 새로운 자바스크립트 프로젝트 7가지를 소개한다. 이들 도구와 프레임워크는 광범위한 기능을 지원하는 한편, 자바스크립트 개발의 트렌드에 관한 인사이트도 제공한다. 예를 들면 네이티브 앱 구축, 강력한 형식의 풀스택 개발, Node.js의 런타임 대체재, 브라우저 내 그래픽 등이 있다. 7가지 프로젝트는 아직 모르는 사람이 많긴 하지만 개발자들의 호응을 얻고 있기 때문에 머지않아 유명해질 수 있다. 여기서 처음 알게 됐다는 점만 기억하라.
 

 

토리(Tauri) : 데스크톱 앱을 위한 자바스크립트 프레임워크

토리는 데스크톱 애플리케이션을 위한 자바스크립트 프레임워크다. ‘메타 프레임워크’라는 표현이 더 적절할 수 있겠다. 리액트(React), 스벨트(Svelte) 등의 프론트엔드 웹 프레임워크를 사용해 크로스 플랫폼 ‘리치’ 클라이언트로 전환할 수 있다. 토리를 개발한 덴젤은 새 데스크톱 프레임워크를 만든 이유를 다음과 같이 설명했다.
 

“토리의 목적은 앱 구축 과정을 간소화하는 것이다. 앱 구축에 관심이 있다면 토리를 마주칠 수밖에 없다. 지금은 맥, 윈도우, 리눅스용 앱 구축을 지원하며, 올여름부터 iOS와 안드로이드까지 지원하는 버전 2.0을 출시할 예정이다.”

토리의 개발 프로세스는 상당히 흥미롭다. 이 프레임워크를 사용하면 기존 파이프라인(예 : 바이트(Vite)로 구축한 스벨트키트(SvelteKit) 등)으로 빌드할 수 있다. 궁극적으로 토리는 자바스크립트 및 HTML로 빌드되는 모든 스택을 처리할 수 있다. 개발 서버를 대상으로 실행되며, 네이티브 데스크톱 클라이언트를 생성한다. 덴젤에 따르면 개발 프로세스는 다음과 같다.

1. 스벨트, 솔리드.js, 리액트, 뷰 등을 사용해 개발 서버를 시작한다.
2. 해당 포트에서 수신 대기하도록 tauri.conf를 구성한다.
3. 토리 개발창을 시작한다.

토리의 코드는 시스템 지향적이다. 러스트로 빌드됐지만 개발자는 자바스크립트로 작성된 API를 사용해서 토리를 다루게 된다. 자바스크립트 개발자에게 토리는 네이티브 데스크톱 애플리케이션을 구축하기 위한 매력적인 접근 방법이다. 비슷한 기능을 제공했던 이전의 프레임워크와 달리, 토리는 자바스크립트를 사용한 멀티플랫폼 개발이라는 약속을 지키고 있다.
 

tRPC : 타입스크립트를 사용한 API 개발

tRPC는 타입스크립트 기반의 API를 구축하는 매력적인 접근 방식이다. 그래프QL(GraphQL) 기술과 동일한 계통이지만 tRPC는 프론트엔드와 백엔드 코드 간의 상호작용을 자동화한다는 점에서 차이가 있다. 또 타입스크립트의 형식 강제 기능에서 파생된 강력한 기능도 있다. 개발자 알렉스 요한슨은 tRPC를 만든 이유를 다음과 같이 설명했다. 
 

“그래프QL의 오랜 팬이지만(물론 지금도 그렇다) 제품을 빌드할 때 그래프QL 때문에 속도가 느려진다는 느낌을 받았다(양쪽 끝에서 타입스크립트를 사용했다). 외부 스키마를 가져오는 대신 그냥 언어 자체를 사용하면 되지 않을까?”

tRPC의 가장 큰 장점은 이미 존재하는 기능을 사용해 전체 스택에서 형식 강제 및 연결을 지원한다는 것이다. 일종의 양방향 형식 추론을 제공하며, 이 과정에서 메타데이터의 중개 또는 API 정의를 소비 코드에 연결하기 위한 추가 빌드 단계가 필요 없다. tRPC의 개념을 이해하면 그 단순함에서 천재성이 느껴진다. 

다음은 tRPC 팀이 스택블리츠(StackBlitz)를 사용해 빌드한 라이브 풀스택 리액트 앱이다. tRPC는 엔드포인트를 제공하며, 매우 단순하기 때문에 필요한 파일도 몇 개에 불과하다. 

스택블리츠 예제에서 노출된 엔드포인트는 IDE가 사용할 수 있는 정보를 활용한다. 예를 들면 프론트엔드에서 result 변수는 맞춤형 tRPC useQuery 후크를 사용해 다음과 같이 채워진다. const result = trpc.greeting.useQuery({ name: 'client' }); 백ㅇ엔드에서는 tRPC 라우터가 이 작업을 처리한다. 이렇게 되면 프론트엔드는 {result.data.text} 등의 변수를 사용할 수 있다. IDE와 타입스크립트 컴파일 단계는 result.data의 형식 정의를 완전히 인식하고 제공할 수 있다. 마찬가지로 tRPC 라우터 엔드포인트는 프론트엔드(예 : 쿼리에 제공된 매개변수)를 인식한다.

전체적으로 tRPC는 풀스택 타입스크립트 애플리케이션을 구축하는 독특하고 매력적인 방법이다. 개발자 커뮤니티의 관심이 높아지고 있으며, 이 기사를 쓰는 현재 깃허브에서 약 2만 개의 별을 받았다. 
 

Bun.js : 자바스크립트를 위한 더 빠른 런타임

Bun.js는 자바스크립트에서 떠오르는 별이다. 단일 패키지로 여러 전선을 공략하기 때문이다. 이 프레임워크를 만든 자레드 섬너에 따르면 Bun.js의 개발 동기와 목표는 다음과 같다. 
 

“Bun.js은 올인원 자바스크립트/타입스크립트 번들러, 트랜스파일러, NPM 패키지 관리자 및 자바스크립트 런타임이다. 자바스크립트를 더 빠르게 실행하고 더 간단하게 작성할 수 있도록 하고자 했다. 여기서 핵심은 생태계 호환성이다. Bun.js은 Node.js를 대체하도록 설계됐다. 코드를 다시 작성할 필요 없이 번을 사용할 수 있다. (아직 작업 중이긴 하지만) 노드의 네이티브 모듈 API(NAPI), fs, path, process 등 많은 Node.js API가 Bun.js에 내장돼 있다.”

Bun.js은 Node.js 및 디노 등의 런타임 대체재이며, webpack, 바이트(Vite), 바벨(Babel) 등 보조 도구의 대안이기도 하다. npm install 또는 yarn install을 대체하는 bun install은 엄청난 실행 속도로 빠르게 유명세를 얻고 있다. Bun의 성능은 코드 대부분을 자바스크립트에서 빼내 하위 수준의 지그(Zig)와 C++로 푸시한 결과다.

Bun.js은 빠른 처리 속도와 올인원 접근 방식을 바탕으로 백엔드 서버 측 자바스크립트를 위한 기존 스택의 매력적인 대안으로 부상하고 있다. 개발자들도 주목하고 있다. 현재까지 깃허브에서 약 4만 개의 별을 받았다.
 

시벳(Civet) : 타입스크립트를 위한 최신 프레임워크

타입스크립트에 커피스크립트(CoffeeScript)의 몇 가지 개념을 섞고, 아울러 몇 가지 추가 기능도 집어넣으면 어떨까? 그렇게 만들어진 것이 타입스크립트 코드를 더 간단하고 강력하게 작성할 수 있도록 해주는 시벳이다. 시벳의 개발자 다니엘 무어는 “시벳을 두고 새로운 커피스크립트라고 하는데, 그 말은 칭찬이다. 커피스크립트는 공식 자바스크립트 사양에 클래스, 구조 분해, async/await, 화살표 함수, rest 매개변수 등을 가져왔다”라고 말했다.

흥미로운 점은 시벳이 타입스크립트를 개선할 뿐만 아니라 JSX도 다룬다는 것이다. JSX 개선을 담당하는 프로젝트 개발자 에릭 디메인은 다음과 같이 말했다.
 

“시벳은 커피스크립트의 여러 개념을 가져와서 발전시켰다. 많은 사람이 원하는 언어 기능(예 : 파이프 연산자, 곧 구현될 패턴 일치 스위치 등)을 추가했으며, 타입스크립트를 기반으로 구축돼 타입스크립트로 트랜스파일되기 때문에 기존 도구와의 호환성이 매우 뛰어나다.”

다음의 예시 1에서 시벳의 간단한 사용례를 볼 수 있다(시벳 문서에서 발췌).
 
시벳이 JSX도 다룬다는 점을 잊으면 안 된다! 개인적으로 항상 JSX의 루프 구문이 불편하다고 느껴왔는데 시벳은 이를 간소화해준다(시벳 요약 문서에서 자세하게 확인할 수 있다).

태비(Tabby) : Node.js를 위한 터미널

개인적으로 콘솔과 셸에 오랜 애정을 품고 있다. 코모도어 64(Commodore 64) 게임에 숨겨진 비밀 세계를 발견하고 콘솔에 BASIC을 입력했던 시절부터 함께했다. 태비는 모든 기능을 갖춘 크로스 플랫폼 터미널로, cmd, powershell, 터미널(Terminal) 등 네이티브 앱뿐만 아니라 SSH(예 : Putty(퍼티)), SFTP(예 : WinSCP 등)도 처리한다. 태비의 개발자 유제니는 새 터미널 애플리케이션을 만든 계기를 다음과 같이 설명했다.
 

“하이퍼(또 다른 일렉트론(Electron) 기반 터미널 앱)를 사용하면서 느낀 불만 그리고 다른 앱이 90년대에 갇혀 있는 데 따른 실망감(예 : 단어 이동 시 Alt-화살표가 작동하지 않는 등 사소한 문제가 계속 쌓이는 문제)으로 인해 태비를 만들었다. 더 나은 경험을 제공한다는 명목으로 관습을 벗어던진 VS 코드(VS Code)도 태비를 만들게 된 자극이 됐다. 원하는 바는 커뮤니티를 키우고, 최종적으로는 일렉트론 대신 토리를 사용하도록 태비를 수정해 크기를 줄이고 성능을 개선하는 것이다.”

태비는 여러 환경에서 일관성을 유지하면서 색상, 특수키 처리, 복사/붙여넣기 등 다양한 편의 기능을 제공한다. 
 

Pixi.js : 자바스크립트의 고성능 그래픽

Pixijs.com을 방문해 배경 이미지 위에서 포인터를 움직일 때 어떤 효과가 나타나는지 관찰해 보자. 매우 고급스럽게 보이는 액체 효과가 나타나는데 성능에 큰 영향을 미치지 않는 것 같다. 비결이 무엇일까? Pixi.js 라이브러리를 사용하는 것이다!

Pixi.js는 웹GL 및 HTML5 캔버스로 인터페이스를 구축하기 위한 고급 API를 제공한다. Pixi.js는 꽤 오래전에 나왔으며, 지금은 성숙하고 안정적인 라이브러리다. 여기서 NPM 패키지를 찾을 수 있다. Pixi.js는 브라우저 내 게임을 위해 개발된 것처럼 보이지만 차트, 시각 효과 등 고성능 그래픽이 필요한 모든 곳에 사용할 수 있다. 3D가 아닌 2D용으로 개발됐다는 점만 유의하면 된다. 토리와 결합하면 픽시를 사용해 데스크톱 플랫폼을 구축할 수도 있다. 온라인 Pixi 플레이그라운드에서 사용해볼 수 있다.
 

PM2 : Node.js를 위한 애플리케이션 모니터링

엄밀히 말하자면 PM2는 자바스크립트 라이브러리가 아니라 자바스크립트로 빌드된 시스템 지향 도구다. 아울러 명령줄에서 정교한 프로세스 모니터링 및 관리를 할 수 있는 애플리케이션 모니터링 도구다. 

유닉스(Unix)에는 bg/fg, nohup, screen 등의 모니터링 및 관리 도구가 있지만 PM2는 이 모든 기능을 사용자 친화적인 패키지로 제공한다. PM2에는 거의 모든 상황에 대응하는 여러 재시작 전략이 있다. 예를 들면 CRON 시간에 따른 시작, 중지 시 자동 재시작, 기준(예 : 메모리 소비 등) 도달 시 시작 등이 있다. 파일 변경 시 재시작을 위한 --watch 플래그도 포함돼 있다. 다양한 Node.js 프로세스 관리 요건을 충족하는 도구가 필요하다면 PM2를 살펴볼 만하다.
editor@itworld.co.kr