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

RubyOnRails 회원/권한 관리 Framework 목록

회원관리 솔루션

Devise

제일 많이 사용되는 솔루션. 특별한 이유가 없다면 이걸 쓰면 된다.
https://github.com/heartcombo/devise

Clearance

https://github.com/thoughtbot/clearance

CanCan

더 이상 업데이트가 되지 않고 있다.
https://github.com/ryanb/cancan

CanCanCan

Devise에 비하면 Star도 적고 특별히 차별화 되어있지 않다. Devise가 질렸다면 써볼수도 있겠지만…

권한관리 솔루션

PunchIt

Authlogic

https://github.com/binarylogic/authlogic
가장 최근 생긴 프로젝트로 업데이트 잘 되고 있는 것 같다

자바 개발환경 구성 SCOOP 활용

https://scoop.sh/

파워셀 실행 후 아래명령 실행
(윈도우+x i)

스쿱 버킷추가

자바도구 설치

한개씩 다운받아서 설치하는건 연습할 때만 하면 되고
이걸로 하면 자동으로 해줘서 편하다.

이걸 한개씩 설치하는 사람이 꽤 있는 것 같아서

Error: node yarn start 하자마자 발생하는 runtime 오류

에러메시지

에러발생 코드

해결

./routes/public.js 맨 아래에 다음코드 추가

export를 안했네.. 이런짓을???

노드에 익숙하지 않긴한데 에러메시지 보고 한번에 알아채지 못해서 약간의 시간낭비

React Components

컴포넌트 모음
https://github.com/brillout/awesome-react-components

Web

  • https://github.com/creativetimofficial/material-kit-react
  • https://github.com/mui-org/material-ui
  • https://github.com/designrevision/shards-react
  • https://github.com/react-bootstrap/react-bootstrap
  • https://github.com/bvaughn/react-virtualized
  • https://github.com/creativetimofficial/argon-design-system-react
  • https://github.com/palantir/blueprint
  • https://github.com/react-toolbox/react-toolbox
  • https://github.com/OnsenUI/OnsenUI
  • https://github.com/segmentio/evergreen
  • https://github.com/reactstrap/reactstrap
  • https://github.com/grommet/grommet
  • https://github.com/rebassjs/rebass
  • https://github.com/mlaursen/react-md

Desktop

  • https://github.com/gabrielbull/react-desktop

Native

  • https://github.com/jondot/awesome-react-native

Groovy를 터미널 스크립트로 사용하기

개인적으로 Groovy의 문법이 맘에들어서 Java 프로젝트에서 유닛테스트를 할 때라던가 많이 사용하는데
(Kotlin 프로젝트에는 보통 코틀린을 사용…)

새로운 기능을 몇 가지 발견해서 연동테스트의 스크립트 언어로 사용하려고 찾아봤다.

groovy의 grapes(@Grap)을 사용하면 개별 파일에서 의존성 관리가 된다던가
스크립트 언어로 쓸 수 있는 기능을 많이 만들어놓은 것 같다.

그런데 몇가지 실망한 포인트가…

  • Groovy 파일간에 import가 되지 않는다던가
  • @Grapes를 파일에 선언 해 놨는데 이걸 자동으로 임포트를 하지 않는 문제…
  • 클래스패스 설정을 할 때 jar파일을 사용해야하는 문제

그럼 … 못쓰겠군.

연동테스트 스크립트는 파이선이나 노드로 해야겠다.

그루비의 용도는

딱.

JVM에서 다이내믹하게 로딩해서 쓸 수 있는 스크립트 언어. 태생이 그렇기도 하고…
DSL형태를 만들기 쉽고


node.ts로 애플리케이션 만들기

과학상자로 자동차를 만들면 안되는거시야

꽤나 잘 굴러가긴 하겠지만 말이야…

enum

아예 없으면 없나보다 할텐데 어설프게 있는게 더 극혐이다.

괜찮은 구조인지는 모르겠지만 대략 이렇게 처리를 해 버렸다.
단순히 enum을 이용해서 ===비교를 하면
class 안의 article: ArticleEnum은 ADOC ArticleEnum.ADOC는 0이라는 값이 나온다
0나오는건 당연한거긴한데
비교하면 0이랑 비교하는것처럼 다 false가 나온다.

취소. 이상하다.. 비교가 잘 된다.
전에 이런종류의 에러를 본 것 같은데
error TS2365: Operator ‘===’ cannot be applied to types 

메모리 공유

브라우저단에서 클라이언트 프로그램을 만들 때는 큰 문제가 되지 않던 부분인 쓰레드 관련 부분도 …
노드를 빠르게 해 주는 장점이기도 하지만 단점이기도 한 이 부분…
메모리를 공유해야 할 일이 있을 때 IPC또는 클러스터링 수준의 아키텍처를 만들어내야한다.

노드의 빠른 속도의 근본 이유이기도 하다.
그래서 간단한 형태로 많은 리퀘스트를 받는 애플리케이션을 만들때는 유용할 것 같다.

익셉션 처리

좀만 잘못하면 자꾸 뒈져버리니…
언어의 문제라기보다는 적절한 프레임웤이 없는게 문제라고 해야할 것 같다.

표준형태 없는 코드의 문제

이건 타입스크립트의 문제이긴 하지만

이 두개가 뭐가 다를까…
namespace가 선언되어 있는 경우
class가 선언되어 있는 경우
default export가 선언되어 있는 경우에 따라 임포트 방식이 달라져야한다.

소스코드를 봐야된다. ide를 좋은거 써야겠지…도큐먼트는 제대로 안나온게 많으니까
표준없는 코드는 여기저기서 문제를 일으킨다. 프로젝트가 커질수록 문제도 커지겠고…

장난감으로는 장난감만 만들자

노드 백엔드는 토이프로젝트까지만 사용하는걸로

프로토타이핑으로는 괜찮은 것 같다.

처음 배우기가 쉽다고 하지만 스프링에서 쓰던만큼 셋팅을 하려고 하니까 이것도 시간이 만만찮게 걸리는건 별 수 없는 것 같다.

잘 갖춰진걸로 쉽게 만들려면 RoR이 좋겠고
노드는 진짜 개판으로 짜기만 좋다. 이것저것 갖추려면 시간은 어차피 그만큼 걸린다.

Go 언어 사용 감상 – Generic이 없다는 것…

새로운 언어를 공부할 때 언어별 특성에 따라 다른 접근방법을 사용해야한다.
요즘은 Go언어로 뭘좀 해 보려고 했는데…

언어의 특성 때문에 yaml의 설계마저도 달라져야 한다는 것을 알게 됐다.
(내가 너무 자바스타일로 구조를 잡는건지도 모르겠다

간단한 빌드 툴을 만들면서 아래와 같은 형태의 제네릭 리스트를 yaml로 만들었는데

  • DockerWork
    • Dockerimage
    • Dockerrepo
    • Dockerfile

당연하다는 듯이 제네릭?오브젝트리스트? 형태로 만들어 버렸다.
Go언어를 잘 못해서 그런것일 수도 있는데 뭔가 만들기가 난감하다.
제네릭이 필요했는데 Go언어에는 그게 없었다.
커뮤니티 검색도 좀 해봤는데 generic 지원을 요청하는 이슈가 많았지만
고언어에는 그게 필요없다~ 라는 의견으로 마무리

강타입에 정적타입이면서 generic이 없다니…

위의 문제를 해결할 때
자바 – 제네릭,
파이썬 – 오브젝트리스트
C언어 – !!노개다
Go언어 – !!노가다
아마 다른언어는 다 비슷한 스타일일거다.

Go언어는 C언어에 가까운 해결방법을 찾으라는 것 같다.
python처럼 is type체크를 하고 형변환 없이 사용할 수 있다면 또 모르겠는데..
그게 아니니 더 난감하다.

뭔가 편하고 깔끔한 방법이 있는데 못 찾는건지.. 아마 없을 것 같다.
덕타이핑과 인터페이스 ifelse 떡칠이 답일 것 같다.

말 나온김에 덕타이핑도…
Duck typeing 덕분에 발생하는 복잡함

다음과 같은 코드가 있다면


자바할 때 처럼 이 인터페이스의 이름을 찾는다면?
나올수도 있고 안 나올수도 있다.

덕타이핑이라고

구현체 사이에 의존관계가 없기 때문에 레퍼런스 검색이 힘들다
동일한 패턴의 인터페이스를 몽땅 검색해야 되는데
자바 개발을 하던 습관이 남아서 그런지 좀 난감하다.

장점일 수도 있고.. 단점일 수도 있는 이 부분..
상속이 없는 것도 덕타이핑의 일부 특성이라고 봐야할 것 같다

기본 문법도 쉽고 간단한 코드를 만들기도 쉽지만
언어 자체가 쉽다?? 글쎄….
데이터 구조를 다루기 힘든 언어인지 익숙해지지 않아서인지…

고 언어 후기

  • 간단한 코드를 짜기는 쉬울 것 같다.
  • 실행 속도가 빠르다? 글쎄…
  • 실행파일을 만들어서 설치하기 쉽다