-
Pug로 HTML문서 작성하기Node.js 2023. 12. 18. 17:44
기존코드
const path = require("path"); const express = require("express"); const rootDir = require("../util/path"); const adminData = require("./admin"); const router = express.Router(); router.get("/", (req, res, next) => { res.render('shop'); }); module.exports = router;
이제 요청으로 들어온 데이터를 함께 내보내보자.
const products = adminData.products; res.render("shop", { prods: products, docTitle: 'Shop' });
products에 admin에서 들어온 products 정보를 저장.
res.render에서 두번째 매개변수부터는 함께 전송할 데이터이다.
여기서는 객체로 자료를 내보내 shop.pug에서 사용한다.
pug 기본 문법
1. #{변수명} : 해당 키에 저장된 문자열을 단순 출력한다.
title #{docTitle}객체 안에 저장되어있던 docTitle을 바로 사용가능하다.
2. 조건문 아래와 같이 사용
if prods.length > 0prods 또한 객체 안에 저장된 속성을 바로 사용 가능.
3. 반복문도 쓸 수 있다.
each product in prods//- 반복문 사용 가능article.card.product-itemheader.card__headerh1.product__title #{product.title}prods의 각 값들을 지정한 인수(여기서는 product)로 반복문 내에서 사용 가능
전체코드
<!DOCTYPE html>html(lang="en")headmeta(charset="UTF-8")meta(name="viewport" content="width=device-width, initial-scale=1.0")meta(http-equiv="X-UA-Compatible" content="ie=edge")title #{docTitle}//- #{} : 해당 키에 저장된 문자열을 단순 출력link(rel="stylesheet" href="/css/main.css")link(rel="stylesheet" href="/css/product.css")bodyheader.main-headernav.main-header__navul.main-header__item-listli.main-header__itema.active(href="/") Shopli.main-header__itema(href="/admin/add-product") Add Product//- 속성은 괄호로mainif prods.length > 0//- 조건문 사용 가능.grideach product in prods//- 반복문 사용 가능article.card.product-itemheader.card__headerh1.product__title #{product.title}div.card__imageimg(src="주소 생략" alt="A Book")div.card__contenth2.product__price $19.99p.product__description A very interesting book about so many even more interesting things!.card__actionsbutton.btn Add to Cartelseh1 No Products- 퍼그 문법 요약
https://jeong-pro.tistory.com/65
- 공식 매뉴얼
https://pugjs.org/api/getting-started.html
'Node.js' 카테고리의 다른 글
스크랩|CommonJS/ES6 방식으로 Node.JS 모듈 다루기 (0) 2024.01.31 Express-Handlebars 템플릿 엔진 사용하기 (0) 2024.01.05 Express.js] pug(jade)/ejs/handlebar 템플릿 설치 및 사용하기 (0) 2023.12.15 Express.js] 여러 정보를 한번에 export하는 라우터 만들기 (0) 2023.12.12 Express.js] static 폴더 사용 | 정적으로 파일 서비스 하기 | CSS, JS, 이미지 파일 등 가져오기 (0) 2023.12.12