2024년 ‘자바스크립트 트렌드’ 돌아보기

자바스크립트는 현재 웹, 모바일 앱, 서버 등 다양한 분야에서 활발하게 쓰이고 있는 언어다. 전 세계적으로 많이 쓰이는 만큼 개발을 할 때 필요한 도구들도 매해 새롭게 생겨나고 있으며, 유행이 빠르게 바뀌는 편에 속하기도 한다. 이번 글에서는 ‘Rising Stars’라는 자바스크립트 트렌드와 생태계 설문조사 리포트를 바탕으로 2024년의 자바스크립트 트렌드를 살펴보려고 한다. 이를 통해 2025년 자바스크립트를 사용하는 개발자라면 어떠한 트렌드에 주목해야 하는지 인사이트도 도출해 보려고 한다.

2024 Rising Stars 자바스크립트 트렌드

Rising Stars 리포트는 깃허브에 추가된 스타 숫자로 트렌드를 분석했다. 자바스크립트 언어가 일반적으로 웹 플랫폼 안에서 주로 사용되기에, 이러한 환경에 사용되는 도구들을 주로 다룬다. 

모든 분야를 통틀어 2024년에 가장 많은 스타를 받은 도구는 shadcn/ui다.

shadcn/ui는 복사, 붙여넣기 해서 우리가 만드는 애플리케이션에 사용할 수 있는 디자인된 컴포넌트다. 언뜻 보기엔 컴포넌트 라이브러리처럼 보이지만, 공식 문서의 설명은 다음과 같다.

“This is NOT a component library. It’s a collection of re-usable components that you can copy and paste into your apps.”

이것(shadcn/ui)은 컴포넌트 라이브러리가 아니다. 이것은 앱에 복사, 붙여넣기 할 수 있는 재사용 가능한 컴포넌트들의 묶음이다. _shadcn/ui 공식 문서

shadcn/ui는 2023년에 이어서 2024년에도 가장 핫한 프로젝트로 선정되었다. 여러 이유가 있겠지만, 가장 큰 이유 중 하나는 커스텀 컴포넌트로서 가져가야 할 두 가지 특징인 1) 기본 기능 2) 확장 가능성을 균형 있게 가져갈 수 있어서일 것이다. 특히 컴포넌트를 import하여 사용하는 일반적인 컴포넌트 라이브러리와 달리, shadcn/ui는 컴포넌트 코드를 온전히 개발자가 소유할 수 있다.

2024년 shadcn/ui 에는 몇 가지 주요한 기능이 추가가 되었다. 첫 번째로 Recharts 라이브러리 기반으로 차트 컴포넌트가 추가됐다. 그리고 CSS 변수를 우리의 코드베이스에서 커스텀해서 생성할 수 있는 테마도 있다. 그 외에도 블록이라는 레이아웃 묶음과 반응형 레이아웃을 대응한 사이드바 등의 컴포넌트가 추가되었음을 알 수 있다.

또한 shadcn/ui는 단순하게 컴포넌트를 제공하는 것뿐만 아니라, 이 생태계에도 기여하고 있는 것으로 보인다. shadcn이라는 명령어는 shadcn/ui뿐만 아니라, 어떤 레지스트리에서도 컴포넌트를 import할 수 있어서, 여러 컴포넌트 라이브러리가 shadcn을 기반으로 만들어졌다. 대표적으로 Motion-Primitives와 Magic UI가 있다. 그 외에도 AI로 컴포넌트를 자동으로 만들어주는 v0 서비스도 shadcn/ui를 기반으로 만들어지는데, 이 역시 프로젝트의 유행에 크게 한몫을 한 것으로 보인다.

모든 분야를 통틀어서 1위는 shadcn/ui, 2위는 시각화 도구인 Excalidraw, 3위는 마치 노션과 미로를 혼합한 것 같은 프로젝트 관리 도구인 AFFiNE이다.

1) 프론트엔드 프레임워크

프론트엔드 분야에서 2024년 가장 많은 깃허브 스타를 받은 프로젝트는 htmx이다.

많은 사람들이 htmx를 프레임워크보다는 라이브러리로 생각한다. 이 경계가 모호하지만 htmx가 서버 중심의 아키텍처를 지원하고, 클라이언트 로직을 최소화하는 방향을 지향한다는 점에서 프레임워크로 보는 시각도 있다. htmx는 AJAX(Asynchronous Javascript And XML), CSS 변환, 웹소켓, SSE(Server Sent Event) 등을 HTML에서 직접 속성을 통해 접근할 수 있게 함으로써, 현대적인 유저 인터페이스를 간결하고 강력하게 구현할 수 있다. 의존성도 없고, min 기준 번들 사이즈도 14KB 정도로 굉장히 작은 편에 속한다.

최근 서버 컴포넌트와 같이 서버 중심의 연산을 처리하는 방식이 주목을 받고 있으며, 기존에 Django, Rails 등의 백엔드 프레임워크를 사용하는 프로젝트의 경우, htmx를 사용하면 쉽게 통합할 수 있을 것으로 보인다.

다만 프론트엔드 로직이 복잡한 대규모 프로젝트의 경우, 상태 관리나 UI 컴포넌트 로직을 전부 htmx로 대체할 순 없기 때문에 적합하지 않을 수도 있다. React, Vue 등의 라이브러리에 비해 아직 상대적으로 커뮤니티와 생태계가 작은 것도 한계로 느껴질 수 있는 부분이다.

htmx에 이어서 React, Svelte, Vue.js, Angular가 2~5위를 차지했다. 특별히 새로운 프레임워크나 라이브러리는 없어 보인다. React의 경우 3년 만에 19로 메이저 버전이 업데이트되면서, 여러 변경 사항들이 생겼다. 새로운 컴파일러의 등장과 서버 컴포넌트의 정식 도입이 대표적이다.

2) 백엔드/풀스택

이제는 자바스크립트로 프론트엔드 뿐만 아니라 백엔드까지 개발하는 사례가 점점 늘어나고 있다. 2024년 백엔드/풀스택 분야에서 가장 트렌디한 프로젝트는 Payload였다. 

Payload는 Next.js 애플리케이션 위에서 직접 사용할 수 있는 오픈소스 CMS 프로젝트이다. Next.js 애플리케이션에서 어드민 패널을 구성할 수 있는데, 기존에 앱에서 사용하는 데이터나 리액트 컴포넌트 등을 그대로 확장해 사용할 수 있다는 장점이 있다. 원래 MongoDB를 위해서 시작된 프로젝트이지만, 이제는 Drizzle ORM 통합으로 Postgres와 SQLite까지 지원해 커버리지가 늘어났다. 자체적인 ORM도 제공하는데, 자료 구조 설정과 접근 권한 설정도 가능하며 벌크 업로드나 미디어 파일도 다룰 수 있다.

이 분야에서 2위는 Next.js로 현시점 가장 많이 사용되는 웹 풀스택 프레임워크다. 최근 버전 15가 배포되었고, 리액트 19 버전 지원과 여러 퍼포먼스 개선 등의 업데이트가 이루어졌다. Turbopack을 빌드 도구로 온전히 적용하면서 개발자 경험도 많이 개선됐다.

백엔드 분야에서는 새로운 프로젝트도 많이 등장했는데, 대표적으로 3위에 오른 Hono다. 기존에 Express의 대체재로 보이는 이 프로젝트는 여러 개의 자바스크립트 런타임에서 실행이 될 수 있는 웹 서버다. Node.js는 물론이고 Deno, Bun, 그리고 서버리스 환경인 Lambda와 Cloudflare Workers에서도 동작한다. Hono를 시작한 Yusuke Wada의 글을 읽어보면 웹 기준(Web Standards) API를 따르고, 외부 라이브러리에 의존하지 않게 만들어 한 번 작성하고 여러 런타임에서 실행시키는 효율이 큰 장점이다.

3) 도구

2024년 한 해 동안 자바스크립트 도구는 많은 혁신과 개선이 이루어졌다. 많은 프로젝트들이 성숙해졌고 성장 동력을 얻은 것으로 보인다. 1위는 놀랍게도 ESLint와 Prettier의 대체자인 Biome이 차지했다. 공식 홈페이지 벤치마크에 따르면, Biome이 Prettier보다 코드 포매팅을 최대 35배까지 빠르게 해주는 것으로 나타났다. 또한 Prettier와의 호환성도 97%까지 도달했다고 공식 문서에 나와 있다.

다만 Biome의 경우, 아직은 CSS, HTML, Vue, GraphQL, Markdown 등 지원하지 않는 언어나 환경이 있다는 점이 한계로 꼽힌다. React를 사용하는 개발자라면 큰 문제는 없겠지만, 다른 환경에서 개발하는 개발자라면, 본인의 환경에서 사용하는 언어가 지원되는지 미리 체크하는 것이 좋다.

2위는 Bun이 차지했다. Bun은 자바스크립트를 개발하고, 테스트하고, 실행하고, 번들링할 수 있는 올인원 자바스크립트 런타임이다. Node.js, npm, jest 등과 호환되면서 작년 한 해 많은 인기를 누린 프로젝트다. 자바스크립트 런타임은 Node.js가 현시점에서 압도적인 1위인데, Bun과 Deno 같은 다른 런타임이 과연 충분한 대체재가 될 수 있을지에 대한 궁금증은 있다. 아직까지 Bun과 Deno를 엔터프라이즈 레벨에서 쓰는 곳을 많이 보진 못했다.

3위는 Vite다. 많은 개발자들이 Vite를 사랑하고, 생태계도 계속해서 성장하고 있다. 이름의 어원처럼 빠른 성능을 가장 강력한 장점으로 가지고 있는 웹 빌드 도구다. 개발 서버에서는 빠른 HMR(Hot Module Replacement)를 포함해, 개발자들을 위한 풍부한 기능을 제공한다. 빌드 명령 시에는 Rollup 기반으로 번들링을 해서 정적 파일을 최적화해 준다.

4) 상태 관리 라이브러리

자바스크립트 상태 관리 라이브러리는 기존에 많이 쓰이던 프로젝트와 새롭게 치고 올라온 프로젝트들이 골고루 순위권에 있는 모습을 볼 수 있었다. 2024년 가장 많은 깃허브 스타를 받은 라이브러리는 Zustand다.

Zustand는 작고 빠르고 확장이 가능하다. 그들의 표현을 빌리면 발가벗겨진 뼈(bare-bone) 같은 상태 관리 라이브러리다. Zustand는 단방향성(unidirectional)의 특성을 가지고 있으며, 상태를 우리가 정의하고 액션으로 그 상태를 변경할 수 있다. 비슷한 철학의 상태 관리 라이브러리로는 Pinia, Redux, Boardgame 등이 있다. 과거 Redux가 가장 많이 사랑받던 상태 관리 라이브러리였던걸 보면, 이렇게 단일 상태를 관리하는 방식이 여전히 많은 개발자들에게 사랑받는 방식임을 알 수 있다.

2위는 Jotai로 원자(atoms)로 상태를 정의하고, 다른 원자에 의존하는 계산된 원자를 생성하는 방식을 따르는 라이브러리다. 이러한 접근을 원자적 접근(atomic approach)이라고 하는데, 비슷한 성향의 도구로는 Nono Stores, Legend-State, Recoil 등이 있다. 이렇게 원자에 의존된 상태를 바탕으로 렌더링을 진행하면, 기존에 컨텍스트에서 갖고 있던 추가적인 리렌더링 이슈를 해결하고, 메모이제이션의 필요를 없앨 수 있다.

3위는 XState다. XState는 이벤트 기반(event-driven) 프로그래밍을 사용한다. 이벤트 드리븐이란 하나의 상태에서 다른 상태로 변화가 이벤트에 의해 유발되는 방식을 말한다. 이 동작은 액터 모델(Actor Model)과 상태 머신(state machine)에 의해서 동작하는데, 상태를 내부적으로 캡슐화 한 것이 액터다. 이 액터들은 서로 이벤트를 주고받으면서 상호작용을 한다. 모든 상태와 이벤트, 변화를 캡처할 수 있는 장점을 가진 방식을 상태 머신이라고 한다. 기존에 많이 사용하던 Zustand, Jotai 등의 상태 관리 철학과는 다른 방식으로 동작하기에 주목할 필요가 있다.

5) AI

지난 한 해 AI와 대규모 언어 모델(LLM)은 개발자들이 일하는 방식을 완전히 바꾸어 놓았다. 당연히 이와 관련된 프로젝트들도 많은 주목을 받았다.

AI 분야에서 1위를 한 프로젝트는 n8n이다. n8n은 노코드 자동화 플랫폼으로 업무 자동화를 AI의 도움을 받아 손쉽게 할 수 있어, 많은 인기를 끌었다. ITOps, SecOps, DevOps, Sales 등 개발 직군뿐만 아니라, 오히려 운영팀에 더 필요한 서비스로 보인다. 이러한 AI 기능을 전문적인 지식 없이 로컬에서 돌릴 수 있고, 환경을 도커 기반으로 구축할 수 있는 점이 큰 장점이다.

2위는 드래그 앤 드롭으로 UI를 만들 수 있는 자동화 도구 Flowise가 차지했다. Flowise는 LangChain 위에서 만들어졌고, 업무 흐름을 로컬 LLM 기반으로 만들어 준다. 1위와 2위 프로젝트가 둘 다 업무 자동화와 관련된 프로젝트라는 점이 흥미롭다. 개발을 몰라도, AI 지식이 없어도, 그냥 블록을 고르고 드래그 앤 드롭으로 마치 그림을 그리듯이 요소를 추가하고 연결할 수 있다. 이러한 점이 사용자들에게 편의를 제공하고, 재미 요소를 준다는 점에서 매력적이다.

3위는 bolt.new로 풀스택 애플리케이션을 프롬프트 명령으로 만들 수 있는 프로젝트다. Next.js, Remix, Astro 등 많이 사용하는 풀스택 프레임워크 대부분을 지원하며, 배포는 Supabase 기반으로 지원한다. 이 모든 애플리케이션 개발이 단지 프롬프트만을 통해 이루어진다는 점이 신기했다. 그리고 얼마나 정확하게 요구사항을 반영해 줄 수 있을지도 궁금한 프로젝트다.

마치며

지금까지 주요 분야에서 2024년 트렌드를 이끌었던 자바스크립트 프로젝트를 살펴보았다. 새로운 프로젝트도 있었고, 오랫동안 사랑받은 프로젝트가 여전히 순위권에 있는 모습도 볼 수 있었다. 매번 모든 트렌드를 따라가는 건 쉽지 않겠지만, AI의 발전으로 변화가 더 빠르게 가속화된다는 점에서 꾸준히 주목할 필요가 있다.

또한 이 많은 프로젝트들이 결국은 “더 좋은 프로덕트를 빠르고 가볍고 쉽게 만들기”라는 공통의 목표를 가지고 있다고 느꼈다. 이 과정에서 과연 개발자가 앞으로 가져야 할 역량은 무엇일까를 고민해 보면 좋겠다. 2025년에도 유행은 계속 바뀔 것이고, 지금 인기 있는 프로젝트라도 언제 생태계의 외면을 받을지는 모른다. 그러니 탄탄한 기본기와 명확한 목표 설정을 통해 변화가 빠른 자바스크립트 생태계에서 훌륭한 개발자로 살아남을 수 있길 바란다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.