고정 헤더 영역
상세 컨텐츠
본문
반응형
템플릿 상속
// test4.html
<!-- 상속하는 곳(test4.html)
{% block content %}
{% endblock %} -->
<!-- htmlko 기본형식을 상속받는 곳(이름은 상속받는 파일이름이면 됩니다.) -->
{% extends 'base.html' %}
{% block content %}
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
{% endblock %}// base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<p>메뉴</p>
{% block content %}
{% endblock %}
<p>푸터</p>
</body>
</html>test4.html에서 상속을 받아서
base.html에 "콘텐츠 내용"이 출력된다.
// npm init --yes
// npm i nunjucks express
// npm i nodemon --save-dev
// -> nodemon app1 으로 실행 가능
const nunjucks = require('nunjucks');
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'html');
nunjucks.configure('template', {
autoescape: true,
express: app,
watch: true
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true (false일 경우 html 태그 허용, DBD 공격 가능)
// express : app, 사용할 객체 지정
// watch: true 옵션을 사용하면 HTML파일이 변경될 때 템플릿 엔진 다시 렌더링
app.get('/', (req, res, next) => {
res.render('test4.html', {
});
});
app.listen(8080);
반응형
브라우저 상에서
test4.html에 있던 p 태그들이
base.html에 출력된다.
터미널에서 js 파일 실행
nodemon "js파일명" (app4.js)
test.html의 템플릿(code)을 상속받아서,
base.html을 기준으로 출력되었다.
신기한 건, js파일을 출력했는데 html 화면이 나온다는 점이다.
ㅇㄹ
반응형
'IT 공부 > 백엔드(Back-end)' 카테고리의 다른 글
| 네트워크 요청하기 - 서버에서 데이터 받아오는 방법 (0) | 2022.01.22 |
|---|---|
| 생활코딩 Ajax 필기 노트 (0) | 2022.01.21 |
| JavaScript Fetch API를 사용하여 데이터를 가져오는 방법 (0) | 2022.01.17 |
| 자바스크립트 객체 지향(Object-Oriented Programming)에 대한 기초 지식 (0) | 2022.01.14 |
| 사용자 데이터를 생성 가능한 node.js (0) | 2022.01.13 |
댓글 영역