터보 스트림의 작동 방식(비하인드 스토리)

이 기사는 원래 Rails Designer에 게시되었습니다

---

Turbo Streams를 사용하면 웹 요청(컨트롤러 작업) 시 앱의 특정 부분을 업데이트할 수 있으며, 간단히 Turbo Streams라고도 합니다. 또는 일반적으로 ActionCable을 통해 웹 소켓을 통해 백엔드에서 실행되는 경우(모델 생성, 업데이트 또는 삭제 또는 모든 개체에서 수동으로) 터보 스트림 브로드캐스트로 사용됩니다.

소스는 다르지만 둘 다에 대한 응답(HTML)은 동일합니다. Turbo Streams의 작동 방식을 빠르게 설명하고 싶으므로 Rails와 마찬가지로 마법이 필요하지 않습니다 ??. 그냥 평범한 오래된 JavaScript입니다!

터보 스트림을 방송하려면 다음과 같이 하세요.

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

컨트롤러 작업(또는 잼이 필요한 경우 컨트롤러의 인라인)의 경우:

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

그럼 두 옵션 모두에 대해 전송된 응답(HTML)은 무엇입니까?

<turbo-stream action="append" target="resources">
  <template>
    <!-- HTML content of the Resource -->
  </template>
</turbo-stream>

컨트롤러 작업에 대해 생성한 Turbo Stream 응답과 매우 흡사합니다! 유일한 큰 차이점은 HTML을 둘러싸는 template 요소입니다(partial 또는 ViewComponent에서 가져옴). 템플릿 요소는 숨겨진 HTML 콘텐츠를 담는 컨테이너입니다.

? 브라우저의 개발자 도구에서 이와 같은 응답을 볼 수 있습니다.

터보 스트림 요소가 DOM에 주입되면 터보가 대신합니다. 터보 스트림은 사용자 정의 요소에 지나지 않습니다. 여기에 정의되어 있습니다. 이는 연결된Callback() 함수를 정의하는 것을 볼 수 있습니다. 해당 함수는 요소가 문서에 추가될 때마다 호출됩니다. 이것이 바로 커스텀 요소의 특징입니다.

그럼 다음은 어떻게 되나요? 가장 중요한 부분을 단계별로 살펴보겠습니다. 힘내세요! ?️?

1. 맞춤 이벤트 beforeRenderEvent가 전달됩니다.
2. 이 이벤트는 renderElement 함수를 호출합니다.
3. PerformAction이 호출됩니다.
4. 그러면 정의된 작업이 호출됩니다.

마지막 파일에서는 Turbo Stream에 대해 지원되는 모든 기본 작업(추가, 앞에 추가, 교체 등)을 볼 수 있습니다. JavaScript에 조금이라도 익숙하다면 각 개별 작업이 수행하는 작업을 쉽게 파악할 수 있습니다(그렇지 않은 경우 JavaScript for Rails 개발자를 확인하세요 ?). 본질적으로 제거 작업을 제외하고; 템플릿 요소 내에서 HTML을 가져와 DOM에 추가합니다(작업에 따라 추가, 앞에 추가, 뒤에 추가 등).

이 지식을 바탕으로 사용자 정의 터보 스트림 요소를 수동으로 삽입하면 Turbo가 이를 인식한다는 것을 알 수 있습니다.

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

HTML 위를 복사하여 브라우저에서 확인하세요. ul 요소에 li 요소가 추가되는 것을 볼 수 있습니다. ? 그런 다음 브라우저의 개발 도구를 사용하여 DOM의 어디에나 또 다른 터보 스트림 요소를 붙여넣습니다.

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

정말 멋지죠? Turbo는 브라우저의 다양한 기능을 사용하여 우리 모두가 좋아하는 원활한 개발자 경험을 제공합니다. 이제 Turbo Stream이 뒤에서 어떻게 작동하는지 알게 되었습니다!

위 내용은 터보 스트림의 작동 방식(비하인드 스토리)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!