액션 뷰 헬퍼

이 가이드를 읽고 나면 다음을 알 수 있습니다:

날짜, 문자열, 숫자를 형식화하는 방법.
텍스트와 태그를 다루는 방법.
이미지, 비디오, 스타일시트 등에 링크하는 방법.
뷰에서 Atom 피드와 JavaScript를 다루는 방법.
콘텐츠를 캐시, 캡처, 디버그 및 sanitize하는 방법.

다음은 액션 뷰에서 가장 일반적으로 사용되는 헬퍼 중 일부를 설명합니다. 이는 좋은 시작점이 되지만, 더 자세한 내용은 전체 API 문서를 참조하는 것이 좋습니다.

폼

폼 헬퍼는 표준 HTML 요소만 사용하는 것보다 모델 작업을 간소화합니다. 모델을 기반으로 폼을 생성하는 다양한 메서드를 제공합니다. 일부 메서드는 텍스트 필드, 비밀번호 필드, 선택 드롭다운 등과 같은 특정 유형의 입력에 해당합니다. 폼이 제출되면 폼 내의 입력이 params 객체로 그룹화되어 컨트롤러로 다시 전송됩니다.

폼 헬퍼에 대해 자세히 알아보려면 액션 뷰 폼 헬퍼 가이드를 참조하세요.

탐색

라우팅 하위 시스템에 의존하는 링크와 URL을 구축하는 메서드 집합입니다.

url_for

제공된 options에 대한 URL을 반환합니다.

url_for @profile
# => /profiles/1

url_for [ @hotel, @booking, page: 2, line: 3 ]
# => /hotels/1/bookings/1?line=3&page=2

url_for @post # given a composite primary key [:blog_id, :id]
# => /posts/1_2

자산

뷰에서 이미지, JavaScript 파일, 스타일시트, 피드 등의 자산에 대한 HTML을 생성하는 메서드 집합입니다.

기본적으로 Rails는 public 폴더의 현재 호스트에 이러한 자산에 링크합니다. 그러나 config.asset_host를 애플리케이션 구성에서 설정하여 전용 자산 서버에서 자산을 가리키도록 할 수 있습니다. 일반적으로 config/environments/production.rb에서 설정합니다.

예를 들어 자산 호스트가 assets.example.com이라고 가정해 보겠습니다:

config.asset_host = "assets.example.com"

그러면 image_tag에 대한 해당 URL은 다음과 같습니다:

image_tag("rails.png")
# => <img src="//assets.example.com/images/rails.png" />

audio_tag

단일 태그의 문자열 소스 또는 여러 소스의 중첩된 소스 태그를 사용하여 HTML 오디오 태그를 생성합니다. sources는 전체 경로, 공용 오디오 디렉토리의 파일 또는 Active Storage 첨부 파일일 수 있습니다.

audio_tag("sound")
# => <audio src="/audios/sound"></audio>

audio_tag("sound.wav", "sound.mid")
# => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio>

audio_tag("sound", controls: true)
# => <audio controls="controls" src="/audios/sound"></audio>

정보: 내부적으로 audio_tag는 AssetUrlHelpers의 audio_path를 사용하여 오디오 경로를 구축합니다.

자세한 내용은 API 문서를 참조하세요.

image_tag

소스에 대한 HTML 이미지 태그를 반환합니다. source는 전체 경로 또는 app/assets/images 디렉토리에 있는 파일일 수 있습니다.

image_tag("icon.png")
# => <img src="/assets/icon.png" />

image_tag("icon.png", size: "16x10", alt: "Edit Article")
# => <img src="/assets/icon.png" width="16" height="10" alt="Edit Article" />

정보: 내부적으로 image_tag는 AssetUrlHelpers의 image_path를 사용하여 이미지 경로를 구축합니다.

자세한 내용은 API 문서를 참조하세요.

javascriptincludetag

제공된 각 소스에 대한 HTML 스크립트 태그를 반환합니다. app/assets/javascripts 디렉토리에 있는 JavaScript 파일의 파일 이름(.js 확장자는 선택 사항)을 전달하거나 문서 루트에 상대적인 전체 경로를 전달할 수 있습니다.

javascript_include_tag("common")
# => <script src="/assets/common.js"></script>

javascript_include_tag("common", async: true)
# => <script src="/assets/common.js" async="async"></script>

가장 일반적인 속성 중 일부는 async와 defer입니다. async는 스크립트가 병렬로 로드되어 가능한 빨리 구문 분석되고 평가될 수 있도록 하고, defer는 문서 구문 분석이 완료된 후에 스크립트가 실행되도록 지정합니다.

정보: 내부적으로 javascript_include_tag는 AssetUrlHelpers의 javascript_path를 사용하여 스크립트 경로를 구축합니다.

자세한 내용은 API 문서를 참조하세요.

stylesheetlinktag

인수로 지정된 소스에 대한 스타일시트 링크 태그를 반환합니다. 확장자를 지정하지 않으면 자동으로 .css가 추가됩니다.

stylesheet_link_tag("application")
# => <link href="/assets/application.css" rel="stylesheet" />

stylesheet_link_tag("application", media: "all")
# => <link href="/assets/application.css" media="all" rel="stylesheet" />

media는 링크의 미디어 유형을 지정하는 데 사용됩니다. 가장 일반적인 미디어 유형은 all, screen, print 및 speech입니다.

정보: 내부적으로 stylesheet_link_tag는 AssetUrlHelpers의 stylesheet_path를 사용하여 스타일시트 경로를 구축합니다.

자세한 내용은 [API 문계속해서 한국어 번역을 제공하겠습니다.

video_tag

소스(들)에 대한 HTML 비디오 태그를 생성합니다. 문자열 소스의 단일 태그 또는 여러 소스의 중첩된 소스 태그를 사용할 수 있습니다. sources는 전체 경로, 공용 비디오 디렉토리의 파일 또는 Active Storage 첨부 파일일 수 있습니다.

video_tag("trailer")
# => <video src="/videos/trailer"></video>

video_tag(["trailer.ogg", "trailer.flv"])
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

video_tag("trailer", controls: true)
# => <video controls="controls" src="/videos/trailer"></video>

정보: 내부적으로 video_tag는 AssetUrlHelpers의 video_path를 사용하여 비디오 경로를 구축합니다.

자세한 내용은 API 문서를 참조하세요.

대체 태그

프로그래밍 방식으로 HTML 태그를 생성하는 메서드 집합입니다.

token_list

인수에서 토큰 문자열을 빌드하여 반환합니다. 이 메서드는 class_names의 별칭으로도 사용됩니다.

token_list("cats", "dogs")
# => "cats dogs"

token_list(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"

mobile, alignment = true, "center"
token_list("flex items-#{alignment}", "flex-col": mobile)
# => "flex items-center flex-col"
class_names("flex items-#{alignment}", "flex-col": mobile) # using the alias
# => "flex items-center flex-col"

Capture Blocks

템플릿 또는 레이아웃 파일의 다른 부분에서 사용할 수 있는 생성된 마크업을 추출하는 메서드 집합입니다.

capture를 통해 블록을 변수에 캡처하고, content_for를 통해 레이아웃에 사용할 블록을 캡처할 수 있습니다.

content_for

content_for를 호출하면 나중에 사용할 수 있도록 마크업 블록이 식별자에 저장됩니다. 식별자를 인수로 yield하여 다른 템플릿, 헬퍼 모듈 또는 레이아웃에 저장된 콘텐츠를 사용할 수 있습니다.

일반적인 사용 사례는 content_for 블록에서 페이지의 제목을 설정하는 것입니다.

특수 페이지의 뷰에서 content_for 블록을 정의하고 레이아웃 내에서 yield합니다. 다른 페이지의 경우 content_for 블록이 사용되지 않으면 비어 있어 아무것도 yield되지 않습니다.

<%# app/views/users/special_page.html.erb %>
<% content_for(:html_title) { "Special Page Title" } %>

<%# app/views/layouts/application.html.erb %>
<html>
  <head>
    <title><%= content_for?(:html_title) ? yield(:html_title) : "Default Title" %></title>
  </head>
</html>

위의 예에서 content_for? 술어 메서드를 사용하여 제목을 조건부로 렌더링하는 것을 알 수 있습니다. 이 메서드는 content_for를 사용하여 콘텐츠가 캡처되었는지 확인하여 레이아웃의 일부를 조정할 수 있습니다.

또한 헬퍼 모듈 내에서 content_for를 사용할 수 있습니다.

# app/helpers/title_helper.rb
module TitleHelper
  def html_title
    content_for(:html_title) || "Default Title"
  end
end

이제 레이아웃에서 html_title을 호출하여 content_for 블록에 저장된 콘텐츠를 검색할 수 있습니다. special_page와 같이 content_for 블록이 설정된 페이지의 경우 제목이 표시됩니다. 그렇지 않으면 “Default Title"이 표시됩니다.

경고: content_for는 캐시에서 무시됩니다. 따라서 조각 캐시에 사용되는 요소에는 사용하지 않아야 합니다.

참고: capture와 content_for의 차이점은 무엇일까요?

capture는 변수에 마크업 블록을 캡처하는 데 사용되는 반면, content_for는 나중에 사용할 수 있도록 식별자에 마크업 블록을 캡처하는 데 사용됩니다. 내부적으로 content_for는 실제로 capture를 호출합니다. 그러나 여러 번 호출될 때의 동작이 다릅니다.

content_for는 반복해서 호출될 수 있으며, 특정 식별자에 대해 받은 블록을 제공된 순서대로 연결합니다. 반면 capture는 블록의 내용만 반환하고 이전 호출을 추적하지 않습니다.

자세한 내용은 API 문서를 참조하세요.

성능

benchmark

비용이 많이 드는 작업 또는 잠재적인 병목 지점 주변에 benchmark 블록을 래핑하여 작업에 대한 시간 측정값을 얻습니다.

<% benchmark "Process data files" do %>
  <%= expensive_files_operation %>
<% end %>

이렇게 하면 로그에 Process data files (0.34523)과 같은 내용이 추가되어 코드 최적화 시 타이밍을 비교할 수 있습니다.

참고: 이 헬퍼는 Active Support의 일부이며 컨트롤러, 헬퍼, 모델 등에서도 사용할 수 있습니다.

자세한 내용은 API 문서를 참조하세요.

cache

전체 작업 또는 페이지 대신 뷰의 조각을 캐시할 수 있습니다. 이 기술은 메뉴, 뉴스 주제 목록, 정적 HTML 조각 등과 같은 조각을 캐시하는 데 유용합니다. 뷰 논리의 조각을 캐시 블록으로 래핑하고 다음 요청이 들어올 때 캐시 저장소에서 서비스할 수 있습니다.

cache 메서드는 캐시하려는 콘텐츠를 포함하는 블록을 사용합니다.

예를 들어 애플리케이션 레이아웃의 푸터를 cache 블록으로 래핑할 수 있습니다.

<% cache do %>
  <%= render "application/footer" %>
<% end %>

모델 인스턴스를 기반으로 캐시할 수도 있습니다. 예를 들어 페이지의 각 기사를 article 객체를 전달하여 개별적으로 캐시할 수 있습니다.

<% @articles.each do |article| %>
  <% cache article do %>
    <%= render article %>
  <% end %>
<% end %>

애플리케이션이 이 페이지에 대한 첫 번째 요청을 받으면 Rails는 고유한 키로 새 캐시 항목을 작성합니다. 키는 다음과 같습니다:

views/articles/index:bea67108094918eeba32cd4a6f786301/articles/1

Fragment Caching과 [API 문서](https://api.rubyonrails.org/classes/ActionView/Helpers/CacheHelper.html계속해서 한국어 번역을 제공하겠습니다.

atom_feed

Atom 피드는 콘텐츠를 동기화하는 데 사용되는 XML 기반 파일 형식이며 피드 리더에서 콘텐츠를 찾아보거나 검색 엔진이 추가 정보를 발견하는 데 도움이 될 수 있습니다.

이 헬퍼는 Atom 피드 구축을 쉽게 만들며, 주로 XML을 생성하는 Builder 템플릿에서 사용됩니다. 다음은 전체 사용 예입니다:

# config/routes.rb
resources :articles

# app/controllers/articles_controller.rb
def index
  @articles = Article.all

  respond_to do |format|
    format.html
    format.atom
  end
end

# app/views/articles/index.atom.builder
atom_feed do |feed|
  feed.title("Articles Index")
  feed.updated(@articles.first.created_at)

  @articles.each do |article|
    feed.entry(article) do |entry|
      entry.title(article.title)
      entry.content(article.body, type: "html")

      entry.author do |author|
        author.name(article.author_name)
      end
    end
  end
end

자세한 내용은 API 문서를 참조하세요.

debug

객체의 YAML 표현을 pre 태그로 래핑하여 반환합니다. 이를 통해 객체를 매우 읽기 쉽게 검사할 수 있습니다.

my_hash = { "first" => 1, "second" => "two", "third" => [1, 2, 3] }
debug(my_hash)

<pre class="debug_dump">---
first: 1
second: two
third:
- 1
- 2
- 3
</pre>

자세한 내용은 API 문서를 참조하세요.

액션 뷰 헬퍼

형식화

날짜

distanceoftimeinwords

timeagoin_words

숫자

numbertocurrency

numbertohuman

numbertohuman_size

numbertopercentage

numbertophone

numberwithdelimiter

numberwithprecision

텍스트

excerpt

pluralize

truncate

word_wrap

폼

탐색

button_to

current_page?

link_to

mail_to

url_for

Sanitization

sanitize

sanitize_css

strip_links

strip_tags

자산

audio_tag

autodiscoverylink_tag

faviconlinktag

image_tag

javascriptincludetag

picture_tag

preloadlinktag

stylesheetlinktag

video_tag

JavaScript

escape_javascript

javascript_tag

대체 태그

tag

token_list

Capture Blocks

capture

content_for

성능

benchmark

cache

atom_feed

debug