Stimulus.js: Rails 앱을 위한 JS 프레임워크 대안

무슨 생각하시는지 알아요... 또 다른 JavaScript 프레임워크가 필요하신가요? 이미 너무 많은 프레임워크가 있잖아요! 맞습니다만, 이 프레임워크는 다음에서 만든 것이어서 제 관심을 끌었습니다. 베이스캠프. 이 회사는 아마 알고 계실 것입니다. Ruby on Rails. 또한 터보링크, 그리고 제가 이 이야기를 하는 이유는 Stimulus와 잘 어울리기 때문입니다. 그렇다면 Stimulus를 사용해 볼 가치가 있을까요?

어떻게 작동하나요?

자극은 페이지를 모니터링하고 다음을 기다리는 방식으로 작동합니다. 데이터 컨트롤러 속성을 표시합니다. 그리고 데이터 컨트롤러 값은 자극 컨트롤러를 연결하고 연결 해제합니다. 전제는 간단합니다. 클래스가 HTML과 CSS 사이의 연결인 것처럼 말입니다, 데이터 컨트롤러 는 HTML에서 JavaScript로 가는 다리입니다. 자극은 또한 데이터 액션 어트리뷰트, 페이지의 이벤트가 컨트롤러 메서드를 트리거하는 방법을 설명하는 어트리뷰트, 그리고 데이터 대상 속성을 사용하여 컨트롤러의 범위에서 요소를 찾을 수 있는 핸들을 제공합니다.

간편한 설치

Rails 앱에서 웹패커 젬을 사용하는 경우, 웹패커 젬에서 Stimulus 설치 작업을 제공하므로 간단한 명령 한 번으로 Stimulus를 설치할 수 있습니다. Rails 루트 디렉터리에서 다음 명령을 실행하기만 하면 됩니다:

레일즈 웹패커:설치:자극
이렇게 하면 다음 항목에 자극이 추가됩니다. package.json 를 실행하고 다음 두 파일을 생성합니다: 앱/자바스크립트/컨트롤러/index.js:

"자극"에서 { Application } 가져오기
"자극/웹팩-도움말"에서 { definitionsFromContext }를 가져옵니다.

const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

웹팩의 require.context 헬퍼가 호출되는 것을 볼 수 있습니다. 그런 다음 결과 컨텍스트를 Application#load 메서드에 전달합니다. 즉, 애플리케이션은 다음과 같은 이름의 파일을 찾고 있습니다.[식별자]_controller.js 에서 앱/자바스크립트/컨트롤러/ 디렉토리에 있으며, 이 식별자는 HTML에서 컨트롤러의 데이터 컨트롤러 식별자와 일치합니다. 바로 이 디렉터리가 Stimulus 컨트롤러를 넣어야 하는 곳입니다.
앱/javascript/controllers/hello_controller.js 도 생성됩니다. 이것은 우리가 가지고 놀 수 있는 예제 컨트롤러일 뿐입니다.

기본 사용법

자, 이제 hello_controller.js 파일을 다음과 같이 생성합니다. 코드:

"자극"에서 { 컨트롤러 } 가져오기

내보내기 기본 클래스 확장 컨트롤러 {
static targets = ["output"]]
connect() {
this.outputTarget.textContent = '안녕하세요, 자극!'
}
}

하지만 아시다시피 HTML과 JavaScript를 연결하지 않으면 아무런 효과도 볼 수 없습니다. HTML 보기에 몇 가지 코드를 추가해 보겠습니다. 원할 때마다 이 코드를 넣을 수 있습니다:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

그리고 그거 아세요? 그게 다입니다! 페이지를 새로고침하고 페이지에 "안녕하세요, 자극!"이 표시되면 연결이 제대로 작동하고 있다는 뜻입니다. 간단하죠?
네, 하지만 이것은 일반 텍스트 표시일 뿐입니다. 액션을 좀 보여줄 수 있나요? 네, 가능합니다! 앞서 언급했듯이 데이터 액션 속성을 추가합니다. 그런 다음 HTML 보기를 변경해 보겠습니다:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">계산</button></p>
</div>

그리고 자극 컨트롤러 앱/자바스크립트/컨트롤러/헬로컨트롤러.js:

"자극"에서 { 컨트롤러 } 가져오기

내보내기 기본 클래스 확장 컨트롤러 {
static targets = ["output", "days"]]
connect() {
this.outputTarget.textContent = '격리된 지 얼마나 되셨나요?'
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('당신은 자유입니다!')
}
else {
  alert(`격리 상태를 유지해야 하는 일수: ${daysLeft}`)
}

}
}

여기에는 격리 상태를 유지해야 하는 기간을 계산하는 매우 간단한 앱이 있습니다. HTML의 데이터 액션 속성을 사용하여 이 작업을 수행했습니다.
JavaScript 코드의 대상 목록에 '일'을 추가한 것을 볼 수 있습니다. 이렇게 하면 Stimulus가 자동으로 this.daysTarget 속성을 반환하는 첫 번째 일치하는 대상 요소를 반환합니다.

그 밖에 알아야 할 사항은 무엇인가요?

콜백

여러분은 아마도 connect() 메서드를 사용합니다. 이것은 내장 콜백을 위한 것입니다. 모든 콜백 메서드와 그 수명 주기를 알아야 하므로 여기에 소개합니다:
초기화: 컨트롤러가 처음 인스턴스화될 때 한 번입니다,
연결컨트롤러가 DOM에 연결될 때마다,
연결 끊기컨트롤러가 DOM에서 연결이 끊어질 때마다.

작업 설명자

그리고 데이터 액션 값 클릭->헬로#계산하기 를 액션 설명자라고 합니다. 이 설명자는 다음과 같이 말합니다:

• 클릭 는 이벤트 이름입니다,
• hello 는 컨트롤러 식별자입니다,
• 계산 는 메서드의 이름입니다.

타겟

액션과 마찬가지로 자극에도 대상 설명자가 있습니다. 대상 설명자는 hello.days 설명자는 그렇게 말합니다: hello 는 컨트롤러 식별자입니다,
일수 은 대상 이름입니다.

앞의 예제에서 Stimulus가 this.daysTarget 속성을 추가할 수 있습니다. 또한 더 많은 속성을 만들 수 있다는 것도 알아야 합니다. 이 예와 관련하여 다음과 같이 할 수 있습니다:

this.daysTarget 를 호출하여 컨트롤러 범위의 첫 번째 대상까지 평가합니다. 대상이 없으면 프로퍼티는 오류를 플래그합니다,
this.daysTargets 는 컨트롤러 범위 내 모든 소스 타깃의 배열까지 평가합니다,
this.hasDaysTarget 타겟이 있으면 참을 반환하고 없으면 거짓을 반환합니다.

보시다시피 자극은 간단하며 애플리케이션에 쉽게 추가할 수 있습니다. RoR 커뮤니티에서 인기를 얻고 있으며 놀랍지 않습니다. 저도 루비 개발자로서 Stimulus로 작업하는 것이 정말 즐겁습니다. 그럼 한 번 사용해 보시는 건 어떨까요?

자세히 읽어보세요:

• 웹 앱 개발: Ruby on Rails가 선택 가치가 있는 기술인 이유는 무엇인가요?
• 새로운 현실을 맞이할 시간입니다. 원격 근무의 시대가 한 달 전부터 시작되었습니다.
• 폴란드에서 자격을 갖춘 루비 개발자를 찾을 수 있는 5가지 이유