[Node.js] 뷰 엔진 PUG

2021. 8. 30. 14:40
728x90

01 .pug

  • EJS와 동일한 역할을 수행하는 엔진이자 문서 형식.
  • 사용법 또한 유사하나, 문법은 ejs보다 좀 더 어려움.
  • 원래 이름은 Jade 였고 그 이름으로 쓰인 기간이 더 김.
  • 따라서 관련 자료를 검색할 때 Jade로 검색하는 것도 도움이 됨.

 

 

 

 

 

02 설치

npm install pug

 

  • package.json
{
  "name": "210823",
  "description": "pug tutorial",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "author": "JOY",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "pug": "^3.0.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

 

 

 

 

 

03 기본 코딩

  • app.js     app.set('view engine', 'pug')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

// 서버에서 get 요청하면 이렇게 처리할게!
app.get('/', (req, res) => {
    res.render('tutorial01')
})

app.listen(4002, () => console.log("running..."))

※ 1. set 에서 'ejs' 에서 'pug' 수정.

     2. 파일 이름 'views' 에서 'tutorial01' 로 수정.

 

 

views

  • views/tutorial01.pug
doctype html
html(lang="en")
    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 퍼그 문서
        style(type="text/css").
            p{ color: red; }
            .box{ width:100px; height:100px; background-color: orange; }
    body(title="나는 바디에요") 저는 바디의 내용이에요.

 

 

 

 

 

 

04 문법

  • 태그는 열리고 닫히지 않음.
  • 태그명만 쓰임.
  • 태그명 뒤에 공백없이 내용을 기입하면 이는 속성이거나 태그명임.
  • 식별자 역할을 하는 속성 (id, class) 은 기호를 사용해 추가할 수 있음.
  • 태그와 태그의 관계는 오직 들여쓰기만으로 표현. (열리고 닫히는 태그가 없기 때문)
  • 예외적으로 div 태그는 태그명 조차 쓰지 않아도 됨.
  • style 태그 또한 여느 태그와 동일하게 작성하나 css 문서임을 명시해주어야 함.

 

 

 

04-1  태그명 뒤에 공백없이 내용을 기입하면 이는 속성이거나 태그명

 

views

  • views/tutorial01.pug

 

p(id="work")

doctype html
html(lang="en")
    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 퍼그 문서
    body
        p 저는 문단입니다. 사람들은 나를 p 태그 라고 불러요.
        p(id="work") 학원 수업을 듣고 있습니다.

 

p#work

doctype html
html(lang="en")
    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 퍼그 문서
    body
        p 저는 문단입니다. 사람들은 나를 p 태그 라고 불러요.
        p#work 학원 수업을 듣고 있습니다.

식별자 역할을 하는 속성 (id, class) 은 기호를 사용해 추가할 수 있음.

 

 

 

04-2  style 태그도 동일하게 작성하나 css 문서임을 명시해주어야 함.

 

views

  • views/tutorial01.pug
doctype html
html(lang="en")
    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 퍼그 문서
        //- 스타일은 아래와 같이 지정해줄 수 있다
        style(type="text/css").
            p{ color: red; }
            .box{ width:100px; height:100px; background-color: orange; }
    body
        p 저는 문단입니다. 사람들은 나를 p 태그 라고 불러요.
        p#work 학원 수업을 듣고 있습니다.
        .box

※ style(type="text/css"). 에서 .은 이어서 쓴다라는 의미.

※ pug의 주석은 "//-"

 

 

 

 

04-3  변수

  • app.js
const { response } = require('express')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.get('/', (_, response) => {
    response.render('tutorial02', {
        title: "변수를 사용해보자",
        myName: "조이",
        likeThis: "이렇게 하세요!",
        myPet: "고양이 냥"
    })
})

app.listen(4002, () => console.log("running..."))

 

 

views

  • views/tutorial02.pug
doctype html
html(lang="en")
    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")
        //- 변수 받아서 여기에 표시하기 01
        title= title
    body
        h1= myName 
        //- 변수 받아서 여기에 표시하기 02
        p 변수 값을 중간에 삽입하고 싶어! #{likeThis}
        //- p= myPet 에요 => 에러! 에요는 변수가 아냐
        p= myPet + '에요'

※ p= myPet 에요 (X) 에요는 변수가 아니기 때문!

※ JS 처럼 해주면 됨. p= myPet + '에요' (O)

 

 

 

 

04-4  html 코드  //  !=

※ 문제점

  • app.js
const { response } = require('express')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.get('/', (_, response) => {
    response.render('tutorial02', {
        title: "변수를 사용해보자",
        myName: "조이",
        likeThis: "이렇게 하세요!",
        myPet: "고양이 냥",
        htmlCode: "<strong>나는 강한 글자</strong>"
    })
})

app.listen(4002, () => console.log("running..."))

 

views

  • views/tutorial02.pug
doctype html
html(lang="en")
    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")
        //- 변수 받아서 여기에 표시하기 01
        title= title
    body
        h1= myName 
        //- 변수 받아서 여기에 표시하기 02
        p 변수 값을 중간에 삽입하고 싶어! #{likeThis}
        //- p= myPet 에요 => 에러! 에요는 변수가 아냐
        p= myPet + '에요'
        //- html 코드의 기호가 넘겨진 경우, 이를 코드로 해석하려면?
        p= htmlCode

html 코드가 그대로 다 보임

 

※ 해결

views

  • views/tutorial02.pug
doctype html
html(lang="en")
    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")
        //- 변수 받아서 여기에 표시하기 01
        title= title
    body
        h1= myName 
        //- 변수 받아서 여기에 표시하기 02
        p 변수 값을 중간에 삽입하고 싶어! #{likeThis}
        //- p= myPet 에요 => 에러! 에요는 변수가 아냐
        p= myPet + '에요'
        //- html 코드의 기호가 넘겨진 경우, 이를 코드로 해석하려면?
        p!= htmlCode

p!= htmlCode

※ not 연산자 "!" 를 이용하기.

 

 

 

04-5  조건문

  • app.js
const { response } = require('express')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.get('/', (_, response) => {
    response.render('tutorial02', {
        title: "변수와 조건문을 사용해보자",
        myName: "조이",
        likeThis: "이렇게 하세요!",
        myPet: "고양이 냥",
        htmlCode: "<strong>나는 강한 글자</strong>",
        condition: true
    })
})

app.listen(4002, () => console.log("running..."))

 

views

  • views/tutorial02.pug
doctype html
html(lang="en")
    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")
        //- 변수 받아서 여기에 표시하기 01
        title= title
        style(type="text/css").
            .box{width: 50px; height: 50px; background: tomato;}
    body
        h1= myName 
        //- 변수 받아서 여기에 표시하기 02
        p 변수 값을 중간에 삽입하고 싶어! #{likeThis}
        //- p= myPet 에요 => 에러! 에요는 변수가 아냐
        p= myPet + '에요'
        //- html 코드의 기호가 넘겨진 경우, 이를 코드로 해석하려면?
        p!= htmlCode

        //- 조건에 따라 요소를 보여줄지 말지 결정할 수 있다
        if condition 
            .box

 

 

 

04-6  반복문

  • app.js
const { response } = require('express')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.get('/', (_, response) => response.render('tutorial03', {
    title: "반복문 해보자",
    animals: ["고양이", "강아지", "거북이", "햄스터", "앵무새"],
    cafes: ["커피빈", "스타벅스", "빽다방", "이디야", "투썸플레이스"]
}))

app.listen(4002, () => console.log("running..."))

 

views

  • views/tutorial03.pug
doctype html
html(lang="en")
    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
    body 
        ul 
          each anAnimal in animals
            li= anAnimal

        ul 
          each aCafe, index in cafes
            li= (index + 1) + '번째 카페는 ' + aCafe

 

 

 

 

04-7  재사용

  • app.js
const { response } = require('express')
const express = require('express')
const app = express()

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.get('/', (_, response) => response.render("tutorial04"))

app.listen(4002, () => console.log("running..."))

 

views

  • views/tutorial04.pug
include tutorial01

 

 

 

 

 

 

05 라우터 (Router)

  • app.js

const myRouter = require('./myRouter')

app.use('/', myRouter)

const express = require('express')
const app = express()
const myRouter = require('./myRouter')

// 뷰 엔진 적용을 위한 설정 (set)
// __dirname : 프로젝트 폴더의 루트 디렉터리를 반환하는 시스템 변수
app.set('view engine', 'pug')
app.set('views', __dirname + '/views')

app.use('/', myRouter)

app.listen(4002, () => console.log("running..."))

 

  • myRouter.js
const express = require('express')

const myRouter = express.Router()

myRouter.route('/one').get((_, res) => res.render('tutorial01'))
myRouter.route('/two').get((_, res) => res.render('tutorial02', {
    title: "변수와 조건문을 사용해보자",
    myName: "조이",
    likeThis: "이렇게 하세요!",
    myPet: "고양이 냥",
    htmlCode: "<strong>나는 강한 글자</strong>",
    condition: true
}))
myRouter.route('/three').get((_, res) => res.render('tutorial03', {
    title: "반복문 해보자",
    animals: ["고양이", "강아지", "거북이", "햄스터", "앵무새"],
    cafes: ["커피빈", "스타벅스", "빽다방", "이디야", "투썸플레이스"]
}))
myRouter.route('/four').get((_, res) => res.render('tutorial04'))

module.exports = myRouter

 

views

더보기
  • views/tutorial01.pug
doctype html
html(lang="en")
    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 퍼그 문서
        //- 스타일은 아래와 같이 지정해줄 수 있다
        style(type="text/css").
            p{ color: red; }
            .box{ width:100px; height:100px; background-color: orange; }
    body
        p 저는 문단입니다. 사람들은 나를 p 태그 라고 불러요.
        p#work 학원 수업을 듣고 있습니다.
        .box

 

  • views/tutorial02.pug
doctype html
html(lang="en")
    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")
        //- 변수 받아서 여기에 표시하기 01
        title= title
        style(type="text/css").
            .box{width: 50px; height: 50px; background: tomato;}
    body
        h1= myName 
        //- 변수 받아서 여기에 표시하기 02
        p 변수 값을 중간에 삽입하고 싶어! #{likeThis}
        //- p= myPet 에요 => 에러! 에요는 변수가 아냐
        p= myPet + '에요'
        //- html 코드의 기호가 넘겨진 경우, 이를 코드로 해석하려면?
        p!= htmlCode

        //- 조건에 따라 요소를 보여줄지 말지 결정할 수 있다
        if condition 
            .box

 

  • views/tutorial03.pug
doctype html
html(lang="en")
    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
    body 
        ul 
          each anAnimal in animals
            li= anAnimal

        ul 
          each aCafe, index in cafes
            li= (index + 1) + '번째 카페는 ' + aCafe

 

  • views/tutorial04.pug
include tutorial01

 

 

 

locallhost:4002 에서는 (X)
localhost:4002/one tutorial01.pug 출력
localhost:4002/two tutorial02.pug 출력
localhost:4002/three tutorial03.pug 출력
localhost:4002/four tutorial04.pug 출력

728x90

'Node.js > Study' 카테고리의 다른 글

[Node.js] 웹소켓 (WebSocket)예제  (0) 2021.08.31
[Node.js] 웹소켓 (WebSocket)  (0) 2021.08.31
[Node.js] 뷰 엔진 EJS 복습  (0) 2021.08.26
[Node.js] 변수 (var, let, const)  (0) 2021.08.14
[Node.js] Node.js 설치 및 실행  (0) 2021.08.14

BELATED ARTICLES

more

티스토리툴바