Webpacker 기반 Rails 환경 내 React 컴포넌트 통합 아키텍처 설계

Context

기존 Sprockets 중심의 Asset Pipeline 구조가 현대적 Javascript 라이브러리 및 모듈 시스템 처리의 한계를 가짐. 특히 NPM, Yarn, Webpack 기반의 복잡한 종속성 관리와 효율적인 컴파일 프로세스 필요성이 대두됨.

Technical Solution

• Webpacker 도입을 통한 Webpack 기반 Javascript 컴파일 및 번들링 체계 구축
• webpack-dev-server 활용으로 개발 환경 내 실시간 컴파일 및 브라우저 자동 반영으로 개발 사이클 단축
• react-rails gem과 react_ujs 드라이버를 결합하여 Rails View 내 특정 위치에 React 컴포넌트를 동적 마운트하는 구조 설계
• require.context를 활용한 컴포넌트 자동 로드 및 Context 설정을 통한 컴포넌트 관리 효율성 제고
• Rails의 서버 사이드 렌더링과 React의 컴포넌트 기반 UI를 혼합하여 SPA 전환 없이 필요한 부분에만 인터랙티브 요소 적용