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 () {
});

Error: rbenv 설치 오류

Message

미친 왜 오류나나 보는데 별 오류날 건덕지도 없어 보인다. 의존성 설치하라는거 다 설치했고

해결

rbenv의 버그라고 봐야할 것 같다.

우분투 최신버전이라 GCC7이 기본으로 설정되어 있는데

이걸로 빌드하면 오류가 나는 것 같다.

gcc-4.8을 강제 지정해서 해결

Ruby Version 관리 툴 – rvm.io rbenv

개요

rvm보다 가볍고 시스템에 영향을 주지 않는다(삭제하기쉽다)는 이유로 rbenv으로 루비 버전관리 툴의 대세가 넘어간 것 같다.

rvm

http://rvm.io 접속해서 스크립트로 설치

rbenv

설치는 좀 더 성가시다.
공식 주소 :
https://github.com/rbenv/rbenv
install명령을 쓰려면 이것도 깔아줘야한다 :
https://github.com/rbenv/ruby-build

ubuntu 17.04 desk

Ruby2.3.3 on Windows10(64bit)

보통 다른언어들은 위도우에 설치하는게 더 쉬운데..

루비는.. 아니다.

버전충돌이 심해서 rvm같은걸 설치 해 주는게 좋은데… 윈도우에서는 잘 안되는것 같다.

윈도우 인스톨러 이용해서 특정버전해서 개발하는게 좋지 않을까
https://rubyinstaller.org/downloads/

설치해야 할 것이 두가지다.

Devkit은 native 루비 gem을 다운받았을 때 이것들을 컴파일하는 역할을 한다.  이거 없으면 기본적인rails app 테스트도 힘드니 필수적이다.

Ruby 설치

이건 그냥 인스톨러 돌리면 바로 설치된다.

설치과정에서 add path는 꼭 선택 해 준다. 안해줬다면 그냥 중복 설치하면 된다.

Devkit 설치

Devkit은 설치파일이 아니고 압축파일이다.

C:\RubyDevkit 또는 C:\Ruby23-x64\Devkit

이쯤에 적당히 풀어준다.

환경변수 추가는 수동으로 해줘야한다.
C:\Ruby23-x64\Devkit\bin

커맨드창을 열어서

 

이제 rails budle rake 등 기본적인 gem들을 설치하고 사용하면된다.

 

루비 싹 지우고 다시깔기 Ruby Clean and reinstall

우분투 1.4.1로 올리는데 이것저것 다 최신버전 써볼까 하고 그냥 클릭했더니…. 아파치가 업그레이드가 돼버렸다.
루비 1.9.3의 passenger가 아파치2.4에 왠지 잘 연결이 안되서 그냥 루비도 업그레이드 해 버리기로 했다.

루비 버전이 관리하기가 힘들어서 rvm이 나왔는데… 사실 rvm도 완벽하지는 않은 것 같다.
요즘 버전으로 넘어오면서 멀티유저 설치가 좀 제한적으로 지원이 잘 되지 않는 것 같다.
전에는 그냥 수도로 설치하면 멀티유저로 설치가 됐었는데….
하위호환 그냥 무시해버리는게 루비답다

그럼 지난 버전을 먼저 삭제해야한다. 전체사용자로 설치했으면 /usr/local/rvm 그냥 계정에 설치했으면 .rvm
에 설치되어있다

먼저 rvm implode
를 입력하면 대충 다 삭제된다.
남는파일은…. 찾아서 다 삭제
전체 설정파일은 이 위치에 있다.
sudo rm -rf /etc/rvmrc /etc/profile.d/rvm.sh /usr/local/rvm
.rv로 시작하는건 다 확인후 삭제한다.
이미 지워서 파일명을 확인을 못하겠다.
다른거 몇 개 더 실행한 것 같은데 확인불가…
다음에 또 할 일이 있으면 확인 해 봐야겠다.

Ruby error모음

Could not find a JavaScript runtime.
루비 Javascript runtime 오류 발생시
(rake db:schema:dump 실행시 발생, rails server실행시에 발생하는 경우도 있는듯하다)

gem ‘therubyracer’
gem ‘execjs’

gem update

sudo apt-get install nodejs

이런 명령을 실행하면 된다는 해결책들이 제시되고 있다.
우분투인경우는 아래처럼 하면 되나본데 센트에서 하는중이라 확인을 못했다.

gem들은 Gemfile에 추가해줘야할것같다.

메서드 선언 호출 방법

 

블럭인수, 가변길이 인수 전달

변수 스코프

 

루비Ruby 반복문Loop statement

for문

until문

while문

next, redo, break, retry

루비Ruby 제어문control statement

if elsif else 구문
조건이 맞을 경우 실행
elif나 else if 가 아니고 어설프게 elsif이다

unless
조건이 틀릴 경우 실행

case
케이스에 맞는 경우 실행
숫자범위와 무자열비교 모두 가능

ㅇㅇ

Mac Mountain Lion에서 rvm 설치하기

https://gist.github.com/3195475

마운틴라이언 설치하면 안되는게 좀 있다. 의존성 문제들…

lion에서 mountain 라이언으로 넘어오는 속도도 너무 빨랐고 변한게 많아서일까

나온지 꽤 됐다고 생각했는데 안되는게 많아서 참 성가시다.

 

sudo xcodebuild -license

# When Mac OS X Mountain Lion was released, I did a completely clean install. Unfortunately [RVM](http://rvm.io) won’t install directly on the stock release. Here are the steps to get the installation working.

# This gist is based in part by [this post](http://theengguy.blogspot.ca/2012/04/setting-up-os-x-lion-and-mountain-lion.html) by [@theengguy](http://twitter.com/theengguy).
# 1. Install [MacPorts](http://www.macports.org)
# You can snag the package installer (easiest) from [https://distfiles.macports.org/MacPorts/MacPorts-2.1.2-10.8-MountainLion.pkg](https://distfiles.macports.org/MacPorts/MacPorts-2.1.2-10.8-MountainLion.pkg)
# 2. Install a new version of curl
sudo port -v selfupdate
sudo port install curl
# This will install another, more up to date version of curl to /opt/local/bin/curl. Mountain Lion ships with 7.25.0 and you need at least 7.26.0 in order to avoid libcurl error, “(48) An unknown option was passed in to libcurl” while trying to install RVM
# 3. Check the curl version and make it active
/opt/local/bin/curl -V
# Make sure the output is >= 7.26.0
# 3. Install RVM by running the following commands from [@theengguy](http://twitter.com/theengguy);
sudo port -v selfupdate
sudo port install apple-gcc42
sudo port install gmake
sudo port install gpatch
sudo ln -s /opt/local/bin/gcc-apple-4.2 /opt/local/bin/gcc
sudo ln -s /opt/local/bin/gmake /opt/local/bin/make
sudo ln -s /opt/local/bin/gpatch /opt/local/bin/patch
curl -L get.rvm.io | bash -s stable
source ~/.rvm/scripts/’rvm’
export PATH=/opt/local/bin:$PATH
rvm install 1.9.3
rvm use 1.9.3@rails3tutorial2ndEd –create –default
gem update –system 1.9.3
rvm use 1.9.3
# You should have a working installation of RVM with Ruby 1.9.2 installed