2023 JavaScript Rising Stars

안녕하세요, 소플입니다.
2024년 새해 첫 매거진이네요ㅎㅎ
이 글을 보시는 분들 모두 새해 복 많이 받으시고, 올해도 성장하는 한 해가 되시길 바랍니다! 😀

이번 매거진에서는 자바스크립트 생태계에서 작년 한 해 동안 가장 많은 GitHub Star를 받은 프로젝트들을 소개해보도록 하겠습니다.
전체 순위는 아래 원문 링크를 참고하시기 바라며, 이 글에서는 관심있게 볼만한 프로젝트들만 몇가지 추려서 살펴보겠습니다.
(원문 링크: https://risingstars.js.org/2023/en)

---

전체 프로젝트 부문 (1위 ~ 10위)

1위. shadcn/ui (https://github.com/shadcn-ui/ui)

작년 한 해 동안 무려 39,500여개의 Star를 받은 압도적인 1위 프로젝트는 바로 shadcn/ui입니다.
이름에서 알 수 있듯이 UI 라이브러리이며, Radix UI와 Tailwind CSS를 기반으로 만든 심플한 컴포넌트들이 특징입니다.

최근 해외에서 만든 프로덕트들을 자세히 보면 위 그림과 비슷한 형태의 UI가 많이 보였을텐데요,
바로 shadcn/ui를 사용해서 만든 제품이기 때문입니다.
그만큼 사이드 프로젝트부터 기업용 제품까지 많은 곳에서 사용되고 있다고 볼 수 있겠네요.

저도 살짝 한 번 사용해보았는데 컴포넌트 종류도 다양하고 심플해서 꽤 쓸만하다고 느꼈습니다.
하지만 개인적으로 Tailwind CSS를 선호하지 않기 때문에 그 부분에서 약간 호불호가 갈릴 수 있을 것 같습니다.
올해 사이드 프로젝트를 계획하고 계시는 분들은 한 번씩 사용해보시기 바랍니다!

2위. Bun (https://github.com/oven-sh/bun)

2위는 바로 작년 한 해 동안 29,300개의 Star를 받은 Bun입니다.
Bun은 굉장히 빠른 속도를 자랑하는 JavaScript 런타임이라고 보시면 됩니다.
GitHub 저장소에서는 아래와 같이 설명하고 있습니다.

Bun is an all-in-one toolkit for JavaScript and TypeScript apps.

즉, JavaScript와 TypeScript 애플리케이션을 위한 모든 것을 다 갖춘 도구 모음이라고 할 수 있겠네요.
Bun은 작년인 2023년 9월에 버전1.0이 릴리즈 되었습니다.

하지만 아직 한창 개발이 진행중이기 때문에 아직은 프로덕션 레벨에서 사용하는 것은 약간 위험할 수 있습니다.
그래서 작은 프로젝트부터 하나씩 실험적으로 사용해보는 것을 권장하고 있습니다.
저도 Bun에 대해서 얘기만 듣고 아직 써보진 못했는데, 올해는 꼭 한 번 써보고 싶네요ㅎㅎ

3위. Excalidraw (https://github.com/excalidraw/excalidraw)

3위는 작년 한 해 동안 23,200개의 Star를 받은 Excalidraw입니다.
Excalidraw는 손글씨 느낌을 재현해주는 가상의 칠판이라고 보시면 됩니다.
아래 그림과 같이 생겼고 공식 홈페이지 링크에 접속해서 무료로 사용가능한 웹기반 도구입니다.

해외 개발 유튜브 영상을 자주 보시는 분들은 유튜버들이 Excalidraw로 그림을 그려가면서 설명하는 영상들을 이미 많이 보셨을 겁니다.
간단한 다이어그램을 그리거나 아이디어 스케치, UI 와이어프레임 등을 그리는데 사용할 수 있습니다.
또한 링크를 통해 다른 사람들과 동시 협업도 가능합니다.

로컬에 파일을 저장해서 쓰는 기본 버전은 무료로 사용이 가능하며,
다이어그램을 클라우드에 저장 및 관리할 수 있는 Excalidraw+라는 유료 구독 플랜을 별도로 제공하고 있습니다.

최근에는 OpenAI의 GPT와 연동해서 Text to diagram 등의 기능을 제공하고 있습니다.
앞으로 AI 관련 기능이 더 고도화 된다면 굉장히 강력한 도구가 되지 않을까 생각됩니다.

4위. tldraw (https://github.com/tldraw/tldraw)

4위는 작년 한 해 동안 17,900개의 Star를 받은 tldraw입니다.
tldraw는 3위인 Excalidraw와 굉장히 비슷한 가상의 칠판입니다.
아래 그림은 실제 tldraw의 화면입니다.

겉모습만 보면 Excalidraw와 거의 비슷해 보이지만,
tldraw는 리액트 컴포넌트 형태로 내가 만든 리액트 애플리케이션에 곧바로 집어넣을 수 있다는 특징이 있습니다.

그래서 만약 내가 만드는 애플리케이션에 칠판기능이 필요하다면 바로 이 tldraw를 사용하면 됩니다.
저도 나중에 비슷한 기능이 필요하게 되면 한 번 사용해봐야겠네요ㅎㅎ

5위. Next.js (https://github.com/vercel/next.js)

5위는 작년 한 해 동안 17,800개의 Star를 받은 Next.js입니다.
Next.js는 이미 몇년 전부터 굉장히 많이 사용되고 있었고,
2023년 초에도 Next.js가 대표적인 리액트 기반의 프레임워크였습니다.
하지만 그럼에도 불구하고 약 1년이 지난 지금은 생태계가 더 커져버렸습니다.
그말인즉슨 이제 리액트로 개발하는 사람이라면 웬만하면 Next.js를 써야하는 시대가 되었다는 것이죠.

처음엔 서버 사이드 렌더링(SSR)에 최적화 된 프레임워크로 출발한 Next.js는,
현재 아래와 같이 full-stack Web applications를 위한 프레임워크로 포지셔닝 하고 있습니다.

작년 10월에 버전14가 출시되었고, 감히 프론트엔드쪽에서 가장 빠르게 변화하는 제품이라고 할 수 있을 것 같습니다.
버전14에 익숙해지기도 전에 아마 버전15가 나오지 않을까 싶습니다 😂
아무튼 프론트엔드 개발 또는 혼자서 사이드 프로젝트를 하려고 하는 분들이라면 Next.js를 꼭 사용해보시길 바랍니다!

6위. Supabase (https://github.com/supabase/supabase)

6위는 작년 한 해 동안 17,700개의 Star를 받은 Supabase입니다.
Supabase는 이름에서 알 수 있듯이 구글의 Firebase와 비슷한 제품입니다.
공식 GitHub 저장소에서는 아래와 같이 스스로를 오픈소스 Firebase 대체재라고 소개하고 있습니다.

The open source Firebase alternative.

Supabase는 Firebase처럼 애플리케이션 개발에 필요한 데이터베이스, 인증, 스토리지 등의 모든 기능들을 제공합니다.
Firebase와 구별되는 한 가지 가장 큰 차이점을 꼽자면, 관계형 데이터베이스인 PostgreSQL을 제공한다는 점입니다.
기존에 Firebase를 사용하면서 RealtimeDB, Firestore 등의 NoSQL 데이터베이스에 불편함을 느끼던 개발자들을 공략한 것 같기도 합니다.

Supabase는 아래와 같이 공식 웹사이트에 접속해서 편리하게 사용할 수 있습니다.

저도 이전에 Supabase로 프로젝트를 진행해본 적이 있는데 모든걸 Supabase 안에서 다 할 수 있어서 굉장히 편리했던 기억이 있습니다.
혼자서 사이드 프로젝트를 하는 분들에게는 좋은 선택이 되지 않을까 싶습니다.

7위. React (https://github.com/facebook/react)

7위는 작년 한 해 동안 16,900개의 Star를 받은 React입니다.
React는 굳이 설명이 필요없겠죠?
그렇게 Star를 많이 받아놓고도 더 받을 Star가 있다는게 신기할 따름입니다ㅎㅎ
리액트가 구축한 웹 개발 생태계가 앞으로 어떻게 발전해나갈지 더욱 더 기대가 됩니다!

8위. tauri (https://github.com/tauri-apps/tauri)

8위는 작년 한 해 동안 15,700개의 Star를 받은 tauri입니다.
tauri는 프론트엔드 프레임워크 개발 환경을 사용해서 데스크탑 애플리케이션을 만들 수 있게 해주는 프레임워크입니다.
기존에 비슷한 역할을 하던 프로젝트를 꼽자면 Electron이 있습니다.

간단한 데스크탑용 애플리케이션을 개발하기 위해서 각 OS에 맞는 언어나 기술을 모두 배우는 것은 쉽지 않죠.
그래서 Electron이나 tauri같은 프레임워크가 웹 개발에 익숙한 개발자들이 자신이 익숙한 프레임워크를 사용해서 데스크탑 애플리케이션을 만들 수 있게 해주는 것입니다.
저도 나중에 데스크탑용 애플리케이션을 만들 일이 있다면 꼭 한 번 써보고 싶은 프레임워크입니다.

9위. Drizzle ORM (https://github.com/drizzle-team/drizzle-orm)

9위는 작년 한 해 동안 15,600개의 Star를 받은 Drizzle ORM입니다.
Drizzle ORM은 이름에서 알 수 있듯이 ORM인데, 특별히 TypeScript를 지원하는 ORM입니다.

NOTE: ORM이란?
ORM은 Object-Relational Mapping의 약자로, 객체와 관계형 데이터베이스 간의 데이터 변환을 자동으로 처리하는 기술이나 프레임워크를 가리킵니다.
쉽게 말해, 개발자가 객체 지향 코드를 사용하여 데이터베이스와 상호 작용할 수 있도록 해주는 도구나 라이브러리를 ORM이라고 합니다.

기존에 비슷한 역할을 하던 Prisma나 TypeORM이 있었지만,
그 사이에 개발자들이 가려워하는 부분들을 잘 긁어주면서 단숨에 상위권으로 올라와버린 것이 바로 Drizzle ORM입니다.

특별히 Drizzle ORM은 Edge runtime에서도 사용이 가능하기 때문에 다양한 장점이 있습니다.
edge 환경에서 실행되는 Next.js의 Route Handlers(이전 page router의 API routes)에서도 사용이 가능하며,
최근 많이 사용되고 있는 PlanetScale 같은 데이터베이스와도 함께 사용하기 좋습니다.

참고로 지금 매거진을 보고 계시는 이 FrontOverflow 웹사이트도 Drizzle ORM과 PlanetScale을 사용하고 있습니다ㅎㅎ
저는 Prisma와 TypeORM을 다 써보고 넘어온 것인데 굉장히 만족하면서 사용하고 있습니다.
개인적으로 작년보다 올해가 더 기대되는 Drizzle ORM입니다.

10위. HTMX (https://github.com/bigskysoftware/htmx)

10위는 작년 한 해 동안 15,600개의 Star를 받은 HTMX입니다.
9위인 Drizzle ORM과 아주 약간의 차이로 10위가 되었네요.

HTMX는 HTML의 속성(attribute)을 사용해서 HTML 내에서 직접 AJAX, CSS Transitions, WebSockets, 그리고 Server Sent Events 등을 사용할 수 있게 해주는 기술입니다.
예를 들면 아래와 같은 식으로 말이죠.

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
</button>

이런 기술을 왜 만들었을까를 생각해보면, 웹페이지에서 간단한 통신을 하기 위해서 자바스크립트를 사용해야 하는 불편함(?)을 없애기 위함이 아닐까 싶습니다.
개인적으로는 웹 개발 생태계에서 얼마나 자리를 잡을 수 있을지 의문이 들기는 하지만, 큰 기업들도 주목하고 스폰서를 하는 프로젝트인 만큼 관심을 갖고 지켜보려고 합니다.

---

지금까지 자바스크립트 생태계에서 작년 한 해 동안 가장 많은 GitHub Star를 받은 프로젝트 1위부터 10위까지 알아보았습니다.

지금부터는 그 외에 각 세부 분야에서 주목해볼만한 프로젝트들을 하나씩 살펴보도록 하겠습니다.

스타일링 부문 1위. StyleX (https://github.com/facebook/stylex)

스타일링 부문 1위는 작년 한 해 동안 6,800개의 Star를 받은 StyleX입니다.
StyleX는 작년 12월에 공개되었고 한 달이 넘기도 전에 Star를 6,800개나 받은 어마무시한 프로젝트입니다.
어떻게 이렇게 짧은 기간에 Star를 많이 받았을까요?
StyleX에 대한 개발자들의 관심도 물론 있었겠지만, StyleX가 메타에서 개발한 오픈소스 프로젝트이기 때문이 아닐까 생각됩니다.

StyleX는 메타에서 개발한 자바스크립트 스타일링 라이브러리입니다.
인라인 스타일과 정적 CSS의 장점은 결합하고 단점은 방지하며,
페이스북, 왓츠앱, 인스타그램 등에 사용되는 스타일링 시스템이라고 소개하고 있습니다.

저도 아직 써보진 않았지만 나오자마자 관심을 갖고 지켜보고 있는 프로젝트 중에 하나입니다.
기회가 되면 조만간 사용해보고 후기를 남겨보도록 하겠습니다ㅎㅎ

StyleX에 대한 자세한 소개글은 아래 링크에서 보실 수 있습니다.
https://stylexjs.com/blog/introducing-stylex

테스팅 부문 1위. Playwright (https://github.com/microsoft/playwright)

테스팅 부문 1위는 작년 한 해 동안 11,700개의 Star를 받은 Playwright입니다.
Playwright는 Microsoft에서 개발한 웹 테스팅 및 자동화를 위한 오픈소스 프레임워크 입니다.
기존에 비슷한 역할을 하던 프로젝트로는 Puppeteer를 꼽을 수 있을 것 같습니다.

Playwright는 single API로 Chromium, Firefox 그리고 WebKit 브라우저까지 테스트 할 수 있다고 합니다.
저는 그동안 Puppeteer를 주로 사용해왔는데, 다음에는 Playwright를 한 번 사용해봐야겠네요.

정적 웹사이트 부문 2위. Astro (https://github.com/withastro/astro)

정적 웹사이트 부문 2위는 작년 한 해 동안 14,400개의 Star를 받은 Astro입니다.
왜 갑자기 1위가 아니라 2위를 소개하는지 의아하실텐데, 그건 바로 1위가 이미 앞에서 소개한 Next.js이기 때문입니다.
넘을 수 없는 거대한 Next.js의 벽이 느껴지는 순간입니다 😂

Astro는 컨텐츠 기반의 정적 웹사이트 생성에 최적화된 프레임워크입니다.
하지만 단순히 정적 웹사이트뿐만 아니라 일반적인 웹 애플리케이션도 개발할 수 있습니다.

개인적으로 Astro가 떠오르는 이유 중에 하나가 Next.js의 Vercel 의존도가 점점 커지고 있기 때문이 아닐까 싶습니다.
Next.js의 모든 기능을 정상적으로 작동하도록 하려면 Cloudflare나 AWS가 아닌 Vercel에 배포하는 것이 안정적인데,
Vercel에서 규모있는 서비스를 제대로 운영하려면 꽤 비싼 요금을 지불해야하기 때문입니다.
그리고 애초에 특정 서비스에 종속되는 것을 싫어하는 개발자들의 특성도 한몫하지 않았을까 싶습니다ㅎㅎ

어찌됐든 Astro는 그런 분위기를 타고 현재 떠오르고 있는 프레임워크라고 할 수 있습니다.
작년보다 올해가 더 기대되는 프로젝트 중 하나이기도 합니다.
Astro가 올해 생태계에 어떤 영향을 줄지 관심을 갖고 지켜보려고 합니다.

상태 관리 부문 1위. Zustand

이제 마지막 상태 관리 부문입니다.
상태 관리 부문 1위는 작년 한 해 동안 13,200개의 Star를 받은 Zustand입니다.

Zustand는 독일어로 ‘상태’라는 뜻을 갖고 있습니다. 그래서 발음도 정확히 하자면 ‘슈스탄트’가 됩니다.
Zustand는 리액트와 관련된 오픈소스 활동을 활발히 하고 있는 Poimandres라는 곳에서 개발한 라이브러리이며,
Redux에 비해 사용하기 쉽고 심플하다는 장점이 있습니다.

올해 Zustand가 과연 상태 관리 라이브러리들 중에서 확고하게 자리를 잡을 수 있을지 그 귀추가 주목됩니다.

아래 링크는 제 처음 만난 리덕스 강의 문서에서 여러 상태 관리 라이브러리들을 비교한 글입니다.
관심있는 분들은 한 번씩 읽어보시기 바랍니다.
https://www.frontoverflow.com/document/1/%EC%B2%98%EC%9D%8C%20%EB%A7%8C%EB%82%9C%20%EB%A6%AC%EB%8D%95%EC%8A%A4%20(Redux)/chapter/2/Redux%20%EC%86%8C%EA%B0%9C/section/8/%EA%BC%AD%20Redux%EB%A5%BC%20%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C%3F

---

지금까지 작년 한 해 동안 자바스크립트 생태계에서 가장 많은 주목을 받은 프로젝트들에 대해 알아보았습니다.
이렇게 수많은 Star를 받은 오픈소스 프로젝트들을 보고 있자니, 저도 갖다 쓰지만 말고 생태계에 기여를 조금이라도 해야겠다는 생각이 드네요ㅎㅎ
여러분들도 꾸준히 오픈소스에 관심을 가지고, 기회가 된다면 작은 부분이라도 꼭 기여해보시기를 바랍니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!
지금까지 소플이었습니다. 감사합니다 😀