-
Express.js] pug(jade)/ejs/handlebar 템플릿 설치 및 사용하기Node.js 2023. 12. 15. 17:43
html 템플릿 엔진 : html 구조를 조금 더 편하게 짤 수 있도록 도와준다.
다음의 3가지를 많이 쓴다고 한다.
- pug(jade)
- ejs
- handlebar
오늘은 이 세가지를 모두 설치한 뒤, PUG부터 알아보도록 한다.
1. 템플릿 엔진 설치하기
설치에는 npm을 사용한다.
npm install --save ejs pug express-handlebars
설치가 완료되었다.
2. PUG 사용해보기
2.1 app.js 수정
기존 app.js 코드
// app.js const path = require("path"); const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.set('view engine', 'pug'); const adminData = require("./routes/admin"); const shopRoutes = require("./routes/shop"); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public'))); //app.use("/admin", adminRoutes); app.use("/admin", adminData.routes); app.use(shopRoutes); app.use((req, res, next) => { res.status(404).sendFile(path.join(__dirname, "views", "404page.html")); }); app.listen(3000);이제 PUG를 사용하기 위한 세팅을 하자
퍼그 아이콘 졸귀 app.set('view engine', 'pug');- set : express에 전역 설정을 추가함
- view engine : 템플릿 엔진을 사용함을 알림
app.set('views', 'views');- view : 템플릿 폴더가 어디인지 알림. 기본값은 views로 현재는 설정할 필요 없으나, 보여주기 위해 설정. 만약 템플릿 폴더를 다른 이름으로 설정했다면 필수로 설정.
더보기수업에서는 아래와 같이 작성했다.
app.set('view', 'views');2023년 12월 현재
view라는 생성자를 찾을 수 없다고 한다.
이에 위와 같이 수정했더니 정상 작동한다.
수정된 전체 코드
//app.js const path = require("path"); const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.set('view engine', 'pug'); // app.set : 이 express의 전체 설정 // view engine : 동적 템플릿을 사용함을 알림 app.set('views', 'views'); //view : view 파일들이 어디에 있는지 알려줌. views폴더가 기본값이고, 만약 다른 이름으로 해당 폴더를 만들었으면 꼭 설정해야 함. const adminData = require("./routes/admin"); const shopRoutes = require("./routes/shop"); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public'))); //app.use("/admin", adminRoutes); app.use("/admin", adminData.routes); app.use(shopRoutes); app.use((req, res, next) => { res.status(404).sendFile(path.join(__dirname, "views", "404page.html")); }); app.listen(3000);2.2 shop.js 수정
res.render('shop');- render : 기본 템플릿 엔진을 사용해서 페이지를 render
- 여기서는 pug를 기본 엔진, views를 기본 폴더로 이미 설정했기에 shop만 적어줘도 해당 폴더의 shop.pug 파일을 찾아간다.
//shop.js const path = require("path"); // node 코어모듈 const express = require("express"); const rootDir = require("../util/path"); const adminData = require("./admin"); const router = express.Router(); router.get("/", (req, res, next) => { // console.log(adminData.products); // res.sendFile(path.join(rootDir, "views", "shop.html")); res.render('shop'); //render : 기본 템플릿 엔진를 사용해서 페이지를 render. // pug를 기본 엔진, views폴더를 기본으로 설정했기 때문에 shop만 적어줘도 해당 폴더의 .pug 파일을 찾아감 }); module.exports = router;2.3 shop.pug 파일 생성
views 폴더 아래에 다음과 같은 파일을 만들어 준다.
//shop.pug <!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 My Shop link(rel="stylesheet", href="/css/main.css") link(rel="stylesheet", href="/css/product.css") body header.main-header nav.main-header__nav ul.main-header__item-list li.main-header__item a.active(href="/") Shop li.main-header__item a(href="/admin/add-product") Add Product
이것이 PUG의 구조 PUG는 들여쓰기를 통해 종속관계를 나타낸다.
'Node.js' 카테고리의 다른 글
Express-Handlebars 템플릿 엔진 사용하기 (0) 2024.01.05 Pug로 HTML문서 작성하기 (0) 2023.12.18 Express.js] 여러 정보를 한번에 export하는 라우터 만들기 (0) 2023.12.12 Express.js] static 폴더 사용 | 정적으로 파일 서비스 하기 | CSS, JS, 이미지 파일 등 가져오기 (0) 2023.12.12 Express.js]Navigation을 위한 헬퍼(유틸)함수 사용 (0) 2023.12.12