[보수적이고 작은 프레임]의 목소리에 이끌려 스틸러스(Vue.js)를 배우려 했는데 너무 어려워서 포기했다는 실감에 눈을 뗄 수가 없었다.)

어쨌든 기존의 rails에 적용될 수 있는지 시험해 보자.

먼저 뚜렷한 rails 응용 프로그램을 만듭니다

터미널(환경 확인)

ruby -v
→ruby 2.6.3p62
rails -v
→Rails 5.2.3

그리고 나서
단말기

rails new test_stimulus2  -d postgresql　※プロジェクト作成
　　↓
cd test_stimulus2　※作成したところに移動
　　↓
rails g scaffold users cd:string name:string　　※簡単に「ユーザーの登録」を作る
　　↓
rails db:create
rails db:migrate

...프로젝트 이름에'2'를 붙이는 방향(넣지 않은'test stimulus'도 만들었지만 복습 중 다시 만든다).
그나저나 처음부터 "stimulus"를 가져오면
rails new project_name
　　↓↓↓
rails new project_name --webpack=stimulus
그런 것 같은데?(아직 시도하지 않음)

만든 것 중에 스틸러스 가져오기.

...참조https://fuyu.hatenablog.com/entry/2018/11/18/115909.
gemfile에서
gem 'webpacker'
.
그나저나 그룹:development,:test do 부분
gem 'pry-rails'
gem 'better_errors'
gem 'binding_of_caller'
gem 'pry-byebug'
(유효성 검사에 사용)도 적으십시오.
저장 후 터미널에서
단말기

bundle install　※gemをインストール
　　↓
rails webpacker:install 
　　↓
rails webpacker:install:stimulus 

이렇게 되면 "app/javascript/packs/application.js"는...

만들었어요?
이렇게 하면 'application.js' 와 같은 폴더에서 보기에서' app/javascript/controllers' 를 읽을 수 있습니다.
app/views/layouts/application.html.erb

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%# ↓これを追記↓ %>
    <%= javascript_pack_tag 'application' %>
    <%# ↑これを追記↑ %>

뷰에 추가합니다.

도입...다 됐나요?

도입 작업은 여기서 끝내야 하지만, 자신이 없기 때문에 먼저 확인해 보세요.
핸드북【Hello, Stimulus】을 사용해 보세요.
scaffold에서 만든 일람표에서.
app/views/users/index.html.erb

<p id="notice"><%= notice %></p>

<%# ↓これを追記↓ %>
<div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#gree
t">Greet</button>
</div>
 <%# ↑これを追記↑ %>

<h1>Users</h1>

그리고javascript/controllershellocontroller.js를 만들 때 이미 완성했기 때문에 내용을 다시 쓴다(아, 동작만 확인하면 자동으로 만들 수 있을 것 같아...됐어).
app/javascript/controllers/hello_controller.js

import { Controller } from "stimulus"

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

  greet() {
    console.log(`Hello, ${this.name}!`)
  }

  get name() {
    return this.nameTarget.value
  }
}

오, 잘 적용됐어, 당했어!
아니면 정말 이렇게만 환경을 조정할 수 있다(정말 놀랍다).
당분간 여기까지, 구체적인 사용 방법은 앞으로 탐색할 것이다.