JS 프레임워크 오버헤드 없이 Rails에 인터랙션 더하기

Context

복잡한 프론트엔드 프레임워크 도입 시 발생하는 아키텍처 복잡도 증가 문제. 서버 렌더링 HTML 기반 환경에서 최소한의 JavaScript로 동적 기능을 구현해야 하는 필요성.

Technical Solution

• 서버 렌더링 HTML에 동작을 직접 연결하는 lightweight JavaScript 프레임워크 Stimulus 도입
• HTML data-attribute를 활용하여 Controller, Target, Action, Value를 정의하는 선언적 연결 방식
• DOM 직접 탐색 대신 static targets 정의를 통한 요소 참조 및 가독성 확보
• browser event를 Controller 메서드에 매핑하는 action 구조로 glue code 제거
• HTML에서 Controller로 구조화된 데이터를 전달하는 values 설정을 통한 유연한 구성
• Turbo를 통한 서버 중심 페이지 업데이트와 Stimulus의 국소적 인터랙션 제어를 결합한 하이브리드 스택 설계

Key Takeaway

UI 상태 관리의 복잡도를 프론트엔드 프레임워크가 아닌 서버 렌더링 HTML과 작은 단위의 Controller로 분산하여 개발 생산성을 극대화하는 전략.