Showcase는 Rails 컨설턴트이자 전 Rails 코어 팀 멤버인 Kasper Timm Hansen이 주로 작성한 Rails 엔진으로, 디자인 시스템을 문서화하는 데 사용됩니다. 코드 분석에 앞서 Showcase의 작동 방식을 이해하기 위해 프로젝트에서 직접 사용하는 방법을 알아봅니다.
1. Showcase 설정 및 컴포넌트 구축
- Rails 애플리케이션 생성: 새로운 Rails 애플리케이션을 생성하고 해당 디렉토리로 이동합니다.
- Gemfile 수정:
showcase-rails와 코드 하이라이팅을 위한rougeGem을Gemfile에 추가하고bundle install을 실행합니다. - 엔진 마운트: 엔진의 라우트를 메인 Rails 애플리케이션에서 사용할 수 있도록
config/routes.rb에mount Showcase::Engine => "/docs"를 추가합니다. - 컴포넌트 생성:
app/components/button_component.rb에 다양한 크기의 버튼 컴포넌트를 정의하고,app/assets/stylesheets/application.css에 스타일을 추가합니다. - 미리보기 파일 생성:
showcase/previews/components/button_preview.rb에 버튼 컴포넌트의 미리보기 파일을 생성하여 문서화합니다. - 로컬 확인:
http://localhost:3000/docs/showcase/previews/components/button에서 첫 번째 미리보기를 확인할 수 있습니다.
2. Rails 엔진 파일 구조 및 로컬 실행 환경 설정
- 저장소 클론: Showcase 저장소를 로컬에 클론하고 텍스트 편집기로 파일을 살펴봅니다.
- 파일 구조 이해: Rails 엔진의 파일 구조는 일반적인 Rails 애플리케이션과 유사하며, 모델, 뷰, 컨트롤러, 라우트 등을 포함합니다. 이는 엔진이 메인 Rails 애플리케이션에 병합되는 독립 실행형 Rails 애플리케이션으로 간주될 수 있음을 의미합니다.
/test/dummy폴더: 엔진 테스트에 사용되는/test폴더 내의/test/dummy폴더는 실제 Rails 애플리케이션 구조를 가지고 있습니다. 이 폴더는 개발을 위해 브라우저에서 실행할 수 있는 실제 Rails 애플리케이션을 포함하며, 엔진 테스트를 실제 Rails 애플리케이션 컨텍스트에서 작성하는 데 유용합니다.showcase.gemspec분석:gemspec파일은 Showcase의 저자 정보, 라이선스, 유용한 링크 외에도Rails버전 6.1 이상에 대한 의존성(add_dependency)과 개발용tailwindcss-rails의존성(add_development_dependency)을 명시합니다.Gemfile분석:Gemfile은/test/dummy애플리케이션을 실행하는 데 사용되는 추가 개발 의존성을 나열합니다.RAILS_VERSION환경 변수를 통해 개발에 사용할 Rails 버전을 지정할 수 있으며, 기본값은 7.0입니다 (이 글에서는 8.X 버전을 사용).- 로컬 실행:*
RAILS_VERSION=8 bundle install명령으로 의존성을 설치합니다. RAILS_VERSION=8 rails s명령으로 Rails 서버를 실행합니다.http://localhost:3000에 접속하여test/dummy애플리케이션의 Showcase 랜딩 페이지를 확인하고 터미널에서 서버 로그를 모니터링할 수 있습니다. 이는 Showcase의 작동 방식을 분석하는 데 매우 유용합니다.