OpalStimulus는 Ruby 개발자가 Stimulusjs 컨트롤러를 JavaScript 대신 Ruby로 작성할 수 있도록 하는 Opal 래퍼입니다. 이는 Rails 애플리케이션에 쉽게 통합될 수 있도록 설계되었습니다.
설치 및 시작하기
OpalStimulus를 프로젝트에 추가하는 과정은 다음과 같습니다.
* Gemfile에 gem 'opal_stimulus' 라인을 추가합니다.
* 터미널에서 bundle install을 실행하여 Gem을 설치합니다.
* rails generate opal_stimulus:install 명령어를 실행하여 필요한 파일을 생성합니다.
* bin/dev를 통해 애플리케이션을 시작합니다.
Hello World 예제
간단한 “Hello World” 예제를 통해 OpalStimulus의 작동 방식을 이해할 수 있습니다.
1. 컨트롤러 생성: app/opal/controllers/hello_controller.rb 파일을 생성하고 다음 내용을 추가합니다.
ruby
class HelloController < StimulusController
self.targets = ["name", "output"]
def greet
output_target.text_content = "Hello, #{name_target.value}!"
end
end
* StimulusController를 상속받아 Ruby 클래스로 컨트롤러를 정의합니다.
* self.targets를 사용하여 HTML 요소의 타겟을 지정합니다.
* greet 메서드는 입력 필드의 값(name_target.value)을 가져와 출력 필드(output_target.text_content)에 “Hello, [이름]!” 메시지를 설정합니다.
- 뷰에 추가: 해당 컨트롤러를 사용할 뷰 파일에 다음 HTML 코드를 추가합니다.
```html
```
data-controller="hello"는HelloController를 연결합니다.data-hello-target="name"과data-hello-target="output"은 각각 입력 필드와 출력 필드를 컨트롤러의 타겟으로 지정합니다.data-action="click->hello#greet"는 버튼 클릭 시HelloController의greet메서드를 실행하도록 합니다.
이러한 방식으로 Ruby 개발자는 익숙한 문법과 도구를 사용하여 Stimulusjs의 강력한 기능을 활용할 수 있습니다.