반응형
view engine
- view engine이란 DB의 내용 등을 자연스럽게 HTML에 보여줄 수 있도록 하는 엔진이다.
- html 내부에서 해당 엔진을 활용해 반복문, 조건문 등을 사용할 수 있다.
- 다양한 패키지가 존재하는데 우리는 그 중 Nunjucks를 사용할 것이다.
- npm install nunjucks 명령어를 통해 패키지를 설치한다.
npm install nunjucksnunjucks
nunjucks.configure('template', {
autoescape: true,
express: app
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true
// express : app는 사용할 주체- nunjucks.configure를 통해 적용할 html 페이지의 위치를 결정할 수 있다.
- 해당 위치 하위의 파일은 전부 nunjucks가 적용되어 활용 가능하다.
- autoescape는 보안상의 이유로 대부분 true옵션을 준다. (false로 해놓으면 html태그를 허용한다.) html태그 사용이 필요할 경우 사용할 때 safe 옵션을 준다.
- express는 활용의 주체가되는 express객체이다.
- template 폴더를 프로젝트 최상위 폴더에 생성한다
- 라우팅이 되어 있을 경우 해당하는 폴더도 만들어주어야 한다. (admin)
- 해당 폴더에 html 파일을 만들고 활용한다.
router.get('/products', (req, res) => {
res.render('admin/products.html', {
message: "hello!!!!!!!!",
online: "online now"
})
});- 활용시엔 위와 같이 활용한다.
- 현재는 DB활용에 대해 배우지 않았기 때문에 {}안에 문자열 데이터를 담아 보낸다.
products
{{ message }}
{{ online }}- products.html 파일은 위와같이 구성되어 있다.
- 만약 내부 내용이 html 태그라면 autoescape로 막히게 되지만 | safe 옵션을 주어 이를 허용할 수 있다.
- 서버를 돌리면 아래와 같이 정상적으로 페이지가 구성된다.
템플릿 상속
- 웹페이지를 구성하다 보면 여러 템플릿을 만들게 된다. 그 중에는 레이아웃이 겹치는 경우도 많을 것이다. (상단메뉴, 배너 등)
- 매번 html 파일을 작성할 때마다 같은 레이아웃을 구현하는 것은 매우 비효율적이다.
- 따라서 대부분의 웹 프레임워크에서는 템플릿 상속이라는 기능을 제공한다.
- 템플릿 상속 기능을 이용하면 하나의 레이아웃을 구성하고 그를 계속해서 재활용할 수 있다.
Nunjucks 템플릿 상속
- template 폴더에 layout 폴더를 만들고 그 안에 base.html을 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top:100px;">
{% block content %}{% endblock %}
</div>
</body>
</html>- base.html을 위와 같이 구성한다. 부트스크랩을 이용하는 코드가 기본 베이스로 깔려있으며, 전체적인 내용이 div class="container"에 들어가게된다.
- {% block content %}{% endblock %}부분만 작성하면 새로운 html파일에서는 해당 부분만 변경되면서 base.html의 내용은 그대로 가져가는 것이다.
- 해당 base.html에는 부트스트랩을 불러오는 과정만 포함되어 있다.
{% set title = "관리자 리스트" %}
{% extends "layout/base.html" %}
{% block content %}
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<tr>
<td>제품 이름</td>
<td>
2020-03-07
</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
<a href="/admin/products/write" class="btn btn-default">작성하기</a>
{% endblock %}- base.html을 활용해 작성한 새로운 html파일이다.
- set title로 title을 설정할 수 있다.
- 그리고 extends "layout/base.html"로 베이스가 될 html파일을 지정한다.
- {% block content %}{% endblock %} 사이에 들어갈 내용을 입력한다.
- 정상적으로 부트스트랩을 이용해 페이지를 출력한다.
반응형
'🛠 기타 > WEB' 카테고리의 다른 글
| Node.js - Event Emitter (0) | 2020.12.10 |
|---|---|
| Node.js - express 미들웨어 (0) | 2020.10.14 |
| Node.js - express Router (0) | 2020.10.13 |
| Node.js - nodemon (0) | 2020.10.13 |
| Node.js - express 시작 (0) | 2020.10.13 |