Rails에서 Trix와 ActionText 사용하기

웹 애플리케이션을 개발할 때, 사용자에게 직관적이고 매력적인 콘텐츠 편집 경험을 제공하는 것은 매우 중요합니다. Ruby on Rails에서는 Trix라는 WYSIWYG(What You See Is What You Get) 편집기를 ActionText와 함께 사용하여 이러한 요구를 충족할 수 있습니다. 이 글에서는 Rails에서 Trix와 ActionText를 설정하고 사용하는 방법에 대해 알아보겠습니다.

ActionText란 무엇인가?

ActionText는 Rails 6에서 도입된 기능으로, 사용자가 작성한 텍스트 콘텐츠를 쉽게 관리하고 저장할 수 있도록 도와줍니다. ActionText는 HTML, 이미지, 비디오 등 다양한 미디어를 포함한 리치 텍스트를 지원합니다. 이를 통해 개발자는 복잡한 텍스트 편집 기능을 손쉽게 구현할 수 있습니다.

Trix 편집기 소개

Trix는 Basecamp에서 개발한 오픈 소스 WYSIWYG 편집기로, 사용자가 텍스트를 쉽게 작성하고 포맷할 수 있도록 도와줍니다. Trix는 ActionText와 통합되어 있어, Rails 애플리케이션에서 리치 텍스트를 쉽게 처리할 수 있습니다.

Trix의 주요 기능

리치 텍스트 편집: 텍스트 스타일, 링크, 이미지 삽입 등 다양한 기능 제공
사용자 친화적인 인터페이스: 직관적인 UI로 사용자가 쉽게 접근 가능
모바일 친화적: 다양한 디바이스에서 최적화된 경험 제공

Rails 애플리케이션에 ActionText와 Trix 설정하기

이제 Rails 애플리케이션에 ActionText와 Trix를 설정하는 방법을 단계별로 알아보겠습니다.

1단계: Rails 애플리케이션 생성

먼저, 새로운 Rails 애플리케이션을 생성합니다. 터미널에서 다음 명령어를 입력하세요:

rails new myapp --skip-javascript

이 명령어는 새로운 Rails 애플리케이션을 생성하며, JavaScript 파일 생성을 건너뜁니다. 이후에 필요한 JavaScript를 수동으로 추가할 것입니다.

2단계: ActionText 설치

다음으로, ActionText를 설치합니다. Gemfile에 다음 줄을 추가하세요:

gem 'actiontext'

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

bundle install

이제 ActionText를 설치하기 위해 마이그레이션을 실행합니다:

rails action_text:install
rails db:migrate

3단계: Trix 설치

Trix를 설치하기 위해, 다음 명령어를 사용하여 Trix를 추가합니다:

yarn add trix

이제 Trix를 애플리케이션에 포함시키기 위해, app/javascript/packs/application.js 파일에 다음 코드를 추가합니다:

import "trix"
import "@rails/actiontext"

4단계: Trix 스타일 추가

Trix의 기본 스타일을 사용하기 위해, app/assets/stylesheets/application.scss 파일에 다음 코드를 추가합니다:

@import "trix";

5단계: 모델 생성

이제 ActionText를 사용할 모델을 생성합니다. 예를 들어, Post 모델을 생성해 보겠습니다:

rails generate model Post title:string content:text
rails db:migrate

그런 다음, Post 모델에 ActionText를 추가합니다. app/models/post.rb 파일을 열고 다음 코드를 추가하세요:

class Post < ApplicationRecord
  has_rich_text :content
end

6단계: 뷰 설정

이제 Trix 편집기를 사용할 뷰를 설정합니다. app/views/posts/_form.html.erb 파일을 열고 다음 코드를 추가하세요:

<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    
      <%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:
      
        <% post.errors.full_messages.each do |message| %>
          <%= message %>
        <% end %>
      
    
  <% end %>

  
    <%= form.label :title %>
    <%= form.text_field :title %>
  

  
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  

  
    <%= form.submit %>
  
<% end %>

7단계: 컨트롤러 설정

이제 PostsController를 설정하여 사용자가 작성한 포스트를 저장할 수 있도록 합니다. app/controllers/posts_controller.rb 파일을 열고 다음 코드를 추가하세요:

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to @post, notice: 'Post was successfully created.'
    else
      render :new
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

결론

이제 Rails 애플리케이션에서 ActionText와 Trix를 사용하여 리치 텍스트 편집 기능을 구현할 수 있습니다. 이 조합은 사용자에게 매력적이고 직관적인 콘텐츠 작성 경험을 제공하며, 개발자는 복잡한 텍스트 처리 로직을 간소화할 수 있습니다. ActionText와 Trix를 활용하여 여러분의 애플리케이션을 한층 더 발전시켜 보세요!

이 글이 Rails에서 Trix와 ActionText를 사용하는 데 도움이 되었기를 바랍니다. 추가적인 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요!