JavaScript 라이징스타 2021

상위 3위

2021년 가장 유행했던 프로젝트는 zx입니다, Google에서 새롭게 만든 도구로 JavaScript나 TypeScript로 간단하게 커맨드 라인 스크립트를 적을 수 있습니다.

기본적인 사용 방법은 코드에 bash 커맨드 (ls, cat, git 등등... 이런 것들!)을 넣어 쓸 수 있습니다. JavaSciprt 템플릿 리터럴를 이용해서 await 할 수도 있습니다.

또한, 유명한 패키지도 여러개 포함되어 있습니다.

• node-fetch 브라우저 feach API와 같은 것이 가능합니다
• fs-extra 파일 시스템 조작이 가능합니다.
• globby 유저 친화적인 패턴매칭이 가능한 glob입니다.

2위는 Vite입니다. esbuild 컴파일러를 사용하였으며, 우수한 성능을 보이는 빌드 도구입니다. 애초에 Vue.js 전용으로 만들어졌지만, 지금은 React, Svelte, Lit 등 주요한 프레임워크에도 사용할 수 있습니다.

3위는 Next.js입니다. React 생태계의 "메타 프레임워크"에서 선도하는 위치를 유지중입니다.

Tauri

5위 Tauri는 Web 기술을 사용해 데스크탑 애플리케이션을 만드는 도구입니다.

Electron와 달리, Rust로 적혀있어 실행할 때 Node.js가 필요하지 않은 것이 특징입니다. 5월에 버전 1.0 베타가 출시됐습니다.

볼만한 것들

상위 10위에 포함되어있지 않지만, Astro는 주목받은 프로젝트 중 하나입니다. 더 적은 JavaScript로 더 빠른 로딩을 실현할 수 있는 도구입니다.

개념은 SSG에 가깝지만, Astro는 "islands"라는 것으로 동적인 부분을 페이지에 포함할 수 있는 것이 특징입니다. 또한, 클라이언트에서 동적 컴포넌트를 렌더링할 때, 다양한 전략을 선택할 수 있습니다.

• 페이지가 읽힐 때
• 우선순위가 낮은 컴포넌트인 경우, idle 상태일 때(추적 고려)
• Intersection Observer API를 사용하여 감시

그리고 Astro 최대 특징은 React, Vue.js, Svelte 등 어떤 프레임워크와도 조합할 수 있다는 것입니다.

JavaScript Rising Stars 가 시작된 이후로 처음으로 React가 Vue를 밀어내고, 프레임워크의 정점에 섰습니다. 하지만, Vue는 버전2(Vue.js)와 버전3(vue-next) 2개의 저장소로 나눠져 있기에 실질적으로 Vue가 1위라 보는게 좋을 것입니다.

큰 변화로는, Svelte가 Angular를 밀어내었다는 것입니다.

점점 더 많은 도구나 컴포넌트가 타겟 프레임워크인 Svelte를 포함하고 있습니다. (vite 같이)

또 하나의 뉴스는 Svelte 개발자인 Rich Harris씨가, Next.js를 만든 Vercel에 입사한 것입니다. Svelte도 Next.js와 같은 애플리케이션 구축을 위한 메타 프레임워크 SvelteKit를 가지고 있습니다.

5위에 있는 Solid는 React 대신 선택할 수 있는 무척 흥미로운 프로젝트입니다. 컴포넌트는 React 같이 JSX으로 쓰지만, Virtual DOM에는 의존하지 않습니다.

Solid는 Mitosis에도 영향을 받았는데, Mitosis는 컴포넌트를 다양한 프레임워크로 컴파일할 수 있도록 하는 야심찬 프로젝트입니다.

주요한 UI 프레임워크들은 라우팅, 서버측 렌더링, SSG, 프로덕션 최적화 빌드 등의 기능을 제공하는 현대적이고, 확장가능한 애플리케이션을 구축하기 위한 자체 "메타 프레임워크"를 가지고 있습니다.

• React에는 이 분야의 선구자라 할 수 있는 Next.js가 있으며, 이 범주의 승자이기도 합니다.
• Vue에는 Nuxt가 있지만, 버전2와 버전3가 다릅니다.
• Svelte에는 SvelteKit가 있습니다.

올해 등장한 Remix는 React를 구축하기 위한 풀스택 프레임워크입니다. 이 프로젝트는 React Router를 제작한 사람의 새로운 작품으로 10월까지 유료 후원자만 이용 가능했습니다.

공개로 전환한 후에도 많은 지지를 펀딩으로 받아 300만 달러의 자본을 확보했습니다. 이 프로젝트의 모토는 "Web의 기초, 모던한 UX"이며, API는 되도록 Web표준에 맞춥니다.

제가 마음에 들었던 2가지 예를 소개해 드리려합니다.

폼을 보내기 위해서는... 폼을 보내면 된다. 당연한 이야기입니다만, 개발자는 폼을 보낼 때 폼이 보내지는 것을 피하기 위해서 event.preventDefault()를 적는 것이 관습입니다. 거기에 JavaScript가 유효하지 않은 환경에서도 폼을 보낼 수 있는 것이 당연히 더 좋을 것입니다. Remix는 우리들이 당연하다 생각하는 것에 도전해, 사용자와 개발자, 양측 모두의 경험을 중시한 새로운 접근으로 오래된 원칙을 "remix" 하고 있습니다.

또한 화면에 많은 스피너를 보여주는 HTTP 호출 폭포대신 주어진 페이지의 모든 컴포넌트가 필요로 하는 데이터를 효율적으로 로드할 수 있어 중첩된 경로를 상당히 잘 처리합니다.

2위 Nest는 특정 프레임워크에 묶여있지 않은 전통적인 서버사이드 Node.js 프레임워크의 왕자입니다.

3위 Strapi는 헤드리스 CMS의 왕입니다. 헤드리스 CMS는 데이터를 관리하기 위한 기능인 대시보드와 데이터를 제공하는 API 만을 제공하는 애플리케이션입니다. Strapi 최신 버전에서는 React 컴포넌트로 구축된 디자인 시스템을 제공하고 있습니다.

Guest Writer: Sébastien Lorber

React의 얼리어답터이며, Facebook의 Docusaurus에서 일하고 있습니다.

React와 ReactNative 관련한 주간 뉴스레터 This Week in React를 발행하고 있습니다.

2021년은 기존의 경향이 강화된 해였습니다.

네이티브 ES modules를 선택하는 일이 계속되었습니다, Vite가(snowpack보다 빠름) 널리 선택되었습니다, Node.js 에코시스템에서도 Vitest 같은 ES modules 프레임워크가 만들어졌습니다만 그리 순탄치는 않습니다. TypeSciprt에서는 ES modules 대응을 연기했다할 정도입니다.

JavaScript 이외 언어로 만들어진 프론트엔드 도구가 늘어가고 있습니다, 이들은 주로 성능을 위함입니다.

Lee Robinson 씨가 Rust는 JavaScript 인프라의 미래다 글을 썼는데, Rust의 흥미로운 점은 우수한 성능과 JavaScript와 친화성입니다. NAPI-RS은 serialization(직렬화) 없이 JavaScript와 Rust 간의 통신을 할 수 있도록하며, Next.js는 SWC에 걸었다 할 정도입니다.

Parcel2는 Rust 컴파일러를 얹어 출시했습니다.

Rome도 Rust로 다시 쓴다했습니다만, 창립멤버중 하나인 Jamie Kyle 씨가 아무 정보도 없이 회사를 떠났습니다.

Rust는 비JS 언어의 대표주자입니다만, 결코 유일한 것은 아닙니다. 우수한 성능을 발휘할 수 있는 언어는 다른 언어도 있으며, Bun은 Zig로 쓰여져 있고. Turborepo, esbuild는 Go로 쓰여져있습니다.

그러고보니 Evan Wallace 씨가 Figma를 떠난것 은, esbuild 개발에 시간을 더 할애하기 위함일 수도 있습니다.

monorepo 분야에는 Lerna가 가장 많이 사용중입니다만, 꽤 보수되지 않고 있습니다. 다음을 노려볼 만한 것으로, 빌드시간을 크게 단축해주는 모노레포 도구 Nx가 급성장중입니다. 거기에 경쟁자라 볼 수 있는 Turborepo가 Vercel에 인수되어 더욱 활발해 질 것입니다.

Guest Writer: Anthony Fu

Vue.js, Vite, Nuxt 팀의 코어 개발자이자, VueUse와 Slidev의 제작자입니다.

Vue3가 정식으로 출시되고 1년이 지났으며, 많은 혁신적 기술이 나와 에코시스템이 급격히 성장했습니다.

Vue3에서 <script setup> 같은 새로운 문법은 컴포넌트의 개발 체험을 다른 수준으로 올려놓았습니다. VS Code 확장인 Volar은, Vue에 TypeScript 지원을 제공하며, 새로운 Composition API로 구축된 새로운 상태 관리 도구 Pinia는 Vuex의 후계자입니다.

Vue의 기본 도구가 Vite가 되어, Nuxt 3, Quasar, VitePress 같이 많은 프레임워크도 기본적으로 Vite를 사용하게 되었습니다. 이로 인해서 개발자 경험은 크게 개선되어, 혁신의 문이 열렸습니다.

또한 커뮤니티는 Vue2의 DX를 Vue3에 맞춰 마이그레이션를 부드럽게 성공할 수 있도록 큰 노력을 기울였습니다. 2021년은 Vue 개발자에게 있어, 애플리케이션의 DX와 성능에 큰 개선이 있었던 멋진 해였습니다. 2022년에는 어떤 일이 일어나는지, 벌써부터 기대됩니다.

Guest Writer: Manuel Vila

JS/TS 엔지니어이자, OSS 기여자. Layr와 CodebaseShow의 제작자입니다.

곧 React18이 출시됩니다. 이미 RC판에서 사용해보는 것도 가능하며, 더 적은 렌더링을 위한 Automatic batching이나 (SSR에서)Suspense 같이 바로 사용할 수 있는 개선 점도 몇 있습니다.

React18은 대망의 Concurrent Render가 구현되었으며, 파괴적으로 변환하지 않는 Suspense가 업데이트되었습니다, startTransition 같은 일부 기능은 18.0 출시 시점부터 사용할 수 있을 예정입니다.

하지만, 작년 Rising Star에 소개했던 Server Components등은 조금 더 기다릴 필요가 있어보입니다.

React는 브라우저에서도, 서버에서도 진화가 계속되어, React Native의 다양한 플랫폼 구상도 진행중에 있어, 점점 더 두루누리(ubiquitous)같은 존재가 되려합니다.