2023 자바스크립트 라이징스타

종합 우승: shadcn/ui 🏆

올해 가장 핫한 프로젝트는 Shadcn/ui입니다. React로 작성된 UI 구성 요소 모음으로 Tailwind CSS를 통해 맞춤형 스타일링이 가능합니다.

shadcn/ui는 접근성 및 키보드 상호 작용과 같은 문제에 대한 기본 요소를 제공하는 헤드리스 구성 요소 집합인 Radix 위에 구축 되었습니다. shadcn/ui는 다운로드 가능한 NPM 패키지가 아니라는 점에서 다른 인기 라이브러리(예: MUI, ChakraUI, React Spectrum)와 구별됩니다. 대신 하위 dependency들을 설치하고 추가 수정을 위해 구성 요소 소스 코드를 코드베이스에 직접 복사하는 터미널 명령을 통해 shadcn/ui 구성 요소를 통합합니다.

이 프로젝트의 성공은 Tailwind CSS(전체 20위)의 광범위한 인기, React Server Components와의 호환성 및 우수한 문서의 존재와 밀접한 관련이 있습니다.

모든 새로운 React 프로젝트는 shadcn/ui를 채택한 것 같습니다. 심지어 켄트 C. 도즈가 자신의 최첨단 에픽 스택으로 선택했습니다.

AI와 관련된 또 다른 예: UI 조각의 특징과 외관을 설명하는 사용자 프롬트에서 응용 프로그램 v0.dev은 shadcn/ui 구성 요소로 구성된 JSX 코드를 생성합니다.

마지막으로 Best of JS도 다시 작성한 후 SPA에서 Next.js 앱으로 전환하기 위해 사용했습니다.

이 접근 방식은 이미 다른 프로젝트에 영감을 주었습니다:

• shad-cn/svelte 는 Svelte 프레임워크의 포트입니다.
• Draft UI 은 Radix 대신 React Aria 위에 구축됩니다.

심층 분석은 기사 shadcn/ui의 해부학을 참조하십시오.

2등: Bun

2022년 챔피언 번은 엄청난 기세를 이어갑니다.

Bun은 자바스크립트 및 타입스크립트 응용 프로그램을 실행, 구축, 테스트 및 디버깅하기 위한 빠른 올인원 툴킷을 목표로 합니다.

버전 1 은 9월에 공식 출시되었으며 (그래프에서 피크를 확인하세요!) Bun은 "생산 준비 완료"라고 주장합니다.

문서는 Bun API 및 파일 조작 및 데이터베이스 상호 작용 처리와 같은 일반적인 작업을 가능한 한 빨리 시작할 수 있도록 도와주는 훌륭한 레시피를 제공합니다.

번의 발표는 연말에 있었습니다:

2024년에는 목표가 하나 있습니다. 그 목표는 기본 백엔드 JavaScript 런타임을 Node.js에서 Bun으로 뒤집는것입니다.

대부분의 Node.js 에코 시스템과의 호환성('require'를 통한 좋은 이전 CommonJS 가져오기 지원 포함)과 주요 풀 스택 프레임워크(Next.js, Nuxt, Astro...)의 지원이 가능합니다!

React

React는 2023년에도 자바스크립트 생태계에서 선두주자의 위치를 유지하고 있으며, 이는 2021년과 2022년에도 지속되고 있는 추세입니다.

10주년을 맞이한 리액트는 다큐멘터리를 통해서 그 인기에 대한 비결을 알려주고 있습니다!

그러나 React에 회의론자가 없는 것은 아닙니다. 일부에서는 React를 과거의 유물로 보기도 하며, 이는 이 기사에서 전문적으로 탐구한 감정이며, 또한 대안적 해결책을 탐구합니다. 반대로 지지자들은 React의 놀라운 적응력과 재창조 능력을 높게 평가합니다.

한 가지 쟁점은 Solid 또는 Preact와 같은 라이브러리에서 사용하는 반응성 처리 메커니즘인 "signal"의 부재를 중심으로 다루지만, 리액트 유저들은 데이터 흐름이 제공하는 예측 가능성을 높이 평가합니다.

트위터에서 Parcel의 제작자인 Devon Govett은 신호에 대해 다음과 같이 밝혔습니다:

상태 함수로서 UI의 단순성은 업데이트가 예측 불가능하게 흘러갈 때 상실됩니다.

시그널에 대해 더 알고 싶다면 시그널의 진화에서 포괄적인 탐구를 읽어주시기 바랍니다.

htmx

htmx에는 HTML 페이지에 상호작용성을 제공하기 위해 다른 접근 방식을 취하는 라이브러리가 있습니다. 개발자는 여러 줄의 자바스크립트 코드를 작성하는 대신 특정 속성을 가진 HTML을 향상시켜 실시간 상호작용성과 동적 업데이트를 가능하게 합니다.

클라이언트에서 JSON을 처리하는 대신 HTML의 일부 블록을 서버에 전송하도록 요청하는 방식이 추세의 일부이기 때문에 파일 크기가 작고 기존 서버 측 프레임워크와 원활하게 통합된다는 점에서 찬사를 받았습니다.

Alpine.js는 같은 공간의 "태깅 라이브러리"에서 인기 있는 솔루션입니다(올해 13위).

Svelte

Svelte의 인기는 계속 증가하고 있고 종종 React의 현대적인 대안으로 여겨집니다. 상태 반응성을 다룰 때 "pain 포인트"를 일부 해결하기 위해 runes를 도입하는 등 "프로젝트 역사상 가장 기대되는 릴리스"인 Svelte 5는 큰 변화를 불러들이고 있습니다. 이 짧은 영상에는 룬에 의해 해결된 문제를 잘 설명합니다.

Svelte는 올해에 수 많은 논쟁을 일으켰습니다(예: Hacker News). Svelte 팀은 타입스크립트와 관련된 추가적인 복잡성과 단점을 방지하면서도 타입스크립트의 장점을 제공하기 위해 타입스크립트 대신 JSDoc 주석이 포함된 자바스크립트를 사용하기로 결정했습니다.

Other frameworks updates

• Million v3은 React 컴포넌트를 초기 자바스크립트의 속도로 실행할 수 있도록 지원하는 가벼운 라이브러리입니다.
• Angular 17은 대폭적인 성능 향상, 새로워진 문서화, 새로운 브랜딩을(로고에 적합한 색상 포함) 소개합니다.
• Qwik이 v1에 도달한 것은 지난 4월 입니다. 제로 JS(initially)를 제공하는 동시에 즉각적으로 상호작용하는 HTML을 제공해 "재사용 가능한" 앱을 구축하는 프레임워크 입니다.

2023년에는 React Server Component의 등장으로 리액트는 세 번째 부흥기를 맞이했습니다.

React 코어 팀과 Vercel은 협력하여 처음으로 안정적인 Next.js 13.4 App Router를 배포했습니다. 흥미진진한 혁신을 주도하고 그에 따른 리소스를 배포했음에도 불구하고, Vercel은 React 코어 팀과의 특권적 관계와 실험에 대한 조기 접근으로 상당한 비판을 받았습니다. 2023년 초, Next.js 문서에서 새로운 리액트 기능이 먼저 문서화되는 것을 흔히 볼 수 있었습니다. 커뮤니티는 fetch()' API의 extension에서와 같은 특정 설계 결정에 감사하지 않았습니다(현재 백트래킹 중). App Router의 안정성과 개발 서버의 성능에 대한 불만도 흔하게 볼 수 있었습니다. 그럼에도 불구하고 React Server Component 얼리 어답터들은 번들 크기가 더 작고 코드가 크게 간소화되는 등 많은 발전들도 이야기 하고 있습니다.

React 팀은 새로운 실험적 기능에 대한 롤아웃 전략을 분명히 했습니다. 프레임워크가 카나리 버전을 채택하는 것에 대해 큰 단점은 없으며, 이 버전의 변경 사항은 문서화됩니다. 훌륭한 React 문서 업데이트, 최신 API(useFormState, use server)로 한 해를 마무리했습니다.

또한 Next.js 14에서 안정적으로 구현된 새로운 React 코어 기능인 Server Actions의 등장도 있었습니다. Server Actions는 Remix의 철학과 유사하게 진보적 향상을 염두에 두고 설계되었습니다.

2024년에는 다른 프레임워크에서 React Server Component를 채택하는 것을 볼 수 있습니다:

• Remix가 로드맵에 React Server Component를 추가 했습니다.
• Expo의 서버측 기능 소개 및 React Server Component 지원 계획 공개
• Redwood는 React Server Components에 올인을 했습나다.
• Waku는 새로운 React Server Component를 지원하는 미니멀 React 프레임워크 입니다.
• Docusaurus는 정적 React Server Component를 빌드 타임에 렌더링하는 계획을 가지고 있습니다.

곧 배포될 React 19을 간절히 기다리고 있습니다.

Vue 2가 2023년 말 업데이트 종료를 발표함에 따라 올해는 Vue와 그 커뮤니티에 전환점이 될 것으로 예상되며, 많은 사람들이 버전 3으로 업그레이드하기 위한 여정을 시작했습니다.

이와 관련하여, 마이그레이션을 돕기 위해 노력했고 경쟁자들을 따라잡아 계속해서 발전했습니다. 그리고 결국은 훌륭한 결과를 보여주었습니다! Nuxt 3는 현재 Nuxt 2보다 더 많은 다운로드 수를 가지고 있습니다. Vuetify 및 PrimeVue, 와 같은 UI 프레임워크는 대규모 애플리케이션을 구축하는 데 도움을 줄 준비가 되어 있습니다. VueUse, Pinia, 또는 심지어 TresJS와 같은 라이브러리는 우리 모두에게 더 나은 권한을 부여하기 위해 계속 성장하고 강화했습니다.

2022년과 마찬가지로 개발자 환경은 여전히 최우선 과제였습니다. Vue 3.3은 <script setup>에 대한 향상된 타입스크립트 지원을 도입했습니다. Nuxt는 8개의 마이너 버전을 공개하고(Nuxt DevTools) 앱을 더 잘 이해하고 더 빠르게 개발할 수 있도록 도와주는 창의적이고 통찰력 있는 UI를 공개했습니다.

Evan이 말했듯이 2024년은 Vue에게 흥미로운 해가 될 것입니다. Vue 3.4가 곧 배포될 예정이며 Vapor mode는 현재 오픈소스로 잘 진행되고 있습니다. 이 모든 것이 더 많은 성능 향상과 커뮤니티 혁신을 위해 발전하고 있습니다.

올해도 Next.js는 백엔드/풀스택 부문에서 선두를 달리고 있는 프로젝트입니다.

버전 14는 서버 작업을 개선하는 데 초점을 맞추고 미리보기 렌더링 모드를 도입합니다.

React Server Component를 사용하면 개발자는 코드를 대폭 간소화할 수 있는 새로운 패러다임으로 웹 애플리케이션을 구축할 수 있습니다. '비동기'로 만들어진 구성 요소에서 데이터를 직접 가져오는 것과 서버 작업에 양식을 바인딩하여 데이터를 변형하는 것입니다.

구성 요소에서 직접 SQL 요청을 하는 방법을 소개하는 이 프레젠테이션에 대해 많은 이야기가 있었지만, 사람들이 핵심을 놓쳤을 수도 있습니다. React Server Component는 지루한 배선 없이 애플리케이션 어디에서나 삭제할 수 있는 자체 contained 구성 요소처럼 동작할 수 있습니다. 비디오는 RSC가 가능하게 하는 새로운 모델을 구축하는 데 도움이 되며, 서버와 클라이언트 구성 요소가 원활하게 작동하는 것을 보여줍니다.

Astro의 순위가 계속 상승합니다. 원래 개념 외에도 자바스크립트 없이 실행되는 초고속 정적 사이트를 생성하고 원하는 UI 프레임워크를 사용하여 상호 작용을 추가하는 페이지를 동적으로 생성하는 데 사용할 수 있습니다.

저는 '.astro' 파일의 단순한 템플릿 시스템(JSX에 매우 가깝습니다)과 훌륭한 DX에서(특히 CLI에서의 DX) 좋은 인상을 받았습니다.

버전 4는 개발을 위한 새로운 도구 모음, 자동 i18n 라우팅 및 UX 향상을 위한 새로운 View Transition API를 도입합니다.

Bun도 bundler이므로 올해는 "빌드 도구" 카테고리에 포함했습니다.

Vite는 Astro, Nuxt, Remix, SolidStart, SvelteKit와 같은 메타 프레임워크를 지원하는 가장 인기 있는 다용도 번들러입니다.

11월에 출시된 버전 5는 rollup 4 위에 구축되어 있어 성능이 향상되었습니다.

Evan You의 발표에서 그는 Vite에 통합될 Rollup in Rust의 포트를 롤다운하기 위한 작업중에 있습니다. Vite의 미래는 밝습니다!

세 번째로, Biome의 등장은 올해의 이야기 중 하나입니다. 웹 툴링(컴파일링, 린팅, 포맷, 번들링, 테스트)을 통합하는 것을 목표로 했던 야심찬 프로젝트인 Rome과 관련이 있습니다. 프로젝트의 배후에 있던 회사는 실패했고 프로젝트는 올해 중단되었습니다.

다행히 이 프로젝트는 분기되어 Biome이라는 이름으로 다시 태어났습니다.

지난 11월, 바이옴은 Prettier Challenge에서 우승했습니다. "95% 이상의 Pretty's test를 통과할 수 있는 Rust-powered 코드 포맷터"를 목표로, 2024년에는 더 많은 바이옴의 채택을 기대할 수 있습니다.

Rust를 베이스로 한 Oxc와 Rspack은 바이트댄스 팀에서 만들어진 새로운 플레이어들입니다. Rspack은(는) 웹팩과 호환성을 제공하는 동시에 타의 추종을 불허하는 성능을 제공합니다. 웹팩을 사용하는 프로젝트의 수를 고려할 때 웹팩을 순위에 올리지 않는 것은 이상한 일입니다!

2023년 모바일 공간은 웹과 네이티브 개발 경험을 통합하는 방향으로 상당한 진전을 이루었습니다. 이는 코드 재사용을 극대화하고 웹 개발자의 접근성을 높이는 목표를 공유하는 상위 프로젝트 Expo(1위), Tamagui(3위), Nativewind(6위)에서 분명히 알 수 있습니다.

Tamagui(3위), Nativewind(6위), React Native Paper(7위)가 선두를 달리고 있는 React Native에서 더 나은 스타일링 솔루션을 향한 분명한 추세가 있습니다. 이것은 shadcn-ui가 전체 인기에서 1위를 차지했던 웹 커뮤니티를 반영합니다. 이 움직임이 2024년에도 지속될지 의심스럽습니다.

2022년 React 팀의 공식 권장 사항은 Create React App과 같은 보일러 플레이트 솔루션에서 Remix 및 Next.js와 같은 프레임워크 우선 솔루션으로 전환되었습니다. 1년 후 React Native 생태계에서도 비슷한 변화가 나타났습니다. 많은 프레임워크 우선 속성을 제공하는 Expo, Tamagui 및 Ignite와 같은 도구는 모두 인기가 상승하는 추세를 보였습니다. 이러한 변화는 기본적으로 프레임워크가 없는 React Native에서 더 많은 의견을 제시하는 솔루션으로 이동하고 있으며, 이는 모바일 개발 패러다임의 진화를 예고합니다. 이러한 추세는 2024년에도 계속될 것으로 예상합니다.

React Native의 우세는 이 라이브러리를 기반으로 한 상위 10개 프로젝트 중 7개에서 뚜렷합니다. 그러나 이 목록에 웹뷰 기반 프로젝트가 3개나 존재한다는 것은 웹사이트를 그대로 앱스토어에 배포하는 데 여전히 관심이 있음을 시사합니다. 아마도 2024년은 이 두 가지 접근 방식이 융합되기 시작하는 해가 될 것입니다.

전반적으로 모바일 개발에 있어 환상적인 한 해였습니다. 2024년에는 React Native를 위한 솔루션 스타일링, 더 많은 렌더링 패턴(React Native에 있는 React 서버 구성 요소), AI 기반 앱을 지원하기 위한 더 나은 서버 통합 및 일부 흥미로운 비전 OS 프로젝트에 대한 지속적인 관심이 있을 것으로 예상합니다.