Rails 프로젝트를 Esbuild와 TailwindCSS로 설정하는 방법

Ruby on Rails는 웹 애플리케이션 개발을 위한 강력한 프레임워크입니다. 최근에는 프론트엔드 빌드 도구인 Esbuild와 CSS 프레임워크인 TailwindCSS를 함께 사용하여 더 빠르고 효율적인 개발 환경을 구축하는 것이 인기를 끌고 있습니다. 이 글에서는 Rails 프로젝트를 Esbuild와 TailwindCSS로 설정하는 방법을 단계별로 안내하겠습니다.

1. Rails 프로젝트 생성하기

먼저, 새로운 Rails 프로젝트를 생성해야 합니다. 터미널을 열고 다음 명령어를 입력하세요:

rails new myapp --skip-javascript

위 명령어는 'myapp'이라는 이름의 새로운 Rails 애플리케이션을 생성합니다. '--skip-javascript' 플래그는 기본 JavaScript 설정을 건너뛰도록 합니다. 이는 Esbuild를 사용할 것이기 때문입니다.

2. Esbuild 설치하기

Esbuild는 매우 빠른 JavaScript 번들러입니다. Rails에서 Esbuild를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

2.1. Gemfile 수정하기

먼저, Gemfile에 'esbuild' gem을 추가합니다. Gemfile을 열고 다음 줄을 추가하세요:

gem "esbuild", "~> 0.14.0"

그런 다음, 다음 명령어를 실행하여 gem을 설치합니다:

bundle install

2.2. Esbuild 설치 및 설정

이제 Esbuild를 설치하고 설정할 차례입니다. 다음 명령어를 입력하여 Esbuild를 설치합니다:

rails esbuild:install

이 명령어는 Esbuild를 설치하고 기본 설정 파일을 생성합니다. 이제 'app/javascript' 디렉토리에서 JavaScript 파일을 관리할 수 있습니다.

3. TailwindCSS 설치하기

TailwindCSS는 유틸리티 중심의 CSS 프레임워크로, 빠르고 쉽게 스타일링을 할 수 있게 도와줍니다. TailwindCSS를 Rails 프로젝트에 추가하는 방법은 다음과 같습니다.

3.1. TailwindCSS 설치

TailwindCSS를 설치하기 위해, 다음 명령어를 입력하여 TailwindCSS와 관련 패키지를 설치합니다:

npm install -D tailwindcss postcss autoprefixer

3.2. TailwindCSS 초기화

TailwindCSS를 초기화하려면 다음 명령어를 입력하세요:

npx tailwindcss init -p

이 명령어는 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다. 이 파일들은 TailwindCSS의 설정을 관리하는 데 사용됩니다.

3.3. TailwindCSS 설정하기

이제 'tailwind.config.js' 파일을 열고, 'content' 배열에 TailwindCSS가 적용될 파일 경로를 추가합니다:

module.exports = {
  content: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 설정은 TailwindCSS가 Rails의 뷰 파일과 JavaScript 파일에서 사용될 수 있도록 합니다.

3.4. TailwindCSS 스타일 추가하기

이제 TailwindCSS의 기본 스타일을 추가할 차례입니다. 'app/assets/stylesheets/application.tailwind.css' 파일을 생성하고 다음 내용을 추가하세요:

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 이 파일을 'application.css'에 포함시켜야 합니다. 'app/assets/stylesheets/application.css' 파일을 열고 다음 줄을 추가하세요:

@import "application.tailwind";

4. Esbuild와 TailwindCSS 통합하기

이제 Esbuild와 TailwindCSS를 통합하여 사용할 준비가 되었습니다. 'app/javascript/application.js' 파일을 열고 다음 내용을 추가하세요:

import "../stylesheets/application.tailwind.css";

이제 TailwindCSS 스타일이 JavaScript 파일에서 사용될 수 있습니다.

5. 개발 서버 실행하기

모든 설정이 완료되었으니, 이제 Rails 개발 서버를 실행해 보겠습니다. 다음 명령어를 입력하세요:

rails server

서버가 실행되면, 웹 브라우저에서 http://localhost:3000에 접속하여 애플리케이션을 확인할 수 있습니다.

6. TailwindCSS로 스타일링하기

이제 TailwindCSS를 사용하여 애플리케이션의 스타일을 추가할 수 있습니다. 예를 들어, 'app/views/welcome/index.html.erb' 파일을 열고 다음과 같이 수정해 보세요:

Hello, Rails with TailwindCSS!

Welcome to your new Rails application styled with TailwindCSS.

이제 페이지를 새로 고침하면 TailwindCSS 스타일이 적용된 내용을 확인할 수 있습니다.

7. 마무리

이 글에서는 Rails 프로젝트를 Esbuild와 TailwindCSS로 설정하는 방법을 단계별로 안내했습니다. 이 조합은 빠르고 효율적인 개발 환경을 제공하며, 현대적인 웹 애플리케이션을 구축하는 데 큰 도움이 됩니다. 이제 여러분의 프로젝트에 TailwindCSS를 활용하여 멋진 UI를 만들어 보세요!

추가적인 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요. 즐거운 코딩 되세요!