6장. View¶
이 장에서는 뷰(View)에 대해 설명한다. 뷰(View) 파일이란 출력물을 생성하는 템플릿을 의미한다.
# vhosts.xml - <Vhosts><Vhost><M2><Endpoints><Endpoint>
<View>
<Source Mandatory="off">https://bar.com/#view</Source>
<WellFormed>ON</WellFormed>
</View>
<Source>
뷰 파일을 게시한 URLMandatory
클라이언트가#view
파라미터를 입력하지 않은 경우 동작방식Off (기본)
M2-JSON
을200 ok
로 응답한다. 디버깅에 유용하다.ON
400 bad request
로 응답한다.
<WellFormed>
생성된 뷰 파일이 문법에 맞도록(well-formed) 보정한다.Off
보정하지 않는다.ON (기본)
문법에 맞도록 보정한다.
Nunjucks¶
Nunjucks 언어를 통해 M2-JSON
을 다룬다.
Nunjucks 는 Jinja2 에 영감을 받은 언어이다. 따라서 기본적인 Jinja2 의 문법이나 필터를 그대로 사용한다.
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
]
}
Nunjucks 형식으로 다음과 같이 참조 가능하다.
{{ model.firstname }}
{{ model.address.state }}
{{ model.phoneNumber.0.number }}
조건문, 반복문을 지원한다.
{% if hungry %}
I am hungry
{% elif tired %}
I am tired
{% else %}
I am good!
{% endif %}
<h1>Posts</h1>
<ul>
{% for item in items %}
<li>{{ item.title }}</li>
{% else %}
<li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>
반복문을 이용하면 배열 모델을 손쉽게 가공할 수 있다.
주석
더 많은 내용은 nunjucks 에서 다룬다.
포맷¶
HTML, XML¶
HTML
, XML
템플릿을 만든다.
<html>
<body>
<H1>{{ model.firstname }} {{ model.lastName }}</H1>
<p>{{ model.address.city }}</p>
</body>
</html>
별도의 <meta>
태그가 필요없다.
JPG, PNG, WEBP, BMP, PDF¶
이미지 출력은 HTML
템플릿을 기반으로 렌더링한다.
<meta>
태그를 통해 출력 포맷을 지정한다.
다음은 PNG
이미지를 가로 400, 세로 300으로 출력하는 예제이다.
<!DOCTYPE html>
<html>
<head>
<meta name="m2-render-png" width="400" height="300">
<style>
p { display: block; margin-top: 1em; margin-bottom: 1em; }
</style>
</head>
<body>
<H1>{{ model.firstname }} {{ model.lastName }}</H1>
<p>{{ model.address.city }}</p>
</body>
</html>
이하 이미지 포맷에 따라 name
속성 값과 지원 옵션이 다르다.
속성 | 설명 | 기본값 |
---|---|---|
width |
가로 픽셀 | 400 |
height |
세로 픽셀 | 300 |
quality |
JPEG 품질(%) | 100 |
이미지 포맷별 <meta>
태그 예제는 다음과 같다.
JPG
<meta name="m2-render-jpg" width="400" height="300" quality="85">
PNG
<meta name="m2-render-png" width="400" height="300">
WEBP
<meta name="m2-render-webp" width="400" height="300" quality="85">
BMP
<meta name="m2-render-bmp" width="400" height="300">
PDF
<meta name="m2-render-pdf" width="400" height="300" scale="1" margin-top="10px" margin-bottom="10px" margin-right="10px" margin-left="10px">
MP4, GIF¶
비디오, Animated GIF 등 시간흐름이 필요한 포맷은 연속된 장면( <Scene>
)을 연결하여 만든다.
다음과 같이 <Scene>
태그를 통해 각 화면을 구성한다.
<!DOCTYPE html>
<html>
<head>
<meta name="m2-render-gif" width="400" height="300" delay="1000"">
<style>
p { display: block; margin-top: 1em; margin-bottom: 1em; }
</style>
</head>
<body>
<Scene>
<Div style="background-color: blue;">
<H1>{{ model.firstname }} {{ model.lastName }}</H1>
<p>{{address.city}}</p>
</Div>
</Scene>
<Scene>
<Div style="background-color: blue;">
<H1>{{ model.lastName }} {{ model.firstname }} </H1>
<p>{{ model.address.city }}</p>
</Div>
</Scene>
<Scene>
<Div style="background-color: green;">
<H1>{{ model.lastName }} {{ model.firstname }} ({{ model.age }})</H1>
<p>{{ model.address.city }}</p>
</Div>
</Scene>
</body>
</html>
<Scene>
태그는 의미가 없다. 따라서 <Div>
를 넣어 영역을 구분하면 개발 단계에서 쉽게 확인이 가능하다.
MP4
<meta name="m2-render-mp4" width="400" height="300" interval="1000">
GIF
<meta name="m2-render-gif" width="400" height="300" delay="1000">
- 장면 시간(
delay (단위: ms)
) = 1000
- 장면 시간(
함수¶
이미지 정의된 다양한 함수가 제공된다.
함수는 <meta>
태그로 명시하며 다음 형식을 가진다.
<meta name="m2-function-*" attr1="value1" attr2="value2" ...>
m2-function-image
¶
페이지에서 참조하는 이미지를 일괄처리한다. 상품기술서처럼 큰 이미지가 포함된 페이지를 효과적으로 전송하는 용도이다.
<html>
<head>
<meta http-equiv="Content-Type" text/html; charset=UTF-8">
<meta name="m2-function-image"
host="https://www.example.com/m2/image"
split-height="500"
class="mym2div"
full="yes"
tool="/grayscale/true/optimize"
max-size="10">
<style>
.mym2div {
display: inline-block;
width: 100%
}
</style>
</head>
<body>
{{ model.__raw }}
</body>
</html>
속성 | 설명 |
---|---|
host (필수) |
이미지 툴 이 설정된 가상호스트 |
split-height |
이미지 높이가 설정된 값(px)을 초과할 경우 분할한다. |
class |
이미지에 적용할 CSS 클래스 |
full (기본: no) |
이미지의 가로 폭을 상위 Element의 100%로 맞춘다. |
tool |
이미지 툴 명령어 |
querystring-origin-url |
이미지 툴 로 전달할 원본주소 쿼리스트링 키 (기본: sref ) |
max-size (기본: 10MB) |
가공할 최대 이미지 크기 |
기본 <meta>
¶
여러 뷰 파일이 공통된 <meta>
속성을 가진다면 기본 값을 설정해 일괄처리할 수 있다.
# vhosts.xml - <Vhosts><Vhost><M2><Endpoints><Endpoint>
<View>
<Source Must="off">https://bar.com/#view</Source>
<MetaDefault>
<Item><![CDATA[ <meta name="m2-render-gif" width="400" height="300" delay="1000""> ]]></Item>
<Item><![CDATA[ <meta name="m2-function-image" host="https://www.example.com/m2/image" split-height="500" tool="/grayscale/true/optimize"> ]]></Item>
<Item><!-- --> </Item>
</MetaDefault>
</View>
뷰 파일안에 포함되는 <meta>
태그를 <Item>
의 CDATA로 구성하면 기본 값으로 사용한다.
기본 <meta>
를 사용하면 다음과 같이 변경할 속성만 추가하면 된다.
<html>
<head>
<meta http-equiv="Content-Type" text/html; charset=UTF-8">
<meta name="m2-function-image" class="mym2div">
<style>
.mym2div {
display: inline-block;
width: 100%
}
</style>
</head>
<body>
{{ model.__raw }}
</body>
</html>