이 기사는 원래 Rails Designer에 게시되었습니다. 즉, ViewComponent로 구축되고 Tailwind CSS로 디자인되었으며 Hotwire로 향상된 Rails 앱용 UI 구성 요소 라이브러리입니다.

요즘 대부분의 화면이 지원하기에 충분히 넓은 사이드바 탐색 기능이 앱에 있는 경우 크기 조정이 가능하도록 추가하는 것이 좋은 기능일 수 있습니다. 이러한 사용자 지정을 통해 사용자는 현재 작업에 맞게 화면을 조정할 수 있습니다. 다음 번 큰 작품을 작성하는 데 집중하고 싶거나 화면을 분할하여 기본 너비를 너무 넓게 만들 수도 있습니다.

이유가 무엇이든 JavaScript와 Stimulus를 사용하면 사이드바 탐색(또는 기타 구성 요소)의 크기를 쉽게 조정할 수 있습니다. 바로 들어가 보겠습니다. HTML에서 기본 사항을 설정해 보겠습니다.

  

  

    
Content for your app here
  

위의 HTML에서는 Tailwind CSS 클래스를 사용하고 있지만 이 예에서는 필요하지 않습니다. 물론 원하는 대로 스타일을 지정할 수 있습니다.

이제 자극 컨트롤러입니다. 위에서 알 수 있듯이 핸들러(드래그하여 크기를 조정할 수 있는 요소)는 HTML에 추가되지 않고 대신 JS에 삽입됩니다.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      
    `
  }
}

이렇게 하면 nav 요소(절대 위치) 옆에 핸들러가 삽입됩니다. 또한 mousedown 이벤트에서 setup()을 실행하는 작업도 있습니다. 추가해 보겠습니다.

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

여기서 무슨 일이 일어나고 있는 걸까요? 각각 mousemove 및 mouseup 이벤트에 #resize() 및 #stop()을 추가해 보는 것은 어떨까요? 이는 크기 조정 및 중지가 이벤트 리스너로 호출될 때 컨트롤러 인스턴스를 참조하여 컨트롤러 속성 및 메서드에 대한 액세스를 유지하도록 하기 위한 것입니다.

비공개 함수 #resize() 및 #stop()을 추가해 보겠습니다.

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width 



 #resize() 함수는 마우스 위치(event.clientX)를 기반으로 컨테이너의 새 너비를 계산하고 컨테이너의 너비를 업데이트하여 허용되는 최대 너비(값에 설정됨)를 초과하지 않도록 합니다. #stop() 함수는 resizingValue를 false로 설정하고 이벤트 리스너를 제거하여 크기 조정 프로세스를 중지합니다.

브라우저로 이동하면 이제 브라우저 크기를 조정할 수 있으며 maxWidth(기본적으로 360px)로 설정된 값보다 더 넓게 설정할 수 없습니다.

굉장해요! ? 이것이 Stimulus를 사용하여 앱에서 요소의 크기를 조정하는 데 필요한 전부입니다. 여기서는 브라우저 전체에서 동일하도록 사용자 설정(예: Redis를 통해)에 값을 저장하거나 해당 세션에 대해 값을 저장하기 위해 브라우저의 LocalStorage에 저장하여 개선할 수 있습니다(Rails Designer는 이에 대한 JS 유틸리티를 제공하여 도움을 줍니다).