NODE.JS/Express
Express - 템플릿상속
두비_
2022. 6. 15. 23:56
반응형
공통파일, 자바스크립트, 제이쿼리 등 템플릿 파일이 생성되어있으면 다음 생성될 때 해당 파일을 참조할 수 있다
공동된 템플릿을 구해오는 형식이며 nunjucks 기능이다
//app.js
nunjucks.configure('template', {
autoescape : true ,
express : app
});먼저 autoecape : true 기능에 대해 알아본다
admin.js에서 message 부분을 string이 아닌 html 태그로 바꿔서 진행해본다면 아래처럼 나오게된다
만약 고객이 게시판을 통해 JS 코드나 공격기법을 진행해서 그대로 출력이되면 안되니 내용 그대로 출력할 수 있게
내용 그대로 출력이 되게끔 하는 기능이다
공통파일 제작
vsc 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>타이틀도 보이고 부트스트랩이 선언되어있다
container 안에 아래 코드가 상속되어 있으면 그대로 감싸주는 역할
{% block content %}{% endblock %}products.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 %}위에서부터 보면 extends를 통해 layout/base.html 전체를 불러오고 처음과 끝에 있는 {% block content -%} 와 {% endblock %} 내의 내용이 base.html에 적혀져있는 {% block content %}{% endblock %} 에 들어가게된다