Rails의 프론트엔드 진화는 크게 세 가지 시대로 구분할 수 있습니다.
첫 번째는 기반(Foundation)의 시대입니다. 2004년 Ajax의 등장과 함께 복잡했던 JavaScript 개발 환경에서 Rails는 Ajax 헬퍼를 도입하여 전체 페이지를 새로고침하지 않고도 부분 업데이트를 가능하게 했습니다. 이는 Rails 프론트엔드 개발의 핵심 아이디어가 되었습니다. PrototypeJS와 Scriptaculous 같은 라이브러리를 통해 DOM 조작과 애니메이션을 지원했으며, RJS(Ruby JavaScript)를 통해 Ruby 코드에서 JavaScript를 생성하는 방식을 선보였습니다. 비록 RJS의 수명은 짧았지만, 이는 UJS(Unobtrusive JavaScript)와 Turbolinks와 같은 아이디어로 이어져, 서버 주도적이고 점진적으로 향상되는 프론트엔드 개발이라는 Rails의 비전을 확고히 했습니다. 특히 Turbolinks는 Ajax를 통한 HTML 재렌더링 자동화를 시도했으나, 기존 JavaScript 플러그인과의 호환성 문제로 보편적으로 수용되지는 못했습니다.
두 번째는 JavaScript 생태계 통합의 시대입니다. JavaScript 생태계가 급격히 성장하면서 Rails는 이 변화를 수용해야 했습니다. Rails 3.1에서 도입된 Asset Pipeline은 개발자들이 Sass, CoffeeScript 등 현대적인 JavaScript 도구를 사용할 수 있게 했습니다. 이후 Rails 5.1에서는 Webpacker를 도입하여 Webpack을 Ruby로 래핑함으로써 거의 모든 JavaScript 생태계에 접근할 수 있게 했으나, 복잡성 문제가 발생했습니다. 이 시기의 가장 중요한 추가 기능은 Rails 5에서 도입된 Rails API 모드였습니다. 이는 Rails를 모든 프론트엔드 프레임워크의 완벽한 백엔드로 활용할 수 있게 하여, 많은 Rails 개발자들이 풀스택 잠재력을 인지하지 못한 채 백엔드 전용으로 Rails를 사용하게 되는 계기가 되었습니다.
세 번째는 현대적인 접근 방식의 완성 시대입니다. Web Components, ES6 모듈, 최신 CSS, WebSockets 등 웹 플랫폼 표준이 성숙하면서 Rails는 세 가지 ‘예언된’ 프론트엔드 방식을 전개할 준비를 마쳤습니다.
-
첫 번째 방식: Rails API. JavaScript 프레임워크들이 프론트엔드 영역에서 경쟁하는 동안, Rails는 완벽한 백엔드 기반이 되는 데 집중했습니다. 인증, 권한 부여, 데이터베이스 계층, 직렬화, 백그라운드 작업 등 모든 백엔드 기능이 즉시 제공되어 대규모 팀이 프론트엔드에 완전한 자유를 가지면서도 견고한 백엔드를 구축할 수 있는 최적의 솔루션입니다.
-
두 번째 방식: Hotwire. Hotwire는 이전 Rails 버전의 아이디어를 기반으로 구축된 도구 모음으로, 서버 주도 개발을 빠르고 안전하며 사용하기 쉽게 만듭니다. 페이지를 작은 부분(Turbo Frames)으로 분할하여 전체 페이지 새로고침 없이 특정 부분만 교체하는 방식으로 작동합니다. 이는 2005년의 아이디어(부분 업데이트)를 현대적으로 진화시킨 것입니다. Stimulus는 가볍고 필요한 경우에만 상호작용을 추가하는 JavaScript 프레임워크이며, Web Components는 생명주기 문제를 해결하고 SJR의 보안 문제를 개선하여 HTML 응답만을 반환하게 합니다. Hotwire는 이전 버전의 문제점을 해결하여 소규모 팀이나 단독 개발자가 현대적인 인터랙티브 애플리케이션을 빠르게 구축할 수 있도록 합니다.
-
세 번째 방식: 하이브리드 솔루션 (예: Inertia.js). 이 방식은 두 세계의 장점을 결합합니다. Hotwire 애플리케이션에 복잡한 프론트엔드 컴포넌트를 통합해야 할 때, Stimulus 컨트롤러로 래핑하거나 Turbo Mount와 같은 젬을 사용하여 React, Vue, Svelte 컴포넌트를 Rails 뷰에서 직접 임베드할 수 있습니다. 특히 Inertia.js는 프론트엔드와 백엔드 프레임워크 간의 다리 역할을 하여, 클라이언트 측 라우팅 및 상태 관리를 백엔드로 이동시킵니다. 이는 Rails 라우트와 컨트롤러를 일반 애플리케이션과 거의 동일하게 사용하면서도 ERB 레이어를 React/Vue/Svelte 컴포넌트로 대체하여 API 관리 없이 JavaScript 생태계의 장점을 활용할 수 있게 합니다. Laravel 생태계에서 안정화된 Inertia.js는 Rails에서도 Inertia Rails 젬을 통해 쉽게 사용할 수 있으며, Rails 백엔드의 강력함과 프론트엔드 생태계의 유연성을 동시에 원하는 경우에 적합합니다.
Rails는 이 세 가지 경로 모두를 지원하며, 개발자가 특정 접근 방식에 갇히지 않도록 합니다. 이는 JavaScript 생태계를 적대시하지 않고 포용하며, 미래의 어떤 새로운 기술이 등장하더라도 이를 흡수하고 통합할 수 있도록 포지셔닝하는 Rails의 탁월함을 보여줍니다.