Asset Pipeline & Vite
JavaScript, CSS, 이미지 등 프론트엔드 에셋 관리
Rails의 프론트엔드 에셋 관리는 여러 번 진화했습니다.
Sprockets (Asset Pipeline) — Rails 3.1~
Ruby 기반 에셋 컴파일러
JavaScript, CSS, 이미지를 연결(concatenate) + 압축(minify)
파일명에 해시 추가(fingerprinting)로 캐시 최적화
stylesheet_link_tag,javascript_include_tag
Webpacker — Rails 5.1~6.1 (폐지됨)
Webpack 기반, Node.js 필요
React/Vue 등 모던 JS 프레임워크 지원
Vite — Rails 7+ (현재 추천)
빠른 개발 서버 (HMR — Hot Module Replacement)
모던 빌드 도구 (Rollup)
vite_javascript_tag,vite_stylesheet_tag
Import Maps — Rails 7 기본
번들러 없이 브라우저의 ES Module을 직접 사용
간단한 앱에 적합, 빌드 과정 없음
이 프로젝트는 Vite를 사용합니다. app/javascript/entrypoints/에 앱별 진입점을 정의합니다.
핵심 포인트
app/javascript/entrypoints/ 에 진입점 파일 생성 (예: app51.js)
vite_javascript_tag "app51" — 레이아웃에서 JS 로드
vite_stylesheet_tag "app51" — 레이아웃에서 CSS 로드
Tailwind CSS: @tailwind base; @tailwind components; @tailwind utilities;
개발 시 HMR로 변경사항 즉시 반영
프로덕션: vite:build로 최적화된 번들 생성
장점
- ✓ Vite: 매우 빠른 개발 서버 (HMR)
- ✓ 에셋 핑거프린팅으로 캐시 최적화
- ✓ 앱별 독립 번들로 불필요한 코드 로드 방지
- ✓ Tailwind CSS와 자연스럽게 통합
단점
- ✗ Node.js 의존 (Vite)
- ✗ 빌드 도구 설정 복잡할 수 있음
- ✗ Sprockets/Import Maps/Vite 혼재 시 혼란
- ✗ HMR이 가끔 동작 안 할 수 있음