Rails6 프로젝트에서 JS 설정방법 변화(Typescript)

변화 Gem -> Webpacker

예전에는 Gemfile에서 관리했다면

# gem 'coffee-rails'
# gem 'cljs-rails'
# gem 'typescript-rails', git: 'https://github.com/ScriptonBasestar-io/typescript-rails.git'

요즘에는 webpakcer를 통해 npm으로 관리한다.

    "typescript": "^3.8.3",

구조가 좀 바뀌었다.

rails new 하면 예전에는 coffeesciprt를 넣어줬는데
요즘엔 기본구성이 아래처럼 변경됐다.

# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

예전에는 화면쪽 리소스가
/app/assets/stylesheets
/app/assets/javascript s???
에 있었고
stylesheet_link_tag
javascript_include_tag
를 사용했는데

webpacker를 사용하면서
/app/javascript/packs/**/*.(js|ts)
/app/javascript/stylesheets/**/*.(css|scss|sass)
에 파일을 놔두고
stylesheet_pack_tag
javascript_pack_tag
를 사용한다.

본좌는 stylesheet는 구 방식을 사용중이다
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%#= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
하지만 스크립트는 웹팩으로
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

그리고 아랫쪽에 스크립트를 넣어줬다.
모듈별
<%= javascript_pack_tag controller_name if pack_exists?(controller_name) %>
화면, 액션별
<%= javascript_pack_tag "#{controller_name}-#{action_name}" if pack_exists?("#{controller_name}-#{action_name}") %>

이런건 쓰지말자 웹팩이 캡술화를 시켜버려서 화면에다가 스크립트 박아넣으면 제대로 동작하지 않는다.
<%= yield :javascript %>

관리 포인트가 분리되서 더 좋은 것 같다.
예전엔 npm이 업데이트되고 gem이 업데이트되야 사용할 수 있었을텐데
이젠 npm 최신버전 적용이 더 수워졌을테니

turbolink 때문에 화면전환시 로딩이 줄어들지만
document.ready가 제대로 동작하지 않는 경우가 있으니 주의해야한다

$(document).on('turbolinks:load',function () {
});