매년 자바스크립트를 되돌아보는, JavaScript Rising Stars 의 5번째 에디션에 오신 것을 환영합니다.

이전과 동일하게: 지난 12개월동안 Github에서 받은 star의 수를 비교하고 2020에 주목받은 프로젝트들을 조명합니다.


아래 그래프는 지난 12개월 동안 Github에서 받은 star의 수를 비교/분석한 것이며, Best of JS에서는 웹 플랫폼과 관련하여 선정된 여러 프로젝트들을 볼 수 있습니다. 자세한 사항은 각 프로젝트를 클릭해주세요.

목차

  1. 가장 인기 있는 프로젝트
    DenoVue.jsReactPlaywrightVS CodeesbuildVue Element AdmineDEX-UINext.jsTailwind CSS
  2. 프론트엔드 프레임워크
    Vue.jsReactAngularSvelteAlpine.js
  3. Node.js 프레임워크
    Next.jsStrapiNestNuxtBlitz
  4. 리액트 생태계
    Next.jsReact QueryRecoilAnt DesignReact Hook Form
  5. 뷰 생태계
    Vue Element AdminViteNuxtElement Plusvue-next
  6. 앵귤러 생태계
    ngx-adminMaterial Design for AngularScullyAngular CLING-ZORRO
  7. 빌드 도구
    esbuildRomeViteSnowpackWebpack
  8. CSS 프레임워크
    Tailwind CSSBootstrapBulmanew.cssHalfmoon
  9. CSS-in-JS
    Styled ComponentsTwinEmotionLinariaTheme UI
  10. 테스팅
    PlaywrightStorybookPuppeteerCypressHeadless Recorder
  11. 모바일
    React NativeExpoQuasarIonicSonar
  12. JS 취향/컴파일러
    TypeScriptswcBabelReasonFlow
  13. 상태 관리
    RecoilXStateImmerZustandRedux
  14. GraphQL
    GatsbyHasura GraphQL EngineRedwoodPrismaApollo client
  15. 학습 리소스
    JS Algorithms & Data StructuresNode.js Best PracticesYou Don't Know JSClean Code30 seconds of code
  16. 결론

가장 인기 있는 프로젝트

1
Deno

Deno

A secure JavaScript and TypeScript runtime
+30.2k☆

2020년 경향

2.8k
1.5k
1.0k
1.3k
13.7k
3.0k
1.3k
897
836
742
912
1.2k
1월
2월
3월
4월
5월
6월
7월
8월
9월
10월
11월
12월

GitHub 정보

작성 날짜
2018-05
누적 별
71.1k☆

링크

GitHub
denoland/deno
WEB 사이트
deno.land
Best of JS
bestofjs.org/projects/deno
2
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+22.5k☆
3
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
4
Playwright

Playwright

Node.js library to automate Chromium, Firefox and WebKit with a single API
+19.7k☆
5
VS Code

VS Code

Visual Studio Code
+19.1k☆
6
esbuild

esbuild

An extremely fast JavaScript bundler and minifier
+16.6k☆
7
Vue Element Admin

Vue Element Admin

A magical vue admin
+16.0k☆
8
eDEX-UI

eDEX-UI

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.
+15.7k☆
9
Next.js

Next.js

The React Framework
+15.5k☆
10
Tailwind CSS

Tailwind CSS

A utility-first CSS framework for rapid UI development.
+15.5k☆

2020년은 많은 부분에서 특별한 해입니다. 가장 중요한 건, 무려 5년만에 Rising Stars 의 우승자가 Vue.js가 아니라 Deno라는 점이죠...이럴 수가!

Deno는 Node.js를 개발한 Ryan Dahl이 만든, 자바스크립트 런타임입니다.

10년 간 Node.js를 개발하면서 겪었던 반복과 경험을 토대로, 많은 부분이 고쳐지고 발전된 후계자 같은 느낌으로 소개되기도 합니다.

많은 특징들 중에서:

  • 타입스크립트 컴파일러가 기본 장착입니다 (그래도, 자바스크립트로 코딩할 수 있습니다.)
  • 특정 패키지 매니저가 없습니다. 즉, URL만 있으면 어떤 자바스크립트 의존 패키지도 로드할 수 있습니다.
  • "standard library"는 Node.js에서 패키지 설치를 위해 요구되는 사항들을 위한 솔루션을 제공합니다.
  • Deno는 Fetch API와 같이 가능한 한 웹 표준을 따르려 합니다.
  • ECMAScript 모듈로 파일이 import됩니다.
  • 테스트 러너와 디버거가 빌트인되어 있습니다.

Deno를 둘러싼 생태계는 얼마 안 되었지만, 벌써부터 바뀌는 변화들에 대해 기대를 모으고 있습니다.

Deno의 성공은 2가지를 증명합니다:

  • 백엔드, 프론트엔드 모두에서 떠오르는 타입스크립트
  • Snowpack과 같은 솔루션에 의해 선전하고 있는 ES6 모듈 import 방식. ("빌드 도구" 섹션에서 새로운 도구들을 참고해주세요.)

프론트엔드 프레임워크

1
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+22.5k☆
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
3
Angular

Angular

One framework. Mobile & desktop.
+13.3k☆
4
Svelte

Svelte

Cybernetically enhanced web apps
+12.0k☆
5
Alpine.js

Alpine.js

A rugged, minimal framework for composing JavaScript behavior in your markup.
+11.5k☆

Vue.jsReact가 여전히 프론트엔드 프레임워크 에서는 탑을 경쟁하고 있습니다.

그 뒤로는, 2019년과는 반대로 Angular가 3등을 차지하고 있고, 그 뒤를 Svelte가 차지하고 있네요.

TOP 5의 뉴 페이스는 Alpine.js입니다. Laravel LiveWire가 만들기도 한, 브라우저를 위한 미니말리즘 리액티브 프레임워크이지요.

Alpine.js는 뷰와 앵귤러에서 아이디어를 가져왔습니다: 커스텀 HTML 디렉티브, 양방향 바인딩...

HTML 페이지에 <script>를 추가하는 것으로 쉽게 사용할 수 있으며, 따로 빌드 프로세스도 필요 없습니다. 또한, HTML 마크업을 이용해서 모두 적용할 수 있기에 이미 개발된 웹 페이지에 쉽게 적용하기 완벽한 솔루션일 수 있습니다.

웹 페이지에 인터랙티브를 넣으면서 매우 가벼운 솔루션을 찾는다면, Elixir Phoenix와 같은 프레임워크도 있습니다. 또한, 여기에 Alpine.jsTailwind CSS 등을 포함한 PETAL이라는 스택도 있으니, 살펴보시길...

Node.js 프레임워크

1
Next.js

Next.js

The React Framework
+15.5k☆
2
Strapi

Strapi

Open source Node.js Headless CMS to easily build customisable APIs
+11.8k☆
3
Nest

Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)
+10.3k☆
4
Nuxt

Nuxt

The Intuitive Vue Framework
+8.2k☆
5
Blitz

Blitz

️The Fullstack React Framework — built on Next.js
+6.0k☆

Node.js 프레임워크 에서는 크게 2가지 타입의 프로젝트들이 주류를 이뤘습니다.

먼저, Next.jsNuxt와 같은 풀스택 프레임워크가 있는데, 이 둘은 각각 리액트와 뷰를 서버 사이드로 가져온, 애플리케이션을 빌드하는 데 각각의 규약이 정해져 있는 프레임워크입니다.

반면에, Nest (작년의 우승자이지요)와 Fastify와 같이 좀 더 클래식한 방법으로 서버에서 운영되는 프레임워크들도 있지요.

2018년과 같이, 올해는 Next.js가 선두를 달리고 있으며, 처음에는 React를 서버사이드로 렌더링하기 위한 솔루션으로 유명했지만 지금은 풀스택을 빌드하기 위한 솔루션으로 떠오르고 있습니다.

동적과 정적 개발에 최적인, Incremental Static Regeneration과 같은 최신 버전 기능들은 더 많은 유저 케이스들을 충족시키기 충분한 듯 하네요.

풀스택 프레임워크들에 한해, BlitzRedwood도 웹 애플리케이션을 만들 때 최고의 개발자 경험을 제공하는 것을 목표로 하는, 새로운 경쟁자로 두각을 보입니다.

Express는 나온 지 11년이나 되었지만 아직도 자바스크립트 세계에서 순위에 놓이는 게 흥미롭긴 하네요.

리액트 생태계

1
Next.js

Next.js

The React Framework
+15.5k☆
2
React Query

React Query

Hooks for fetching, caching and updating asynchronous data in React
+13.6k☆
3
Recoil

Recoil

An experimental state management library for React apps
+11.1k☆
4
Ant Design

Ant Design

A UI Design Language and React UI library
+10.9k☆
5
React Hook Form

React Hook Form

React Hooks for forms validation (Web + React Native)
+10.8k☆

게스트 작가: Lee Robinson

Lee Robinson은 Vercel에서 솔루션 아키텍트로 일하고 있고 개발자이자 작가, 그리고 크리에이터입니다.

Guest Writer leerob

2020년 리액트 생태계의 테마는 안정성이었습니다. 리액트 17이 큰 업데이트 없이 소개되는 동안, 리액트 서버 컴포넌트를 밑작업이 이루어진 것이지요.

리액트 서버 컴포넌트는 클라이언트 번들 크기를 줄이고 부트 시간을 개선함으로써 리액트 앱이 어떻게 구동하는 지를 바꿀 예정입니다. 더불어, 데이터 패치를 간결화하고 데이터베이스나 파일 시스템과 같은 데이터 소스에 접근할 수 있습니다.

Next.js가 리액트 앱을 구현하는 데 가장 인기 있는 솔루션으로 성장하는 가운데, 이 것의 혼합적인 접근은 리액트 서버 컴포넌트의 첫 번째 응용이 될 것입니다.

React Query, Recoil, React Hook Form와 같은 보조 라이브러리들이 훅을 기반으로 업데이트되고 있습니다. 각 라이브러리마다 리액트 개발을 간략화하고 있지요. 잘 닦인 컴포넌트 라이브러리들이 잘 조합될 때 리액트 개발자들은 그 어느 때보다 많은 툴을 가지게 됩니다.

뷰 생태계

1
Vue Element Admin

Vue Element Admin

A magical vue admin
+16.0k☆
2
Vite

Vite

Next generation frontend tooling. It's fast!
+14.1k☆
3
Nuxt

Nuxt

The Intuitive Vue Framework
+8.2k☆
4
Element Plus

Element Plus

A Vue.js 3.0 UI Library made by Element team
+7.3k☆
5
vue-next

vue-next

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+5.9k☆

뷰 커뮤니티에서 가장 큰 뉴스는 바로 버전 5의 릴리즈입니다.

버전 2의 제약들을 해결해주는 새로운 컴포지션 API가 나왔기 때문인데요:

  • 이전에는 컴포넌트 안에서 논리적 제약에 의한 코드를 관리하기 어려웠습니다.
  • 컴포넌트를 넘나들며 코드를 재사용하기 쉬워졌습니다. (뷰 2, 믹스인, 팩토리와 범위 슬록을 이용하는 건 최적의 방법이 아니었죠)
  • 타입스크립트 지원이 더 나아졌습니다.

버전 3에는 어떠한 업데이트가 있는지 더 자세히 알고 싶다면, 이전 가이드를 확인해주세요.

ES 모듈에 기반하여, 명령어로 뷰 어플리케이션을 시작할 수 있는 가장 빠른 방법을 제공하는, 새로운 빌딩 툴인 Vite 역시 주목할 만 합니다.

앵귤러 생태계

1
ngx-admin

ngx-admin

Customizable admin dashboard template based on Angular 10+
+2.5k☆
2
Material Design for Angular

Material Design for Angular

Component infrastructure and Material Design components for Angular
+1.5k☆
3
Scully

Scully

The Static Site Generator for Angular apps
+1.4k☆
4
Angular CLI

Angular CLI

CLI tool for Angular
+1.3k☆
5
NG-ZORRO

NG-ZORRO

Angular UI Component Library based on Ant Design
+1.2k☆

3위에 오른 새로운 경쟁자를 제외하고, 작년의 탑 5와 거의 동일한데요.

Scully는 잼스택에 앵귤러를 가져온 정적 사이트 생성기로, 훌륭한 문서와 함께 2019년 12월에 프로젝트가 나왔습니다.

앵귤러의 주요 릴리즈가 2020년에 3번 나오기도 했지요.

더 작은 번들 사이즈와 그 외 향상된 빌드 기능을 가져온 버전 9는 2월에 배포되었고, 버전 1011은 그 해 후반에 나왔죠.

2020년 후반에 앵귤러 팀이 가장 초점을 맞춘 것은 커뮤니티의 목소리를 듣는 것이었습니다. 커뮤니티에서 필요로 하는 것을 이해하고 해결하기 위해 Github의 이슈와 PR들을 수정하고 파악하는데 많은 노력을 기울었죠. 또한, 앵귤러 팀이 무엇을 하고 있고, 미래에 무엇을 하고자 하는지 공유하기 위해 로드맵을 릴리즈하기도 했습니다.

빌드 도구

1
esbuild

esbuild

An extremely fast JavaScript bundler and minifier
+16.6k☆
2
Rome

Rome

The Rome Toolchain. A linter, compiler, bundler, and more for JavaScript, TypeScript, HTML, Markdown, and CSS.
+14.2k☆
3
Vite

Vite

Next generation frontend tooling. It's fast!
+14.1k☆
4
Snowpack

Snowpack

WASM-powered frontend build tool. Fast, lightweight, unbundled ESM.
+10.1k☆
5
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
+4.5k☆

Guest Writer: Sébastien Lorber

Sébastien은 Docusaurus에서 페이스북 오픈소스와 함께 일하고 있는, 리액트의 초기 개발자입니다.

Guest Writer slorber

새로운 트렌드를 많이 목격한 만큼, 2020년은 빌드 도구 생태계로 보면 놀라운 해였습니다.

SnowpackVite는 ES 모듈을 처음으로 가져왔는데요: 피드백을 빠르게 바로 받을 수 있도록 개발 모드일 때는 번들하지 않고, 오직 운영 모드일 때만 번들링을 진행합니다. (단, 브라우저 지원 범위가 늘어나야 합니다.)

각각 Rust와 Go로 만들어진 swcesbuild는 놀랍도록 향상된 성능을 가지며 둘 다 타입스크립트를 지원합니다.

너무 복잡하다고 알려진 WebpackParcelRollup이 더 간단한 대안으로 떠오르고 있었는데요. 아직까지는 사실상 표준으로 여겨지는 웹팩이 새로운 캐싱 레이어와 함께 향상된 성능을 보여줄 지 기대되고 있습니다.

단일레포가 메이저가 되고 있는데요: Yarn과 Lerna가 널리 쓰이고 있고 npm 7이 합류했습니다.

개인적으로 2021년에는 RomeToast, Turborepo를 주목하고 있습니다.

Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

결론

Best of JS 에 의하면, 이번 년도는 자바스크립트의 여러 분야에서 새로운 강자들이 많이 나온 또다른 해입니다.

백엔드 개발자들은 Deno를 경험하고 있고 의존 패키지들에 대해 걱정할 필요 없게 해주는 타입스크립트를 즐기기 시작했죠.

프론트엔드 개발자들도 esbuild, Snowpack, Vite와 같이 좀 더 빠르고 간단한 빌드 툴들을 가지게 되었습니다.

툴링 하니까 말인데요, NPM version 7이 하나의 레포에서 여러 패키지를 다룰 수 있는 workspaces를 제공하기로 했습니다. NPM의 라이벌 Yarn의 큰 장점 중의 하나였는데 말이죠.

스타일링에 관해서는, 좀 더 심플함을 제공하는 Tailwind CSS와 같은 솔루션들이 나오고 있고 이러한 심플함이 생태계를 이루고 있습니다.

2021에는 어떤 일이 일어날까요?

리액트 서버 컴포넌트가 어떻게 나올 지도 흥미로운 부분입니다.

지금 Sebastian McKenzie는 자바스크립트 툴링을 통합하기 위한 시도인 Rome에 전력을 다하고 있습니다. 컴파일링, 테스팅 그리고 린팅까지...모든 게 하나의 의존성으로 해결이 될 수 있을까요?

"cells"이라 불리는 유니크한 데이터 호출 방식과 GraphQL을 다루는, 풀스택 프레임워크인 Redwood 역시 주목할 만 합니다.

다양한 트렌드에 대한 다른 의견들도 원한다면, 실제 유저들의 피드백을 기반으로한, State of JS 설문조사의 놀라운 결과를 확인하는 것도 잊지 마세요.

지금까지 읽어주셔서 감사합니다, 내년에 봐요!

Korean version

Misol Goh

Fullstack Software Engineer

Authors

Available Translations

English

Pусский

日本語

Español

中文