2020 JavaScript Rising Stars

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 방식. ("빌드 도구" 섹션에서 새로운 도구들을 참고해주세요.)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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