Backbone.js를 Rails 6에서 실행시켜 보고 싶었다.
그래서 gem backbone-rails 공식 튜토리얼을 보고 그대로 따라했는데 빈 페이지만 계속 떴다. Backbone.js도, javascript도, rails도 모르는 상태에서 뭐가 잘못된지 몰라 한참을 삽질하다가 Rails 6부터는 javascript 파일 실행 위치가 달라졌다는 걸 검색을 통해 알게 됐다. 내가 따라한 튜토리얼은 Rails 6 버전으로 수정되지 않아서 될리가 없었다.
app/javascript
Rails 6 이전에는 app/assets 안에 javascript 파일을 넣어 관리했다.
하지만 Rails 6부터는 Sprockets 대신 Webpack이 javascript 파일을 관리하기 때문에 app/javascript 안에 javascript 파일을 넣어야 한다.
구체적인 실행 방법
1) javascript_pack_tag를 사용해 개별 js 파일 실행하기
app/javascript/packs/hello.js 파일이 있을 때, view의 html 파일에서 <%= javascript_pack_tag 'hello' %>를 추가하면 hello.js의 내용을 불러 올 수 있다.
단, 개별 js 파일은 app/javascript/packs 디렉터리 안에 있어야 한다!
2) application.js에 js 파일을 추가해 실행하기
app/javascript 안에 있는 파일이면 다 가능하다.
app/javascript/new_dir/hello.js가 존재한다고 하자,
그러면 app/javascript/packs/application.js에
require("new_dir/hello"); 를 추가해주면,
html에 별도로 javascript_pack_tag을 해주지 않아도 javascript 파일을 불러올 수 있다.
hello.js가 application.js과 함께 컴파일되기 때문이다. application.js에 javascript 파일들이 전부 컴파일 되는 걸 원하지 않는 경우에는 1번처럼 javascript_pack_tag로 따로 명시를 해주는 것이 좋다.
cf) app/layouts/views/application.html.erb에
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 라는 태그가 있어 application.js 내용을 불러온다.
내가 깨달은 걸 말로만 정리해 본 거라 참고 자료를 보면서 해보는 걸 추천한다!
이거 하나 하는데도 시간이...
오래걸렸다. 아무 것도 모르는 상태에서 무엇인가를 고치려면 헤매는 게 당연한가 싶다가도 내가 바보 같아서 슬프기도 하다.
참고자료)
https://dev.to/morinoko/adding-custom-javascript-in-rails-6-1ke6
https://blog.capsens.eu/how-to-write-javascript-in-rails-6-webpacker-yarn-and-sprockets-cdf990387463
