Template Engine
반복적은 UI를 토대로 구성하는 것
main.html
write.html
detail.html
⇣
Template engine
<html>
...
main / write / detail
...
</html>NodeJs에는 EJS, Pug Nunjucks 같은 템플릿 엔진들이 존재
설치 명령어
npm i nunjucks
- npm install = npm i
index.js 위에 추가
import nunjucks from 'nunjucks';import express from "express";
import path from "path";
import nunjucks from "nunjucks";
const __dirname = path.resolve();
//express 가져옴
const app = express();
//view engine Set
// .html 안붙여도 되는 세팅
app.set("view engine", "html"); //main.html -> main(.html)
// nunjucks
nunjucks.configure("views", {
//views 라는 곳에 모아서 쓰겠다는 말
watch: true, //html 파일이 수정될 경우, 다시 반영 후 렌더링
express: app,
});
//middleware
//main page GET
app.get("/", (req, res) => {
// res.send("Main Page GET Resquest~!");
res.sendFile(__dirname + "/public/main.html");
});
app.get("/write", (req, res) => {
// render= 서버에서 렌더링한다. (랜더링할 파일 선택)
res.render("write.html");
});
app.listen(3000, () => {
console.log("Server is Running~!🎆");
}); //3000번 포트로 서버 구동app.get("/write", (req, res) => {
// render= 서버에서 렌더링한다. (랜더링할 파일 선택)
res.render("write.html");
});
views 폴더에 base.html 생성
bases.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 공통된 요소 -->
<nav>
<a href="">Logo</a>
<a href="">글 작성</a>
</nav>
<!-- 바뀌는 요소 -->
{% block content %}
{% endblock %}
<!-- 공통된 요소 -->
<footer>
<p>
<Footer>Good</Footer>
</p>
</footer>
</body>
</html>write.html
<!-- 상속받을 것을 씀 -->
{% extends 'base.html' %}
<!-- 블럭안에 넣을 것 -->
{% block content %}
<h1>글 작성 페이지입니다.</h1>
{% endblock %}{% block content %}
<h1>글 작성 페이지입니다.</h1>
{% endblock %}{% block content %} : 시작
{% endblock %}: 끝
내 커리어 끝은 없다