Inertia.js의 핵심 원칙 및 작동 방식
Inertia.js는 클라이언트 측 JavaScript 라이브러리와 서버 측 어댑터(Rails용 inertia-rails 젬)로 구성됩니다. 그 작동 방식은 다음과 같습니다:
-
초기 요청: Rails는 단일
div안에 JSON 데이터가 포함된 전체 HTML 페이지를 반환합니다. 클라이언트 측 Inertia는 이 JSON을 추출하여 React, Vue 또는 Svelte 컴포넌트 트리를 렌더링합니다. -
이후 요청: 사용자가 애플리케이션과 상호작용할 때, Rails 서버는 JSON 데이터만 반환하고, Inertia는 이 새로운 데이터를 기존 컴포넌트 트리에 교체하여 다시 렌더링합니다. 이는 Turbolinks의 페이지 전환 방식과 유사하게 작동하여 전체 페이지 새로고침 없이 SPA 경험을 제공합니다.
Inertia Rails의 개발 원칙
Inertia는 Rails 개발자에게 익숙한 방식으로 개발할 수 있도록 다음 원칙을 강조합니다:
-
HTTP 활용: 전통적인 Rails 애플리케이션처럼 링크를 사용하고 서버 요청을 통해 데이터를 변경하는 등 HTTP를 적극적으로 활용합니다.
-
Rails 주도: 서버(Rails)가 애플리케이션의 상태를 관리하고 라우트를 정의하며, 프런트엔드의 복잡성을 백엔드로 옮겨 React는 뷰 레이어 역할에 집중합니다.
-
React를 뷰 레이어로: React는 주로 UI 요소에 대한 로컬 상태만 관리하며, 서버로부터 전달된 props를 기반으로 렌더링되어 단방향 데이터 흐름을 유지합니다.
-
페이지를 계약으로: Inertia는 애플리케이션을 ‘페이지’ 단위로 분할하며, 각 페이지는 뷰 모델과 유사하게 작동하여 데이터와 로직을 캡슐화합니다.
주요 기능 및 데모 시연
발표에서는 다양한 데모를 통해 Inertia Rails의 주요 기능을 시연했습니다:
-
빠른 시작:
rails new와inertia-rails제너레이터를 통해 Vite, TypeScript, React, TailwindCSS가 포함된 Inertia 앱을 손쉽게 설정하는 과정을 보여주었습니다. -
inertia link및inertia form: SPA 내비게이션을 위한inertia link컴포넌트와 Rails의 유효성 검사를 자동으로 처리하는inertia form의 사용법을 시연했습니다. -
inertia share: 애플리케이션 전반에 걸쳐 플래시 메시지나 로그인 사용자 정보와 같은 공통 데이터를 공유하는 방법을 설명했습니다. 람다를 사용하여 속성 평가를 지연시켜 성능을 최적화하는 기법도 소개되었습니다. -
버전 관리: 클라이언트와 서버 간 버전 불일치 시 자동으로 전체 페이지를 새로고침하여 오래된 JavaScript 코드로 인한 문제를 방지하는 기능을 시연했습니다.
-
부분 새로고침(Partial Reloads) 및 지연 속성(Deferred Props): 특정 데이터만 부분적으로 새로고침하거나(예: 실시간 검색 결과), 느린 데이터를 비동기적으로 로드하여 초기 페이지 로드 속도를 향상시키는
only옵션과deferred prop의 활용법을 보여주었습니다. -
외부 프로토콜 통합: Action Cable(WebSocket)을 사용하여 실시간 채팅 기능을 구현하며,
client-side visit을 통해 Inertia 페이지 객체에 WebSocket으로 수신된 데이터를 병합하여 React 컴포넌트를 업데이트하는 방법을 시연했습니다. 이는 Inertia 프로토콜 외부의 데이터를 통합하는 유연성을 보여줍니다. -
Alba및Typealizer: Rails 백엔드에서Alba시리얼라이저와Typealizer플러그인을 사용하여 TypeScript 타입을 자동 생성함으로써 프런트엔드 개발의 편의성과 안정성을 극대화하는 방법을 소개했습니다.
점진적 도입 및 공존
Inertia는 기존 Rails 애플리케이션에 점진적으로 도입될 수 있습니다. 특정 페이지나 섹션만 Inertia로 전환하고, 나머지 부분은 기존 Rails 뷰(ERB)를 유지하는 것이 가능합니다. 이는 Devise와 같은 기존 Rails 젬과의 원활한 공존을 통해 입증되었습니다. Inertia는 Rails 라우트를 진입점으로 사용하므로, Inertia 경로로 진입하면 SPA 경험이 시작되고, Inertia가 아닌 경로로 이동하면 일반적인 Rails 페이지 로딩이 발생합니다.