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

출처 : https://risingstars.js.org/2024/en

서론

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

 

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

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

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

출처 : https://github.com/shadcn-ui/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 이다.

출처 : https://github.com/bigskysoftware/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 였다.

출처 : https://www.npmjs.com/package/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를 사용하는 개발자라면 큰 문제는 없겠지만, 다른 환경에서 개발을 하는 개발자라면 자신의 환경에서 사용하는 언어들을 지원 가능한지 체크를 하고 사용하면 좋을 것 같다.

출처 : https://biomejs.dev/

이 분야에 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 였다.

출처 : https://github.com/pmndrs/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)은 개발자들이 일하는 방식을 완전히 바꾸어 놓았다. 당연히 이와 관련된 프로젝트들도 많은 주목을 받았던 것으로 보인다.

출처 : https://github.com/n8n-io

이 분야에서 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년에도 얼마든지 바뀔 것이며 지금 인기 있는 프로젝트도 언제 생태계의 외면을 받을지 모른다. 탄탄한 기본기와 명확한 목표 설정을 통해 변화가 빠른 이 자바스크립트 생태계에서 훌륭한 개발자로 살아남는 여러분이 되길 바라며 이번 포스팅을 마무리 하려고 한다.

 

참고자료

https://risingstars.js.org/2024/en

2024 JavaScript Rising Stars