웹 애플리케이션을 더 빠르게 탐색할 수 있는 훌륭한 도구인 Turbolinks는 더 이상 개발되지 않습니다. Hotwire 우산의 일부인 Turbo라는 새로운 프레임워크로 대체되었습니다.
그 뒤에 있는 팀은 프레임, 양식 제출 및 기본 앱과 같은 더 빠른 웹을 고수하기 위해 Turbolinks에서 추출한 유사한 개념을 다른 것들이 채택할 수 있다는 것을 이해했습니다.
이 문서는 Turbo에서 가장 중요하고 일반적으로 사용되는 Turbolink 부분을 사용하는 방법을 설명하는 실용적인 마이그레이션 가이드를 포함하여 Turbolinks의 새로운 대안인 Turbo 프레임워크에 대한 가이드를 제공하는 것을 목표로 합니다.
우리가 이야기할 내용을 더 잘 이해하려면 Turbolinks에 대한 지식이 있어야 합니다. 여기와 여기에서 자세한 내용을 읽을 수 있습니다.
터보 소개
Turbo는 더 적은 JavaScript로 현대적이고 빠른 웹 앱을 만들기 위한 여러 기술 모음입니다. HTML 형식으로 브라우저에 직접 전달될 모든 논리를 서버가 처리할 수 있도록 함으로써 그렇게 합니다. 결과적으로 브라우저의 유일한 책임은 일반 HTML을 처리하는 것입니다.
이를 위해 Turbo는 다음과 같은 네 가지 주요 부분으로 나뉩니다.
- 터보 드라이브 , Turbo의 핵심은 링크 및 양식에 대한 모든 클릭을 자동으로 가로채어 전체 페이지 다시 로드를 방지하고, 브라우저에서 호출하는 것을 방지하고, History API를 통해 URL을 변경하고, Ajax를 통해 장면 뒤에서 페이지를 요청하고, 응답을 렌더링합니다. 적절하게.
- 터보 프레임 프론트엔드 개발자가 페이지의 하위 집합을 독립적으로 처리하기 위해 프레임을 처리하는 방식을 재발명하여 페이지 하위 집합/프레임을 다룹니다. 별도의 범위와 지연 로드 기능을 사용하여 페이지를 독립적인 컨텍스트 집합으로 분해합니다.
- 터보 스트림 웹 소켓을 통한 비동기 전달을 통해 일반적인 부분 페이지 업데이트를 간단한 CRUD 컨테이너 태그 세트로 대체하는 데 도움이 됩니다. 이를 통해 동일한 웹 소켓을 통해 HTML 조각을 보내고 페이지에서 UI를 이해하고 다시 처리하도록 할 수 있습니다.
- 터보 네이티브 iOS/Android에서 기본으로 전환하는 경우 기본 셸용 임베디드 웹 앱에서 Turbo를 처리하는 데 필요한 모든 도구를 제공합니다.
프로젝트 설정
작업 속도를 높이기 위해 스타일링을 위한 부트스트랩과 함께 스캐폴딩 포스트 form-flow가 내장된 바로 사용할 수 있는 Rails 앱 프로젝트를 제공하기로 결정했습니다.
이렇게 하면 설정하는 데 시간을 낭비하는 것을 방지할 수 있을 뿐만 아니라 Turbolink가 자동으로 추가된 작업 프로젝트를 얻을 수 있습니다. 이미 자신만의 프로젝트가 있는 경우에도 괜찮습니다. 계속해서 기사를 팔로우할 수 있습니다.
rails를 사용하여 새로운 스캐폴딩된 Rails 앱을 생성할 수도 있습니다. 명령.
여기에서 저장소의 GitHub 링크를 찾을 수 있습니다. 로컬로 복제하고 bundle install 명령을 실행해야 합니다. 모든 Rails 종속성을 설치합니다.
모든 것이 설정되면 rails s를 통해 Rails 서버를 시작합니다. 명령을 실행하고 /posts를 확인하십시오. 아래와 같은 URI:
Rails의 게시물 CRUD
작동 중인 Turbolinks의 기능을 확인하려면 링크를 탐색하여 새 게시물을 작성하거나 항목을 표시하기만 하면 됩니다. 페이지를 새로고침하지 않고도 URL이 변경되는 것을 볼 수 있습니다.
이전 단계
적절한 Node 패키지 설치부터 시작하겠습니다. 더 이상 turbolinks가 필요하지 않기 때문에 , 아래 두 명령과 같이 노드 목록에서 간단히 지우고 터보 레일 종속성을 추가할 수 있습니다.
yarn remove turbolinks
yarn add @hotwired/turbo-rails
Rails로 작업하는 경우 모든 것이 제대로 설치되었는지 확인하는 또 다른 좋은 방법은 다음 명령을 실행하는 것입니다.
rails turbo:install
Webpacker가 응용 프로그램에 설치된 경우 npm을 통해 Turbo를 설치합니다. 이 명령은 또한 무언가를 놓친 경우 프로젝트에서 모든 Turbolinks 이전 종속성을 제거하려고 시도합니다.
그런 다음 app/javascript/packs/application.js를 엽니다. 파일을 열고 다음 코드 줄을 찾습니다.
import Turbolinks from "turbolinks";
Turbolinks.start();
가져오기는 Rails 앱의 버전에 따라 약간 변경될 수 있습니다(사용된 이전 버전은 require import 대신 ). 그래도 절차는 둘 다 동일합니다.
그런 다음 다음 각각으로 대체하십시오.
import "@hotwired/turbo-rails";
예, 한 번만 가져옵니다. 아무것도 수동으로 시작할 필요가 없습니다. Turbo 인스턴스는 window.Turbo에 자동으로 할당됩니다. 개체를 가져올 때 관리가 더 쉽습니다.
그것을 테스트하고 더 이상 Turbolinks가 아닌 Turbo만 찾고 있는지 확인하기 위해 파일 끝에 다음 코드 스니펫을 추가해 보겠습니다.
$(document).on("turbolinks:load", () => {
console.log("turbolinks!");
});
$(document).on("turbo:load", () => {
console.log("turbo!");
});
브라우저에서 페이지를 다시 로드한 후 콘솔 로그를 확인하여 인쇄된 내용을 확인하세요.
터보 로드 이벤트 로그 확인
app/views/layouts/application.html.erb에 또 다른 변경이 필요합니다. 기본적으로 이전 Turbolinks 데이터 속성을 Turbo와 동등한 것으로 변경하는 파일입니다. data-turbolinks-*를 사용하여 두 태그를 찾습니다. 속성을 다음과 같이 대체합니다.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
이는 Turbo가 head에서 가져온 모든 자산을 자동으로 추적할 수 있도록 하는 데 중요합니다. 태그가 변경되면 다시 로드해야 합니다. 이는 추가한 모든 스크립트와 스타일을 포함하여 모든 파일에 적용됩니다.
터보 기능 탐색
Turbo는 응용 프로그램의 모든 링크를 자동으로 가로채서 다시 로드하지 않고 호출하므로, 예를 들어 특정 링크에 대해 해당 기능을 비활성화해야 하는 경우 명시적으로 코딩해야 합니다.
app/views/posts/index.html.erb에서 "새 게시물" 버튼을 업데이트하여 테스트해 보겠습니다. 다음으로 파일:
<%= link_to 'New Post', new_post_path, :class => "btn btn-primary btn-sm", "data-turbo" => "false" %>
새로운 데이터 속성 data-turbo를 명시적으로 추가하고 있습니다. , 클릭할 때 이 특정 링크를 찾지 않도록 Turbo에 요청합니다.
애플리케이션을 새로고침하고 "새 게시물" 버튼을 클릭하면 일반 앱에서와 같이 페이지가 완전히 새로고침되는 것을 볼 수 있습니다.
또한 Turbo가 설정되어 애플리케이션에서 작동하는지 테스트하는 좋은 방법입니다.
양식도 마찬가지입니다. Turbo는 모든 양식 제출을 자동으로 처리하므로 비동기식으로 발생합니다. app/views/posts/_form.html.erb 아래의 양식에 대해 비활성화하려면 파일을 제출하려면 제출 버튼을 다음과 같이 변경해야 합니다.
<div class="actions">
<%= form.submit class: "btn btn-primary btn-sm", "data-turbo" => false %>
</div>
앱을 다시 로드하고 테스트해 보세요! 새 게시물을 작성할 때도 동일한 동작을 볼 수 있습니다.
양식 제출
양식에 대해 말하면 Turbo는 링크와 매우 유사한 방식으로 양식을 처리합니다. 그러나 양식 요청이 항상 성공적으로 완료되는 것은 아닙니다.
실전에서 보자! 먼저 게시물의 name을 변경하기 위해 몇 가지 유효성 검사를 추가합니다. 및 title 속성이 필요합니다. 이를 위해 app/models/post.rb를 엽니다. 파일을 다음과 같이 변경합니다.
class Post < ApplicationRecord
validates :name, presence: true
validates :title, presence: true
end
앱을 새로고침하고 모든 필드를 비워두고 지금 새 게시물을 추가해 보세요. 아무 일도 일어나지 않는다는 것을 알게 될 것입니다. 브라우저 콘솔을 검사하면 다음과 같은 내용이 표시됩니다.
양식 응답은 다른 위치로 리디렉션되어야 합니다.
이를 해결하기 위해 두 가지 가능한 접근 방식이 있습니다. 첫 번째는 status 추가로 구성됩니다. 각 포스트 컨트롤러 업데이트 가능한 작업(POST, PUT 등)에 전달하고 처리할 수 없는 개체 개체를 값으로 받도록 합니다.
아래에서 create에 대한 코드 변경 사항을 찾을 수 있습니다. 및 update (post_controller.rb ) 방법:
# def create
format.html { render :new, status: :unprocessable_entity }
# def update
format.html { render :edit, status: :unprocessable_entity }
편집 내용을 저장하고 양식을 다시 테스트하십시오. 이번에는 오류가 올바르게 표시되는 것을 볼 수 있습니다.
UI에 유효성 검사 오류 표시
두 번째 방법은 turbo_frame_tag를 사용하는 것입니다. . Turbo를 사용하는 Rails 앱에서 우리가 말한 Turbo Frames는 이 태그에 의해 렌더링됩니다.
Turbo가 이 특정 프레임에 요청과 응답을 첨부할 수 있도록 페이지의 일부를 분리하고 백엔드 앱으로 직접 터널을 열고 싶을 때 훌륭한 리소스입니다.
테스트하려면 먼저 _form.html.erb의 전체 콘텐츠를 래핑해야 합니다. 이 태그 내의 파일:
<%= turbo_frame_tag post do %>
...
<% end %>
게시물은 형식의 경우 명백한 이유가 있습니다. 브라우저로 돌아가서 다시 테스트하면 예상대로 동일한 유효성 검사 오류가 표시됩니다.
여기서 주목해야 할 또 다른 흥미로운 점은 해당 양식에 대해 생성된 HTML입니다. 살펴보세요:
<turbo-frame id="new_post">
<form action="/posts" accept-charset="UTF-8" method="post">
...
</form>
</turbo-frame>
이 사용자 정의 HTML 요소는 Turbo가 프레임을 전체 페이지 기반 작업과 구별하는 방법입니다.
진행률 표시줄
브라우저의 기본 로딩 메커니즘을 제거할 때 페이지가 느리게 로드되는 경우를 위해 다른 메커니즘을 제공하는 것이 상식입니다.
Turbo는 이미 Bootstrap 및 Material Design과 같은 주요 라이브러리에서 제공하는 것과 매우 유사한 내장형 CSS 기반 진행률 표시줄을 페이지 상단에 제공합니다.
요청을 처리하는 데 500ms 이상 걸리는 경우에만 표시되도록 설정되어 있으며 이는 테스트 프로젝트에 충분하지 않습니다.
스타일을 변경하거나 완전히 제거하려는 경우 .turbo-progress-bar로 놀 수 있습니다. 아래와 같은 CSS 클래스:
.turbo-progress-bar {
height: 15px;
background-color: gold;
}
테스트하려면 application.js에서 진행률 표시줄 지연을 줄여야 합니다. 다음 코드가 있는 파일:
window.Turbo.setProgressBarDelay(1);
제공된 시간은 밀리초 단위입니다. 아래에서 진행률 표시줄의 업데이트된 스타일 표현을 찾을 수 있습니다.
업데이트된 진행률 표시줄 표시
마무리
Turbo와 스트림 및 기본 모듈과 같은 놀라운 기능에 대해 논의할 내용이 훨씬 더 많습니다. 그러나 기사의 초점을 유지하기 위해 이러한 초기 단계를 계속할 것입니다.
항상 그렇듯이 공식 Turbo 핸드북을 추천하지 않을 수 없었습니다. 이 전체 마이그레이션 프로세스를 시작할 때 매우 유용했기 때문입니다. 여기에서 프로젝트에 필요한 특수 조건을 처리하는 데 필요한 모든 자료를 찾을 수 있습니다.
예를 들어 앱에서 Devise를 사용하는 경우 약간의 조정이 필요할 수 있습니다. 다행히 Turbo 팀은 Devise with Turbo와 관련된 세부 사항을 돕기 위해 이 주제에 대한 훌륭한 자습서를 제공했습니다.