Opal Stimulus는 Ruby 개발자에게 친숙한 방식으로 StimulusJS 컨트롤러를 작성할 수 있는 환경을 제공합니다. 주요 내용은 다음과 같습니다.
1. 설치 및 초기 설정
bundle add opal-stimulus명령어로 젬을 추가합니다.bin rails opal:stimulus:install명령어를 실행하여 필요한 파일(예:app/assets/builds/keep,app/opal/controllers/keep,app/opal/application.rb)을 생성하고 Opal 설정을 초기화합니다.application.rb파일은 Opal 설정의 진입점으로, Stimulus 컨트롤러 클래스와 컨트롤러 디렉토리를 로드합니다.- Opal Stimulus는 ES6 모듈과 호환되며,
application.js에 별도의 복잡한 설정 없이 간단한 코드만으로 실행됩니다.
2. 컨트롤러 생성 및 기본 기능
rails generate opal:stimulus hello_world명령어로 새로운 컨트롤러를 생성합니다.- 생성된 Ruby 컨트롤러 파일은 자동으로 컴파일되어
opal.js에 반영됩니다. connect메서드 내에서self.class_name을 사용하여 컨트롤러 이름을 HTML 요소에 표시하는 간단한 예제를 통해 동작을 확인합니다.- Ruby 코드 내에서
window및document객체를 직접 사용하여 브라우저 API에 접근할 수 있습니다.
3. 카운터 예제 구현
rails generate opal:stimulus counter로 카운터 컨트롤러를 생성합니다.initialize메서드에서x변수를 0으로 초기화합니다.targets정의 (display_counter_value_target)를 통해 HTML 요소에 접근합니다.connect메서드에서 초기값을 표시하고,increase_counter메서드에서x값을 증가시킨 후display_counter_value_target.text_content를 업데이트합니다.- HTML에서는
data-controller="counter",data-counter-target="displayCounterValue",data-action="counter#increaseCounter"와 같이 기존 StimulusJS와 동일한 방식으로 바인딩합니다.
4. 데이터 페칭 및 디스플레이
display_dummy_data_target이라는 새로운 타겟을 추가합니다.retrieve_dummy_data메서드에서window.fetch를 사용하여 외부 API에서 더미 데이터를 가져옵니다.- 가져온 데이터의
title속성을display_dummy_data_target.inner_html을 통해 HTML 요소에 삽입합니다.
5. 디버깅 기능
- Opal Stimulus는 브라우저 개발자 도구에서 실제 Ruby 코드를 확인할 수 있게 하며,
binding키워드를 사용하여 Ruby 디버깅 경험을 제공합니다. 이는 개발 과정에서 매우 유용합니다.