Stimulus.js 및 JavaScript 통합으로 Rails 7 앱을 강화하세요

Stimulus.js는 HTML을 보강하는 간단한 JavaScript 프레임워크입니다. Rails의 내장 기능과 완벽한 동반자입니다. 이 게시물에서는 JavaScript 기능을 위해 Stimulus.js를 사용하고, 이를 다른 JavaScript 라이브러리와 통합하고, Importmap을 사용하여 효과적으로 JavaScript 종속성을 관리하는 방법을 살펴보겠습니다.

전제조건

시작하기 전에 다음 사항을 확인하세요.

• Rails 7 애플리케이션 설정
• JavaScript 및 Rails에 대한 기본 지식

Rails 7에서 Stimulus.js 설정

Rails 7은 Stimulus.js를 기본적으로 지원합니다. 시작하려면 다음을 실행하여 Stimulus가 애플리케이션에 포함되어 있는지 확인하세요.

rails new my_app
cd my_app

앱/javascript/controllers에서 Stimulus 컨트롤러를 찾을 수 있습니다.

자극 컨트롤러 생성

간단한 클릭 이벤트를 처리하는 Stimulus 컨트롤러를 만들어 보겠습니다. 다음 명령을 실행하십시오:

rails generate stimulus hello

그러면 app/javascript/controllers에 새로운 컨트롤러 hello_controller.js가 생성됩니다. 파일을 열고 다음 코드를 추가하세요:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

HTML에서 Stimulus 컨트롤러를 사용하세요.

  

  Greet

버튼을 클릭하면 텍스트가 "Hello, World!"로 변경됩니다.

다른 JavaScript 라이브러리와 통합

Stimulus.js는 다른 JavaScript 라이브러리와 원활하게 작동할 수 있습니다. 예를 들어 jQuery를 Stimulus.js와 통합해 보겠습니다.

먼저 Importmap을 사용하여 jQuery를 추가합니다.

config/importmap.rb에 jQuery를 추가하세요:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

그런 다음 Stimulus 컨트롤러에서 jQuery를 가져옵니다.

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

JavaScript 종속성 관리

Rails 7에서 JavaScript 종속성을 관리하는 것은 Importmap을 사용하면 간단합니다. 다음은 몇 가지 팁입니다.

• 라이브러리 추가: "library_name" 핀을 사용하여 config/importmap.rb의 "library_url"에 새 라이브러리를 추가하세요.
• 라이브러리 제거: 기존 라이브러리를 제거하려면 config/importmap.rb에서 해당 줄을 제거합니다.
• 라이브러리 업데이트: config/importmap.rb의 URL을 최신 버전으로 업데이트하세요.
• 오래된 라이브러리 확인: config/importmap.rb의 URL을 방문하여 최신 버전을 사용할 수 있는지 확인하세요.

프로젝트에 맞춤 JavaScript 파일을 추가할 수도 있습니다. app/javascript 폴더에 넣고 필요한 곳에 가져옵니다.

결론

Stimulus.js는 Rails 애플리케이션에 JavaScript 기능을 추가하는 강력하면서도 간단한 방법을 제공합니다. 다른 JavaScript 라이브러리와 통합하면 풍부하고 동적인 사용자 경험을 만들 수 있습니다. JavaScript 종속성을 적절하게 관리하면 애플리케이션이 유지 관리 가능하고 최신 상태로 유지됩니다.

즐거운 코딩하세요!