HardCopyWorld.com

[라즈베리파이] Node.js 를 이용해 간단한 서버 구축하기(3) – Pug 사용하기

by ·

 

 

템플릿 엔진이란 데이터가 정적으로 정해진 html 파일이 아닌, 동적으로 바뀌는 데이터에 맞추어 웹페이지를 생성할 수 있는 소프트웨어를 말합니다.

즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, JavaScript 코드로 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있도록 해주는 엔진이 템플릿 엔진입니다.

 

이번 포스트에서는 Node.js의 대표적인 템플릿 엔진인 Pug를 사용하는 방법을 간단하게 알아보겠습니다. Pug는 Jade 의 새로운 이름으로 저작권 문제로 인해 지금의 이름으로 변경되었습니다. 다른 정보를 더 찾아보시고 싶으시면 Jade로 검색하셔도 됩니다.

Pug를 사용하기 위해서는 모듈을 설치해야 합니다.

npm install pug

 

다음은 이전 포스팅의 웹페이지를 Pug를 이용해 구현한 예제입니다.

[ index.js ]

var express = require('express')
var app = express()

app.locals.pretty = true
app.set('views', './view_file')
app.set('view engine', 'pug')
app.listen(3000, () => {
  console.log("Server has been started")
})

// 최상위 라우트로 접속 시 /hello로 리다이렉트 
app.get("/", (req, res) => {
  res.redirect('/hello')
})

// Pug 파일 렌더링
app.get("/hello", (req, res) => {
  res.render('hello', { title: 'Hello', message: 'Hello World!!!'})
})

[ hello.pug ]

html
  head
    title= title
  body
    h1= message

pug 파일들을 저장할 view_file 폴더를 생성하고 hello.pug 파일을 view_file 폴더에 저장합니다.

 

‘views’ 에 pug 파일이 있는 폴더를 지정하고 ‘view engine’으로 pug를 사용한다고 지정합니다.

app.set('views', './view_file')
app.set('view engine', 'pug')

 

웹브라우저를 통해 http://localhost:3000/hello 에 접근하면 응답으로 hello라는 pug파일을 렌더링합니다. 렌더링 시 title 과 body 에 보여지는 텍스트를 title 과 message라는 값으로 넘겨주어 보여지도록 합니다.

app.get("/hello", (req, res) => {
  res.render('hello', { title: 'Hello', message: 'Hello World!!!'})
})

 

결과를 확인해 보면 이전 포스팅에 올렸던 html 파일과 동일한 소스가 로드된 것을 확인할 수 있습니다.

 

 

 

 

참고자료

 

 

You may also like...