방법 - 레일 터보

왜 터보인가

NO JS?!



애플리케이션이 단순한 구식 1 요청 1 뷰보다 더 '동적'이어야 하는 경우 일반적으로 자바스크립트 또는 React와 같은 완전한 자바스크립트 프레임워크를 사용하여 페이지를 단일 페이지 애플리케이션으로 전환하지만 이는 번거로운 작업입니다. 하나의 개발자로서 스택을 유지하는 능력의 레일스 정신.

Turbo는 Rails 애플리케이션에서 자바스크립트에 대한 요구 사항을 줄이고 단일 페이지 애플리케이션처럼 만듭니다(대체는 아니지만).

이것은 레일 애플리케이션에서 터보를 실행하고 사용하는 빠른 '방법'입니다.
레일에서 터보를 사용하는 방법, 크레딧은 https://hotwired.dev/에 있습니다. 터보에 대한 설명서를 확인하려면 https://turbo.hotwired.dev/handbook/introduction을 참조하십시오.

요구 사항

최소 rails 6 앱(rails 7 앱에 자동으로 설치됨), rails 6에 설치하려면 https://github.com/hotwired/turbo-rails#:~:text=Add%20the%20turbo,Turbo%20Stream%20broadcasting을 참조하십시오.

Rails 7 앱에서 처음부터 단계별 프로세스.

전제 조건rails -v
Rails 7.0.2.4
그리고ruby -v
ruby 3.0.0p0그렇지 않으면 기계에 레일을 설치하려면 https://guides.rubyonrails.org/getting_started.html을 참조하십시오.

실행 rails new turbo-examplecd turbo-example 및 실행rails s을 통해 작동하는지 확인합니다.Listening on http://localhost:3000/items
와 같은 내용이 표시되어야 합니다.
다음으로 간단한 모델 '항목'을 만들어 보겠습니다.
rails g scaffold Item title:string description:text 및 rake db:migrate
브라우저에서 http://localhost:3000/items 또는 가지고 있는 URL로 이동하면 매우 비어 있는 항목 목록을 볼 수 있습니다.

Turbo_frame

app/views/items/index.html.erb로 이동하여 마지막 줄 '새 항목'을

<%= turbo_frame_tag "new_item" do %>
  <%= link_to "New item", new_item_path %>
<% end %>

이제 app/views/items/new.html.erb로 이동하여 양식 렌더링을 다음과 같이 래핑합니다.

<%= turbo_frame_tag "new_item" do %>
  <%= render "form", item: @item %>
<% end %>

이제 인덱스의 항목 목록에 터보 프레임이 있습니다. 새 항목을 클릭하거나 생성할 때 페이지가 다시 로드되지 않는 것을 볼 수 있습니다. 그러나 새 항목을 실제로 보려면 새로고침해야 합니다.

이를 위해 turbo_stream을 사용할 수 있습니다.

Turbo_stream

app/views/items/index.html.erb로 이동
항목 div 위에 <%= turbo_stream_from @items %>를 추가합니다.
그래서 그것은 보인다

<h1>Items</h1>

<%= turbo_stream_from @items %>

<div id="items">
  <% @items.each do |item| %>
    <%= render item %>
    <p>
      <%= link_to "Show this item", item %>
    </p>
  <% end %>
</div>


<%= turbo_frame_tag "new_item" do %>
  <%= link_to "New item", new_item_path %>
<% end %>

다음으로 app/models/item.rb로 이동하여 broadcasts를 추가합니다.

이렇게 하면 모델이 발생하는 모든 일을 브로드캐스트할 수 있습니다(업데이트 생성 및 삭제). 이것은 인증 권한과 관계가 없으므로 명심하십시오.

이제 app/controllers/items_controller.rb#create로 이동
성공적인 저장 렌더링에 format.turbo_stream 추가
그것은 다음과 같아야합니다

  def create
    @item = Item.new(item_params)

    respond_to do |format|
      if @item.save
        format.turbo_stream
        format.html { redirect_to item_url(@item), notice: "Item was successfully created." }
        format.json { render :show, status: :created, location: @item }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @item.errors, status: :unprocessable_entity }
      end
    end
  end

마지막으로 콘텐츠app/views/items/create.turbo_stream.erb로 생성<%= turbo_stream.prepend "items", @item %>
양식은 여전히 ​​동일합니다. 추가하여 이 문제를 해결할 수 있습니다.<%= turbo_stream.replace "new_item", partial: 'items/form', locals: { item: Item.new } %>app/views/items/create.turbo_stream.erb에서

파일은 다음과 같습니다

<!-- Refresh preview list -->
<%= turbo_stream.prepend "items", @item %>

<!-- Reset form -->
<%= turbo_stream.replace "new_item", partial: 'items/form', locals: { item: Item.new } %>

이 정확한 단계별 가이드의 예제 프로젝트는 https://github.com/nicho1991/turbo-example에서 찾을 수 있습니다.