Getting Started with Rails
위 튜토리얼을 따라 학습하며 작성한 글입니다.
개요
ROR 에서 CSS, JS 를 적용하는 방법에 대해 공부한다.
CSS
모든 view 파일에 적용되는 CSS 는 app/assets/stylesheets/application.css 에 작성하면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* app/assets/stylesheets/application.css */
body {
font-family: Arial, Helvetica, sans-serif;
padding: 1rem;
}
nav {
justify-content: flex-end;
display: flex;
font-size: 0.875em;
gap: 0.5rem;
max-width: 1024px;
margin: 0 auto;
padding: 1rem;
}
nav a {
display: inline-block;
}
main {
max-width: 1024px;
margin: 0 auto;
}
.alert,
.error {
color: red;
}
.notice {
color: green;
}
section.product {
display: flex;
gap: 1rem;
flex-direction: row;
}
section.product img {
border-radius: 8px;
flex-basis: 50%;
max-width: 50%;
}
모든 view 파일에서 위 css 설정을 가져다가 사용할 수 있게된다.
만약 특정 view 파일 내에서 css 를 작성하고 싶다면 여러 방법이 있지만 일단 기본적으로 기존 html 과 마찬가지로 <style> </style> 태그를 사용하면 된다.
더 다양한 방법은 기초 튜토리얼에서 다루지 않는듯싶다.
Import Maps
Rails 는 기본적으로 JavaScript 를 import 하는 경로를 한 곳에 모아놓고 관리한다.
이를 Import Maps 라고 한다.
(import 를 mapping 한 정보들을 모아놓음 -> import maps)
1
2
3
4
5
6
7
8
9
10
# config/importmap.rb
# Pin npm packages by running ./bin/importmap
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.esm.js"
import { Turbo } from "@hotwired/turbo-rails" 라는 코드를 사용하면 @hotwired/turbo-rails 가 어디있는지 모르니까 pin "@hotwired/turbo-rails", to: "turbo.min.js" 라고 작성해서 turbo.min.js 를 찾아갈 수 있게 해준다.
to 에는 js 파일 경로나 url 을 넣어주면 된다.
css 와 마찬가지로 html.erb 파일 내에 <script> 를 사용하여 JavaScript 를 삽입할 수 있다.
Hotwire
Rails 는 SSR 이다. SSR 의 단점을 보완하고자 JavaScript Framework 를 만들었고 그게 Hotwire 이다.
Hotwire 는 기본적으로 다음 3가지 구성요소를 가진다.
- Turbo
- Stimulus
- Native
각 구성요소는 기초 튜토리얼에서 다루지 않지만 Rails 는 기본적으로 Hotwire 가 적용되어 있다는 것을 알고 넘어가자.