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 install 2.3.3
Downloading ruby-2.3.3.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.3.tar.bz2
Installing ruby-2.3.3...

BUILD FAILED (Ubuntu 17.10 using ruby-build 20171226-3-g01e7b7b)

Inspect or clean up the working tree at /tmp/ruby-build.20180222140444.23312
Results logged to /tmp/ruby-build.20180222140444.23312.log

Last 10 log lines:
checking for ruby... /usr/bin/ruby
config.guess already exists
config.sub already exists
checking build system type... x86_64-pc-linux-gnu
checking host system type... x86_64-pc-linux-gnu
checking target system type... x86_64-pc-linux-gnu
checking whether the C compiler works... no
configure: error: in `/tmp/ruby-build.20180222140444.23312/ruby-2.3.3':
configure: error: C compiler cannot create executables
See `config.log' for more details
cat /tmp/ruby-build.20180222140444.23312.log
/tmp/ruby-build.20180222140444.23312 ~/.rbenv/plugins/ruby-build
/tmp/ruby-build.20180222140444.23312/ruby-2.3.3 /tmp/ruby-build.20180222140444.23312 ~/.rbenv/plugins/ruby-build
checking for ruby... /usr/bin/ruby
config.guess already exists
config.sub already exists
checking build system type... x86_64-pc-linux-gnu
checking host system type... x86_64-pc-linux-gnu
checking target system type... x86_64-pc-linux-gnu
checking whether the C compiler works... no
configure: error: in `/tmp/ruby-build.20180222140444.23312/ruby-2.3.3':
configure: error: C compiler cannot create executables
See `config.log' for more details

해결

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

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

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

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

$ CC=/usr/bin/gcc-4.8 rbenv install 2.3.3

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

$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ cd ~/.rbenv && src/configure && make -C src
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ ~/.rbenv/bin/rbenv init
수동으로 추가해야할 수 있다.
$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
설치
$ rbenv insall 2.3.3
버전확인
$ rbenv versions
버전선택
$ rbenv global 2.3.4
버전확인
$ ruby -v

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

커맨드창을 열어서

 

루비 데브킷 디렉토리로 이동
cd C:\Ruby23-x64\Devkit
자동으로 루비 설치경로를 확인
ruby db.rb init
데브킷 설치
ruby db.rb install

이제 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에 추가해줘야할것같다.

메서드 선언 호출 방법

 

def sqrt(a)
  x = a*a
  return x
end

def add1(a,b)
  return a+b
end

def add2(a,b=10)
  return a+b
end

def showName1()
  puts "showName1"
end

def showName2
  puts "showName2"
end

puts sqrt(3)
puts add1(3,5)
puts add2(5)
puts add2(5,3)
showName1
showName2()

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

def meta(&b)
  b.call()
end

def metb(a, *b)
  print a, "\t", b
end

meta{print "블럭인수"}
metb(2, 3)
metb(3,5,6,3,5,3,65,3)

변수 스코프

num = 1

def showNums()
  num = 10
  puts num
end

showNums()
puts num

$gnum = 10

def showNums2()
  gnum = 10
  print gnum, "  ", $gnum, "\n"
end

showNums2()

alias showNums3 showNums2
showNums3()

alias $gnum2 $gnum
puts $gnum2

 

루비Ruby 반복문Loop statement

for문

for i in 1..10
  for j in 1..i
    print "*"
  end
  puts ""
end

a = [1,2,3,4,5]

for i in a
  print i,"  ", a[i], "\n"
end

until문

num = 100
until num < 10 do
  num-=1
  puts num
end

while문

num = 1
while num < 10 do
  num+=1
  puts num
end

next, redo, break, retry

for i in 1..100
  if i % 2 == 0 then
    print i
    next
  end
  if i > 80 then
    break
  end
end

for i in 1..100
  if i % 2 == 0 then
    print i
    i=101
    redo
  end
end

for i in 1..100
  if i % 10 == 0 then
    print i
    retry
  end
end

루비Ruby 제어문control statement

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

score = 10
if score > 100 then
  print "점수는 빵점에서 100점까지입니"
elsif score > 90 then
  print score, "점 수 합격입니다"
elsif score > 60 then
  print score, "점, 겨우 합격입니다"
else
  print "불합격"
end

unless
조건이 틀릴 경우 실행

score = 10
unless score > 60 then
  print "불합격"
else
  print "합격"
end

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

score = 10
case score
when 0...60 then
  print "불합격"
when 60...90 then
  print "그냥 합격"
when 90..100 then
  print "우수 합격"
else
  print "0부터 100까지의 숫자를 입력하세요"
end
dep = "회계부"
case dep
when "경리부" then
  print "불합격"
when "기획부" then
  print "그냥 합격"
when "사업부" then
  print "우수 합격"
else
  print "이 부서는 안됩니"
end

ㅇㅇ