[rails] 뷰 기본

2016. 6. 11. 22:28프로그래밍/Ruby on Rails

728x90
728x90

최종적인 출력 ERB(Embedded Ruby)를 사용하는 것이 기본.

ERB 템플릿은 HTML에 루비 스크립트를 삽입한 구조.


ERB 템플릿의 장점

- 임의의 루비 스크립트를 넣어 조건 분기 및 반복 등의 처리를 자유롭게 적용한다.

- 뷰 헬퍼를 사용해 데이터베이스에서 추출한 데이터를 기반으로 링크 또는 입력 양식 요소 등을 간단하게 생성한다.


변수 생성

controller에서 render로 출력하는 것 콘트롤러에서 직접 출력하는 것.

템플릿을 이용하려면 일단 요청 처리를 하는 컨트롤러 클래스(액션 메서드)를 만들어야 한다.


hello_controller.rb

1
2
3
def view
  @msg = 'hello'
end
cs

이딴 식으로!


 @msg 인스턴스 변후를 생성한 것. 이는 템플릿에서 참조할 수 있다.

이제 이것을 .html.erb 파일에 <%= @msg %> 형태로 사용할 수 있다.


이러면 액션 매서드와 템플릿(로직과 디자인)이 결합하여 

ERB 라이브러리를 읽어 최종적으로 동적 페이지가 나온다.


템플릿 파일 작성

템플릿 파일은 /app/views 폴더 내부에 /<Conroller Name>/<Action Name>.html.erb 파일을 생성하면 된다.


동적 처리는 <% [임의의코드] %> or <%= [무언가 값을 리턴하는 식] %>로 입력한다.

<% ... -%> '-' 하이픈을 넣게 되면 뒤에 공백과 개행을 제거할 수 있다.


템플릿 변수는 @<Value Name>으로 사용할 수 있다.

ex) @msg


공통 레이아웃 적용

실제로 뷰 페이지를 보니


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <title>Railbook</title>
  <link rel="stylesheet" media="all" href="/assets/hello.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/hello.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="ObfhllCC92wL280+17I1JkPFUpqdyDvb4GwWiY/r2E8q2lZJkzee4mAywCPAtXPSkMInkM3Qbuv2cLRePk8cRg==" />
</head>
<body>
 
<div id="main">
Hello View World!!!!!
</div>
 
 
</body>
</html>
cs


다른 소스들이 포함되어 있는데 이 부분들은 공통 레이아웃들이다.


app/views/layouts/application.html.erb에 정의되어있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <title>Railbook</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
 
<%= yield %>
 
</body>
</html>
cs


소스는 대략 이런 꼬라진데 yield 부분에 템플릿 파일의 내용이 쏙 들어가는 형태라고 한다.


장점

- 사이트의 전체적인 디자인을 한꺼번에 적용할 수 있다.

- 개별 템플릿에는 페이지 자체의 내용만을 작성할 수 있다.

- 사이트 구조(네비게이션)에 일관성을 부여할 수 있다.


주석

<%# ... %>

ERB 표준 주석.


#

루비 표준 수석. 한 줄 주석.


<% if false %> ... <% end %>

조건 분기 주석. if 뒤가 false이므로 이 후 모든 end까지 모든 구문이 주석처리.


<% =begin %> ... <% =end %>

뒤의 if false와 기존 조건 분기와 구분이 잘 되지 않으므로 이것을 사용하면 가독성이 좋다.


<!-- ... -->

일반적인 HTML 주석.

728x90
반응형