728x90
npm install pug

express 자체는 템플릿 엔진의 기능을 갖고 있지 않기 때문에 설치를 따로 해야한다.

 

 

 

app.set('view engine', 'pug');

사용할 템플릿 엔진을 express에게 알려주는 명령이다.

 

 

 

app.set('views', './views')

템플릿이 있는 디렉토리를 express에게 알려주는 코드이다.

보통 views라는 이름으로 많이 사용한다.

사실 이 부분의 코드는 생략해도 views라는 디렉토리를 찾도록 default로 설정되어있다.

 

 

 

app.get('/template', function (req, res) {
    res.render('temp', {time: Date(), title: 'Pug'});
});

render : 렌더링하다의 render이다.

/template이라는 경로를 통해 들어온 사용자에게 해당 function이 실행되면서 temp라는 템플릿 파일을 웹페이지에게 렌더링해서 전달한다.

이 때, temp라는 파일은 반드시 views 디렉토리 내에 위치해야한다.

 

 

 

html
    head
        title= title
    body
        h1 Hello Jade
        ul
            -for (var i = 0; i < 5; i++)
        li coding
        div= time

temp.pug 파일의 코드이다.

html을 먼저 선언한 것은 html형식을 사용하겠다는 의미이고, 문법은 head와 body를 html보다 들여쓴다. 그래야만 html안에 head와 body가 위치하게 된다.

여기서는 단순히 head라고 작성하기만해도 <head>의 시작점부터 </head> 끝점까지 자동으로 적어준다.
줄바꿈을하면 맨 앞에 오는 첫번째 단어는 새로운 태그를 의미하므로 주의해야한다.
-for 대신 for를 사용하면 오류가 난다. (화면에 출력하기 위한 것이 아니고, 프로그래밍적으로 제어하기 위한 코드이기 때문이다.)
pug는 -를 보고 해당 for는 화면에 출력되는 것이 아니다 라는 것을 알게 된다.

 

div= time

time은 변수이다. pug 밖에서 변수의 값을 할당해주어야한다. 그리고 변수를 사용할 때에는 앞에 =를 반드시 붙여야한다.

 

 

 

app.get('/template', function (req, res) {
    res.render('temp', {time: Date(), title: 'Pug'});
});

위에서 살펴보았던 코드에서 render의 두번째 인자를 옵션값으로서 줄 수 있다.
여기서 time이라는 변수에 Date()의 값을 할당해주고, 변수 title의 값 역시 'Pug'로 설정해준다.

 

 

 

app.locals.pretty = true;

웹페이지에서의  html 코드를 조금 더 가독성 있게 표시하기 위해서 준 속성값이다.

이를 true로 주게되면 들여쓰기와 줄바꿈을 사용해서 코드를 말그대로 더 예쁘게 표시해준다.

 

 

 

<app.js 전체코드>

var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'pug');
app.set('views', './views');
app.use(express.static('public'));
app.get('/template', function (req, res) {
    res.render('temp', {time: Date(), title: 'Pug'});
});
app.get('/', function (req, res) {
    res.send('Hello home page');
});
app.get('/dynamic', function (req, res) {
    var lis = '';
    for (var i = 0; i < 5; i++) {
        lis = lis + '<li>coding</li>';
    }
    var time = Date();
    var output = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
          ${lis}
        </ul>
        ${time}
    </body>
  </html>`;
    res.send(output);
});
app.get('/test', function (req, res) {
    res.send('Test, <img src="/test.png">')
});
app.get('/login', function (req, res) {
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function () {
    console.log('Conneted 3000 port!');
});

 

<temp.pug 전체코드>

html
    head
        title= title
    body
        h1 Hello Pug
        ul
            -for (var i = 0; i < 5; i++)
        li coding
        div= time

 

'NODE.JS > NODE.JS' 카테고리의 다른 글

[Node.js] Express, URL을 이용하여 시멘틱 URL 사용  (0) 2024.07.08
[Node.js] Express, URL을 이용하여 query 객체 사용  (0) 2024.07.08
[Node.js] Express 동적 파일 제공  (0) 2024.07.07
[Node.js] Express 정적 파일 제공  (0) 2024.07.07
[Node.js] Express를 이용한 간단한 웹서버 만들기  (0) 2024.07.07

티스토리툴바