JavaScript 프레임워크의 새로운 기능 (2024년 5월)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

자바스크립트 프레임워크와 관련된 모든 작업을 처리하기 어려울 수 있습니다. 이 문서에서는 지난 한 해 동안 JavaScript 프레임워크 생태계에서 일어난 최근 상황을 간략히 조명합니다. 이러한 주제에 관해 더 자세히 알아보려면 올해 Google I/O 이벤트에서 진행된 JavaScript 프레임워크 생태계 탐색 강연을 확인하세요.

프레임워크 기능을 비교하는 차트

차트에서 볼 수 있듯이 JavaScript 프레임워크는 여러 유사한 기능과 아키텍처로 통합되고 있습니다. 여기에는 구성요소 기반 아키텍처, 파일 기반 라우팅, 최신 SSR 지원이 포함됩니다. 이러한 융합은 프레임워크가 서로 학습하고 권장사항을 채택함에 따라 생태계의 성숙도와 발전을 보여줍니다.

동시에 여러 최신 트렌드 (예: 서버 구성요소 및 세분화된 반응을 위한 다양한 접근 방식)로 인해 개별 프레임워크가 계속해서 차별화되고 있습니다. 이러한 트렌드를 더 잘 이해하기 위해 한 번에 하나의 프레임워크로 자세히 살펴봅니다.

Angular

Angular의 최근 출시에는 신호, 지연 가능한 뷰, NgOptimziedImage, 비파괴적 하이드레이션, 부분 하이드레이션을 비롯한 여러 가지 중요한 변경사항이 포함되어 있습니다. 몇 가지 주요 사항은 다음과 같습니다.

  • 신호: 신호는 애플리케이션의 상태를 추적하기 위해 여러 프레임워크 (현재 Angular 포함)에서 사용하는 접근 방식입니다. 각진 신호는 변경 감지 중에 발생해야 하는 계산 수를 줄여 다음 페인트와의 상호작용 (INP)을 비롯한 런타임 성능을 개선할 수 있습니다.
  • 지연 가능한 뷰: 지연 가능한 뷰를 사용하면 특정 구성요소, 지시어, 파이프의 로드를 지연할 수 있습니다. 예를 들어 콘텐츠가 표시 영역에 들어가거나 기본 스레드가 유휴 상태가 될 때까지 종속 항목 로드를 연기할 수 있습니다.
  • NgOptimizedImage: NgOptimizedImage는 이미지 로드 권장사항 채택을 자동화하는 Angular용 이미지 구성요소입니다.
  • 비파괴적 하이드레이션: 비파괴적인 하이드레이션은 서버 측에서 렌더링된 Angular 앱의 DOM이 클라이언트 측에서 다시 빌드될 때 발생하는 깜박임을 수정합니다.
  • 부분 하이드레이션: Angular팀은 곧 부분 하이드레이션의 개발자 프리뷰를 출시할 예정입니다. 부분 하이드레이션을 사용하면 기본적으로 브라우저는 페이지가 렌더링될 때 페이지의 JavaScript를 로드하지 않습니다. 대신 사용자가 페이지와 상호작용할 때 페이지의 특정 부분이 수화됩니다.

Astro

현대적인 정적 사이트 빌더인 Astro는 혁신적인 웹 개발 접근 방식으로 큰 화제를 모았습니다. 성능과 개발자 환경에 중점을 둔 Astro는 몇 가지 흥미로운 기능과 업데이트를 출시했습니다.

  • 애스트로 제도: 애스트로 제도를 사용하면 개발자가 페이지의 나머지 부분과 분리된 대화형 UI 구성요소를 빌드할 수 있습니다. 이를 통해 효율적인 업데이트와 최적의 성능이 가능합니다.
  • 하이브리드 렌더링: 이제 Astro가 하이브리드 렌더링을 지원하므로 정적 사이트 생성과 서버 측 렌더링의 이점을 결합하여 유연성을 향상할 수 있습니다.
  • Image 및 Picture 구성요소: Astro는 이미지 처리를 간소화하고 자동 최적화를 제공하는 새로운 이미지 및 그림 구성요소를 도입했습니다.
  • 뷰 전환 지원: Astro는 View Transitions API를 기본적으로 지원하여 원활하고 원활한 페이지 전환을 지원합니다.
  • Astro Dev 툴바: Astro Dev 툴바는 Astro 애플리케이션을 디버깅하고 최적화할 수 있는 강력한 도구 모음을 제공합니다.

React

작년에 React 서버 구성요소의 출시에서는 React 구성요소에 대한 새로운 접근 방식을 도입했습니다. 이후 React팀은 React 컴파일러, Server Actions 기능, 그리고 다음 기능을 비롯한 다양한 새로운 기능을 연구했습니다.

  • 서버 구성요소: React 서버 구성요소는 클라이언트로 스트리밍되기 전에 데이터를 가져오고 서버에서 렌더링되는 구성요소입니다. 이렇게 하면 렌더링 작업이 서버로 이동되고 클라이언트에 전송되어야 하는 코드의 양이 줄어듭니다.
  • React 컴파일러: React Compiler는 구성요소를 자동으로 기억할 수 있는 컴파일러입니다. 이렇게 하면 불필요한 재렌더링을 줄여 성능이 개선됩니다. React팀은 개발자가 코드를 변경하지 않고도 React 컴파일러를 채택할 수 있다고 말했습니다.
  • 서버 작업: 서버 작업은 클라이언트 간 통신을 지원합니다. 서버 작업을 사용하면 React 구성요소에서 직접 호출할 수 있는 서버 측 함수를 정의할 수 있으므로 수동 API 호출 및 복잡한 상태 관리가 필요하지 않습니다. 이는 데이터 변형, 양식 제출과 같은 작업에 특히 유용할 수 있습니다.
  • 애셋 로드: React는 스크립트, 스타일, 글꼴, 이미지와 같은 애셋을 미리 로드하고 로드하기 위한 선언적 API에서 작업해 왔습니다.
  • 오프스크린 렌더링: React는 오프스크린 렌더링에서도 작동해 왔습니다. 오프스크린 렌더링은 추가적인 성능 오버헤드 없이 백그라운드에서 화면을 렌더링할 수 있는 React의 출시 예정 기능입니다. DOM 요소뿐 아니라 React 구성요소에서도 작동하는 콘텐츠 가시성 CSS 속성의 한 버전으로 생각하면 됩니다."

리믹스

풀 스택 웹 프레임워크인 리믹스가 개발자 커뮤니티에서 관심을 끌고 있습니다. 웹 기초와 향상된 개발자 환경에 중점을 둔 리믹스에는 다음과 같은 몇 가지 주목할 만한 업데이트가 도입되었습니다.

  • 리믹스 2.0 출시: 2023년 9월에 출시된 리믹스 2.0은 프레임워크에 상당한 개선사항과 새로운 기능을 제공했습니다.
  • Vite의 안정적인 지원: 이제 Remix가 빠르고 가벼운 빌드 도구인 Vite를 안정적으로 지원해 개발 빌드 속도를 높이고 성능을 개선합니다.
  • SPA 모드: 리믹스에 SPA 모드가 도입되었습니다. 이 모드를 사용하면 프로덕션 환경에서 JavaScript 서버가 없어도 정적 사이트만 빌드할 수 있습니다. 이를 통해 개발자는 파일 기반 라우팅, 자동 코드 분할 등과 같은 Remix의 강력한 기능을 사용하면서 정적 사이트 배포의 단순성을 유지할 수 있습니다.

Next.js

2023년 5월에 출시된 Next.js 13.4는 React 서버 구성요소, 스트리밍, Suspense를 안정적으로 지원하기 시작했기 때문에 특히 주목했습니다. 그 이후로 Next.js는 새로운 React API (예: 서버 작업) 지원을 계속 구축하고 Turbopack과 같은 이니셔티브를 통해 개발자 환경을 반복합니다. 기타 주요 기능은 다음과 같습니다.

  • 앱 라우터: Next.js 13.4에서 안정화된 앱 라우터는 Next.js 애플리케이션에서 라우팅을 구성하고 관리하는 새로운 방법입니다. App Router는 공유 레이아웃 및 중첩 라우팅과 같은 새로운 Next.js 기능과 Next.js 앱에서 React Server Components, Suspense, Server Actions와 같은 새로운 React API를 사용하기 위한 전제 조건입니다.

  • Turbopack: React의Suspense API를 기반으로 빌드된 페이지 렌더링에 대한 현재 실험용 접근 방식입니다. 부분 사전 렌더링은 정적 로드 셸을 사용하여 페이지를 렌더링합니다. 그러나 셸은 페이지 내 동적 콘텐츠에 '구멍'을 남기고 이 콘텐츠는 비동기식으로 로드됩니다. 이렇게 하면 캐시 가능한 정적 페이지의 성능상의 이점을 제공하는 동시에 계속해서 동적 데이터를 페이지 콘텐츠에 통합할 수 있습니다.

뷰

Vue의 최신 버전인 Vue 3.4에는 다양한 성능 개선사항이 포함되었습니다. Vue는 현재 성능 중심인 Vue Vapor 작업도 진행 중입니다. 다음은 이 분야에서 진행되는 몇 가지 주요 소식입니다.

  • Vue 3.4 출시: '완전히 재작성된 파서로 두 배 더 빠르고 더 빠른 SFC 컴파일, 재컴퓨팅 효율성을 향상하는 리팩터링된 반응 시스템 등이 포함됩니다.
  • Vue 베이퍼 모드: Vue는 Vue 단일 파일 구성요소와 함께 사용할 수 있는 성능 지향 선택 컴파일 전략인 베이퍼 모드를 작업 중입니다. 베이퍼 모드는 Vue 컴파일러에서 현재 생성한 코드보다 성능이 뛰어난 코드를 생성합니다. 또한 모든 구성요소와 함께 베이퍼 모드를 사용하면 Vue Virtual DOM(번들 크기 감소)이 필요하지 않습니다.
  • Vue 2 지원 종료: Vue 2의 지원 종료 (EOL)는 2023년 12월 31일이었습니다. 하지만 Vue 2는 여전히 널리 사용되고 있습니다. Vue npm 패키지 다운로드의 약 50% 가 Vue 2용입니다.

너스트

Nuxt는 Nuxt 4가 곧 출시됩니다. 지난 1년간 Nuxt에서 빈번하게 프레임워크가 출시되었을 뿐만 아니라 Nuxt 모듈 생태계는 약 220개 모듈로 성장했습니다. 최근 이 분야의 몇 가지 개발 사항은 다음과 같습니다.

고체

Solid는 자체 메타 프레임워크 SolidStart의 안정적인 1.0 출시를 위해 노력해 왔습니다. SolidStart는 세분화된 반응, 등형 라우팅 및 다양한 렌더링 모드 지원을 자랑합니다. 주요 특징은 다음과 같습니다.

  • 세분화된 반응: Solid의 반응형 시스템은 정확한 업데이트와 최적의 성능을 제공하므로 효율적인 렌더링 및 상태 관리가 가능합니다.
  • 동형 라우팅: SolidStart는 통합된 라우팅 접근 방식을 제공하므로 개발자가 클라이언트와 서버 모두에서 원활하게 작동하는 경로를 정의할 수 있습니다.
  • 유연한 렌더링 모드: SolidStart는 서버 측 렌더링, 정적 사이트 생성, 클라이언트 측 렌더링 등 다양한 렌더링 모드를 지원하므로 개발자가 애플리케이션에 가장 적합한 방법을 선택할 수 있는 유연성을 제공합니다.

스벨테

작년에 Svelte팀은 중요한 Svelte 5의 다음 출시에 집중했습니다. 기타 주요 기능은 다음과 같습니다.

  • Svelte 5 출시: Svelte 5는 'Svelte 컴파일러 및 런타임의 재작성' 외에 Runes 개념도 도입했습니다.
  • 룬 문자 발표: Svelte 5에서 출시 예정인 룬 기능이 있습니다. "룬은 보편적이고 세분화된 반응을 이끌어냅니다... 룬을 사용하면 .svelte 파일의 경계를 넘어서 반응이 늘어납니다. Svelte 5의 반응은 신호를 기반으로 하지만 [다른 프레임워크와 달리] Svelte 5의 신호는 사용자가 직접 상호작용하는 것이 아니라 은밀한 구현 세부정보입니다."
  • SvelteKit 2 출시: SvelteKit는 Svelte의 메타 프레임워크입니다. 이 출시 버전에는 얕은 라우팅과 Vite 5 지원이 포함됩니다.

Chrome 오로라

Chrome Aurora는 웹 전반의 사용자 환경, 특히 성능 개선을 위해 다양한 오픈소스 웹 프레임워크와 공동작업하는 Google의 팀입니다. 다음은 지난 한 해 동안 Google에서 참여한 이니셔티브 중 일부입니다.

결론

JavaScript 프레임워크 생태계는 계속해서 빠른 속도로 발전하고 있으며, 각 프레임워크에는 자체적인 혁신과 개선사항이 있습니다. Angular, React, Vue와 같은 기존 프레임워크의 최신 기능에 관심이 있거나 Astro, Remix, Solid와 같은 최신 옵션을 살펴보는 데 관심이 있다면 따라잡을 수 있는 흥미로운 개발이 무궁무진합니다.

개발자로서 이러한 개선사항에 관한 정보를 계속 확인하면 프로젝트의 프레임워크를 선택할 때 정보에 입각한 결정을 내리는 데 도움이 됩니다. 각 프레임워크의 강점과 고유한 기능을 이해함으로써 프로젝트 요구사항 및 개발 환경설정에 가장 적합한 프레임워크를 선택할 수 있습니다.

이 개요가 JavaScript 프레임워크의 현재 상태를 파악하는 데 도움이 되었기를 바랍니다. 이 블로그 게시물에서 다룬 주제에 대해 자세히 알아보려면 Google I/O에서 함께 제공되는 강연을 확인하세요. 즐겁게 코딩해 보세요!