티스토리 뷰

프로그래밍 공부/Ruby on Rails : 이론

Ruby on Rails : V (View)

나른한 하루 2019. 10. 31. 20:02

V는 View의 줄임으로서, 사람들한테 홈페이지 코드가 반영된 결과를 시각적으로 보여주는 역할을 합니다!

이를테면

<h2 style="color: blue">나는 빡빡이다</h2>

라고 게시글을 쓰게 된다면, 그 결과물을 사람들에게 눈으로 보여주는 역할이 View 입니다!

 

 

  • View에 대해 좀 더 알아보자!

Controller에 액션 정의를 내리지 않고, View 하나만을 만들어서는 결과물을 볼 수 있긴 하지만 Model을 참고를 할 수 없다는 문제점이 쪼끔 있습니다.

 

주로 View와 Controller는 기본적으로 다음과 같이 함께 사용이 됩니다.

## app/controllers/lotties_controller.rb
class LottieController < ApplicationController
	def index
		@random = (1..45).to_a # 1~45의 숫자가 담긴 배열을 생성합니다 (C언어로 치면 for (int i=1;i<=45;i++) 개념), 참고로 .to_a는 일반 정수를 array 화 시키는 메소드
		@lotto = @random.sample(7).sort # random 변수 내 있는 1~45 숫자 중 .sample(n)를 통해 n개의 랜덤정수를 뽑아냅니다. 그리고 .sort를 통해 오름차순 정렬을 합니다.
	end
end
## app/views/lotties/index.html.erb
<h1 align="center">오늘 내 인생에 있어 최고의 로또번호는??</h1>
<center><%= @lotto %></center>

index.html.erb(view) 에 의해 보여지는 결과물

위와같이 index.html.erb 파일에서 @lotto 라는 변수를 쓸 수 있는 것은 index 액션 내에 @lotto 변수가 정의가 되어 있기에 사용이 가능합니다.

 

 

  • .html.erb ?

View 파일 확장자는 .html.erb 로 끝납니다.

이는 해당 view 파일 내에 Ruby/Rails 문법을 쓰는 것을 허용하기 위해 끝에 추가적으로 .erb 라는 확장자가 덧붙여 지는겁니다.

 

 

  • View 파일 내 Ruby/Rails 문법 사용

View 파일 내에는 Ruby/Rails 문법을 사용할 수 있는데, 그냥 사용하는것은 아닙니다.

예를들어 순수하게 Controller 액션에서 정의했던 변수를 사용하려면 다음과 같이 사용하면 됩니다.

1) 문법 사용 예제 1

## app/controllers/lotties_controller.rb
class LottieController < ApplicationController
	def index
		@random = (1..45).to_a # 1~45의 숫자가 담긴 배열을 생성합니다 (C언어로 치면 for (int i=1;i<=45;i++) 개념), 참고로 .to_a는 일반 정수를 array 화 시키는 메소드
		@lotto = @random.sample(7).sort # random 변수 내 있는 1~45 숫자 중 .sample(n)를 통해 n개의 랜덤정수를 뽑아냅니다. 그리고 .sort를 통해 오름차순 정렬을 합니다.
	end
end


## app/views/lotties/index.html.erb
<%= @lotto %>

 

하지만 변수만 쓰면 심심하겠죠?

view에서는 if문과 같은 전문적인 문법 사용에 대해서도 지원을 합니다.

2) 문법 사용 예제 2

## app/views/admins/index.html.erb
<% if current_user.has_role? :admin %>
	<div>안녕하세요, 관리자 <%= current_user.nickname %>님!</div>
<% else %>
	<div>해당 페이지는 접근 불가입니다.</div>
<% end %>

하지만 if문을 보면 뭔가 좀 이상합니다.

예제 1과는 다르게 = 가 없습니다.

결국 <% %> 내 = 의 여부는

 

<%= ... %> : 출력 결과물을 보여주는 것,

<% %> : 출력 결과물을 보여주지 않는 것

 

위 2개의 차이로 이해를 하면 됩니다.

 

덧붙여서, <%# %> 도 있는데, #가 들어가면 주석처리가 되어 외부 View 결과상으로는 아무런 동작도 하지 않고, 보여지지도 않습니다.

### app/views/homes/index.html.erb

## 정상적으로 코드가 view에 노출
<%= current_user.nickname %>

## 주석 처리 : 코드가 작동하지도, 노출되지도 않음.
<%# current_user.nickname %>
<%#= current_user.nickname %>

더불어, View 파일 내에서는 다음과 같이 모델을 직접 참고해서 데이터를 불러올 수 있긴 하나, 해당 방법은 미래의 코드 유지보수에 있어 추천을 드리지 않습니다.

1) 올바른 코드 작성 예

## app/controllers/posts_controller.rb
class PostController < ApplicationController
	def index
		@posts = Post.all
	end
end
## app/views/homes/index.html.erb
<% @posts.each do |t| %>
	<%= t.title %> / <%= t.content %>
<% end %>

 참고  each do 문법은 변수가 가진 범위 만큼 반복을 돌면서 하나하나 데이터를 뽑아낼 때 쓰입니다.

(t라는 변수는 상속변수로서, 상세적으로 테이블의 컬럼(현재 예시에서는 title, content)을 가공할 때 쓰입니다.)

 

2) 올바르지 않은 코드 작성 예

* 작동은 잘 되긴 하나, 나중에 유지보수 때 골 때릴 수 있음.

## app/views/homes/index.html.erb
<% Post.all.each do |t| %>
	<%= t.title %> / <%= t.content %>
<% end %>

 

 

  • View 전체에 내용을 보여주고 싶을 경우

1) 홈페이지 view를 보면서 이상한걸 느껴보지 않았나요?

그동안 view를 꾸밀 때 아무리 예제코드라지만

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>My Homepage</title>
 </head>
 <body>
  	... 내용 ...
 </body>
</html>

위와같이 <!doctype html> 등과같은 HTML를 이루는 정의가 하나도 없었습니다.

 

2) 기획을 할 때 이런 고민을 해봤을겁니다.

어느 페이지를 방문하든, 상단 메뉴를 고정시키고 싶다

 

저희가 위와같은 고민을 하면서, HTML 기본 뼈대를 작성하지 않아도 되는 것은 이런 것을 도와주는 view가 기본적으로존재하기 때문입니다.

해당 이슈를 돕는 View의 위치는  app/views/layouts/application.html.erb  에 존재합니다.

## app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Kcm</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

 위 코드를 살짝 Review를 해볼까요!

 

<%= csrf_meta_tags %>

위 코드는 외부 변조 방지 취약점을 막는 코드입니다.

실제로 F12를 하면서 F5로 홈페이지를 새로고침(Reflash) 때 마다 CSRF Token 값이 계속 바뀌는게 확인이 됩니다.

 

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

위 코드는 app/assets/javascripts 및 app/assets/stylesheets 폴더 안에 있는 파일을 불러옵니다.

그리고 assets 폴더 안에 있는 파일들은 파일이름 옆에 난수가 붙어있으며, 파일 내용이 수정될 때 마다 난수가 변경됩니다.

이는 브라우저의 캐싱을 방지하고자 존재하는 기능이라고 보면 됩니다.

* 캐싱 : 최초에 홈페이지 접속 시 css, js, 이미지 등을 호출 및 다운로드를 하느라 시간이 좀 걸리나, 다음에 또 홈페이지를 접속을 대비해 홈페이지 내부에 있는 css 및 js 파일, 이미지를 기억해내는 성질 (홈페이지 재방문 시 사전에 기억해냄으로서 홈페이지 로딩 Time을 단축시킴.)

 

<%= yield %>

각 View 파일 마다 작성된 내용이  <%= yield %>  내에 담겨집니다.

 

 

  • View와 Controller 중 누가 먼저 작동될까?

한번 이런 의문점을 가진적이 있었는데, 확인 결과 Controller을 먼저 거치고, 그 후에 View의 결과를 보여주는 구조였습니다.

확실한 답을 결정짓는 코드는 바로 아래의 코드라고 보면 됩니다.

## app/controllers/posts_controller.rb
class PostController < ApplicationController
	def index
		@posts = Post.all
		redirect_to "/"
	end
end

 참고  redirect_to 코드는 페이지 방문 시 이동을 시킬 때 쓰이는 코드입니다.

 

위 코드 결과는 아무리 view에 뭘 꾸몄어도,  /posts/index  페이지에 방문 시 결국 Controller을 먼저 방문을 하게되고, redirect_to 코드로 인해 메인페이지로 이동시킵니다.

 

 

  • URL(URI) 규칙

View 페이지에 있어 URI 규칙은 보통 다음과 같습니다.

만약 app/views/posts/index.html 을 URL이 가리킬 경우 URL 규칙은 http://.../posts/index

 

루비온 레일즈 Ruby on Rails ROR

저작자표시

'프로그래밍 공부 > Ruby on Rails : 이론' 카테고리의 다른 글

Ruby on Rails : MVC 마스터를 위한 노가다 CRUD(게시판 제작)  (0) 2019.11.01
Ruby on Rails : C (Controller)  (2) 2019.10.31
Ruby on Rails : M (Model)  (3) 2019.10.31
Ruby on Rails : 랜덤 로또 홈페이지 제작 (VC 활용)  (0) 2019.10.31
Ruby on Rails : 전체적인 레일즈 간단 이론  (0) 2019.10.31
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함