피드로 돌아가기
Dev.toFrontend
원문 읽기
Importmaps 도입으로 Rails JavaScript 빌드 단계 완전 제거함
Ditch Node.js: A Simple Guide to Rails Importmaps
AI 요약
Context
기존 Rails에서 Webpacker와 node_modules 기반 JavaScript 관리는 프로젝트 용량을 비대하게 만들고 빌드 대기 시간을 증가시킴. 특히 소규모 앱이나 개인 개발자에게 부하가 컸음.
Technical Solution
- Importmap: HTML 에 라이브러리 이름과 CDN URL을 매핑하는 JSON 딕셔너리 역할을 함
- bin/importmap pin 명령어로 CDN에서 라이브러리를 자동 검색하고 config/importmap.rb에 등록함
- javascript_importmap_tags 헬퍼로 브라우저가 이해하는 importmap JSON을 동적 생성함
- 브라우저 네이티브 ES Modules를 활용하여 별도 번들링 없이 직접 CDN에서 파일을 다운로드하고 실행함
Impact
빌드 단계 완전 제거로 코드 수정 후 브라우저 새로고침만으로 즉시 반영됨. node_modules 폴더가 사라져 프로젝트 크기가 크게 감소함. CDN 기반 로딩으로 사용자 브라우저 캐시 히트율 향상됨.
Key Takeaway
브라우저의 네이티브 기능을 최대한 활용하면 복잡한 빌드 도구 없이도 모던 JavaScript 개발이 가능함. 별도 번들링 도구 없이도 CDN과 ES Modules만으로 충분히 프로덕션 수준의 JavaScript 관리가 가능함.
실천 포인트
Rails 앱에서 Hotwire와 Stimulus를 사용할 경우 Webpacker를 제거하고 Importmaps로 전환하면 빌드 설정 없이도 npm 패키지를 CDN에서 직접 로드할 수 있음. bin/importmap pin으로 라이브러리를 추가하고 javascript_importmap_tags를 레이아웃에 포함시키기만 하면 됨.