SlideShare a Scribd company logo
Layout and Rendering
Rendering in Rails
사용자의 요청에 대한
응답을 생성하는 것
응답을 돌려주는 3가지 방법
1. head
본문이 필요 없는 경우
head :bad_request
2. redirect_to
HTTP Redirection
redirect_to action: :index
3. render
본문을 생성할 수 있는
유일한 방법
CoC
- 컨트롤러의 액션은 자신과 매칭되는
뷰의 경로를 알고 있다.
controller#action => app/views/controller/action.*.*
- 요청받은 포맷에 따라서,
그에 알맞는 템플릿을 사용한다.
html => view.html.erb
json => view.json.jbuilder
xml => view.xml.builder
- One Action,
One Rendering
if @model.save
redirect_to @book
end
render :new
- One Action,
One Rendering
if @model.save
redirect_to @book
end
render :new
- One Action,
One Rendering
if @model.save
redirect_to @book and return
end
render :new
render를 호출하는 다양한 방법
render :edit
render action: :edit
render "edit"
render "edit.html.erb"
render action: "edit"
render action: "edit.html.erb"
render "books/edit"
render "books/edit.html.erb"
render template: "books/edit"
render template: "books/edit.html.erb"
render "/path/to/rails/app/views/books/edit"
render "/path/to/rails/app/views/books/edit.html.erb"
render file: "/path/to/rails/app/views/books/edit"
render file: "/path/to/rails/app/views/books/edit.html.erb"
render plain: "Text"
render json: @model
render xml: @model
Layout In Rails
템플릿을 감싸는 코드
일반 템플릿이 사진이라면,
레이아웃은 사진을 끼울 액자 틀
CoC
- 레이아웃은 컨트롤러 별로
ApplicationController 를 위한 레이아웃
-> views/layouts/application.html.erb
- 상속 가능
application.html.erb 이 기본 레이아웃으로
사용되는 이유
- 다양한 호출 방식에 따른 우선 순위
app/views/layouts/application (기본)
app/views/layouts/controller
controller의 layout 선언
render layout: "old"
app/views/layouts/application (기본)
app/views/layouts/controller
controller의 layout 선언
render layout: "old"
파일명 또는 함수명, 또는 block 가능
조건부 레이아웃(except:, only:) 가능
Partial View
템플릿 파일에서 호출하는 템플릿
뷰를 Dry하게 만들고 싶을때 사용 가능
ex) form refactoring
CoC
- 파일명을 ‘_’로 시작할 것.
호출할 때에는 ‘_’ 없이 호출.
‘_form’ -> render ‘form’
And…
- 뷰에서 호출하는 render는 파셜을 사용
- 파셜에도 레이아웃을 사용 가능
- 지역 변수를 넘겨줄 수 있음
- Collection Partial, Spacer Templates…
yield & content_for
yield in layout
-> 액션의 기본 템플릿을 출력
yield :symbol
템플릿에 있는 content_for :symbol 블럭을 출력
…
yield
…
yield :nest_layout
…
…
content_for :nest_layout do
…
end
layout.html.erb
view.html.erb
content_for 영역을 제외한
view.html.erb가 출력
Asset Helper
외부 컨텐츠 링크를
생성할 경우에 사용
auto_discovery_link_tag
javascript_include_tag
stylesheet_link_tag
image_tag
video_tag
audio_tag
상대경로 사용 시
- “app”
절대경로 사용시
- “http://…”
상대 경로 사용시 경로로 ‘/assets/~~’ 를 사용하는
태그가 생성되며, 이 링크는 아래의 경로로 라우팅
- app/assets
- lib/assets
- vendor/assets
더 자세한 설명은 Rails Guide나
Rails API 를 참조해주세요.
Q & A
- END -

More Related Content

Similar to Layout and rendering

Ksh portfolio
Ksh portfolioKsh portfolio
Ksh portfolio
SunhoKo2
 
[오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC [오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC
Ji-Woong Choi
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개
SuHyun Jeon
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
sung hwan Park
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
Mu-ik Jeon
 
2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주
범재 이
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
 
Mvc 패턴
Mvc 패턴Mvc 패턴
Mvc 패턴
Seokju Hong
 
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
NAVER D2
 
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
KTH, 케이티하이텔
 
React-Query가필요한가요.pptx
React-Query가필요한가요.pptxReact-Query가필요한가요.pptx
React-Query가필요한가요.pptx
ssuser89c688
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
EunYoung Kim
 
[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기
YoungSu Son
 
Rails routing from the outside in
Rails routing from the outside inRails routing from the outside in
Rails routing from the outside in
Seungkyun Nam
 
[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC
AnselmKim
 
8장 editor
8장 editor8장 editor
8장 editor
brodiebrodie
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
 
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
REACTJS HelloWorld
REACTJS HelloWorldREACTJS HelloWorld
REACTJS HelloWorld
Lee Jong Cheol
 

Similar to Layout and rendering (19)

Ksh portfolio
Ksh portfolioKsh portfolio
Ksh portfolio
 
[오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC [오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
 
Mvc 패턴
Mvc 패턴Mvc 패턴
Mvc 패턴
 
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
 
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
 
React-Query가필요한가요.pptx
React-Query가필요한가요.pptxReact-Query가필요한가요.pptx
React-Query가필요한가요.pptx
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
 
[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기
 
Rails routing from the outside in
Rails routing from the outside inRails routing from the outside in
Rails routing from the outside in
 
[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC
 
8장 editor
8장 editor8장 editor
8장 editor
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
 
REACTJS HelloWorld
REACTJS HelloWorldREACTJS HelloWorld
REACTJS HelloWorld
 

Layout and rendering