turbo-show 요소 도입
이러한 문제를 해결하기 위해, 조건부 렌더링 로직을 서버 측이 아닌 클라이언트 측으로 이관하는 turbo-show라는 커스텀 HTML 요소를 활용할 수 있습니다. 이 요소는 다음과 같은 방식으로 작동합니다.
- HTML 구조:
turbo-show요소는when속성으로 메타 태그의 이름을 지정하고,is와 같은 연산자 속성으로 비교할 값을 정의합니다. 예를 들어,<turbo-show when="current-user-id" is="<%= message.author.id %>">는 현재 사용자 ID와 메시지 작성자 ID를 비교합니다. - 클라이언트 측 로직:
TurboShow클래스는HTMLElement를 상속받아 구현됩니다.connectedCallback()메서드에서removable()조건을 확인하여 만족하면 요소를 DOM에서 제거합니다.#removable()은when속성 누락, 메타 태그 누락, 조건 불일치 여부를 검사합니다.#operators객체를 통해is와 같은 비교 연산자를 정의하며, 필요에 따라contains,is_not등으로 확장할 수 있습니다.#metaTag및#metaContent게터를 통해 지정된 메타 태그의 내용에 접근합니다.
Rails 애플리케이션 통합
turbo-show 요소를 Rails 애플리케이션에 적용하려면 다음 단계가 필요합니다.
- 메타 태그 추가: 애플리케이션 레이아웃에
current_user.id와 같은 사용자별 정보를 담은 메타 태그를 추가합니다. 예:<meta name="current-user-id" content="<%= current_user.id %>" /> - Importmap 설정:
config/importmap.rb파일에turbo_show라이브러리 경로를 추가합니다. 예:pin_all_from "app/javascript/library", under: "library" - JavaScript 임포트:
app/javascript/application.js파일에서 커스텀 요소를 임포트합니다. 예:import "library/turbo_show"
이러한 과정을 통해 서버는 모든 사용자에게 동일한 부분 템플릿을 브로드캐스트하고, 각 클라이언트는 자신의 컨텍스트에 따라 적절한 콘텐츠만 표시하게 됩니다.