Server Side JavaScript

Express-템플릿 엔진 (Jade)

여기서는 템플릿 엔진의 개념과 템플릿 엔진의 한 종류인 Jade를 사용하는 방법을 알아봅니다. 

템플릿 엔진이란 무엇인가?

템플릿 엔진 사용하기

 

 템플릿 엔진 Jade의 사용법과 문법

jade 설치

npm install jade --save

app.js

var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'jade');
app.set('views', './views');
app.use(express.static('public'));
app.get('/template', function(req, res){
  res.render('temp', {time:Date(), title:'Jade'});
})
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('/route', function(req, res){
    res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});

views/temp.jade

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 호동
    jade에서 CSS파일을 불러올 경우 경로를 어떻게 지정해 주어야 되나요. ./public/css/style.css, /public/css/style.css 등으로 입력해 봤는데 계속 오류 메시지가 떠서요.
  2. 초심자
    좋은 강의 감사합니다.
  3. 지나가는방청객
    표현하는 웹페이지들이 특정한 양식으로 작성되면서, 예를들어 헤더와 풋터, 사이드 메뉴는 변하지 않으면서 중앙의 컨텐츠만 바뀌는 경우 템플릿을 사용합니다. 말씀하신대로 bootstrap에서 특정 부분만 따와서 쓰고 싶으면서, jade 형식과 같이 html에서 많이 수정해야하는게 싫다고 하시면, nunjucks를 쓰시는 것도 좋은 방법입니다.
    대화보기
    • 코딩초보
      오 재밌네요
    • directory_root
      음 지금은 Jade가 Pug로 이름이 바뀌었네요
    • ejs 라는것도 템플릿 엔진의 한종류인가요? 혹시 ejs와 jade의 차이나.. 어떤게 효율적인지
      이런게 있을까요??
      아니면 그냥 둘이 다른문법을가진... 노드제이에스 npm이 지원하는 다른 템플릿 엔진인건가요?
    • jwyoungs
      답변 감사드립니다. 그렇다면 필수적으로 template engine을 사용해야하겠군요.
      알겠습니다. 좋은 강의 및 빠른 답변 감사드립니다.
      대화보기
      • egoing
        음 그걸 안쓰면 문자 같은 것을 html 파일 작성하듯이 할 수 없어요~ 그 외에 상속 같은 기능을 제공하기도 하고옷
        대화보기
        • jwyoungs
          template engine 을 사용하는 목적이 무엇인가요?
          start bootstrap에서 쓸만한 부분을 발췌해서 사용하려고 하는데, template engine을 사용하게 되면 모든 내용을 jade 등의 형식에 맞게 고쳐줘야 하는 불편함이 있어서요.
          node js에서 template 엔진을 사용하지 않는 경우 불편한 점 또한 알고 싶습니다.
        • 김동욱
          3번 영상 8:40 에서 time 변수를 jade 바깥에서만 지정해서 시간을 넣을수 있다고 했지만 제가 보기에는 jade 안에서 변수 선언
          -var time = Date()
          div= time

          이렇게도 가능한듯 합니다.
        • 초보자
          위 코드를 작성한 다음 Chrome로
          http://localhost......ate
          접속해보면 Chrome에서 다음과 같은 error가 나옵니다.

          Error: Failed to lookup view "temp" in views directory "./views"
          at EventEmitter.render (C:\Users\User\Documents\HipChatPractice\node_modules\express\lib\application.js:579:17)
          at ServerResponse.render (C:\Users\User\Documents\HipChatPractice\node_modules\express\lib\response.js:961:7)

          제가 영상 따라 views라는 파일에 temp.jade를 만들어 보았고,
          위에 올려주신 코드를 그대로 복사 붙이기도 해봤습니다만 계속 저 error가 나옵니다.
          앞선 예제들은 잘 되다가 이게 막히네요. 이거 이유를 알 수 있을까요?

          매번 좋은 강의 올려주신 egoing님께 감사드립니다.
        • fasdgoc
          handlebars...
        • 퍽퍽
          Jade 의 이름이 pug 로 바뀐지 꽤 되었네요.
        • 해봤죠...
          혹시 버전 몇을 쓰시나요?
          v5.11.0 에서 app.set('views', './views'); 를 쓰면 500 떨어집니다.
          document에서도 __dirname 기준으로 작성되어 있던데...
        • nocomet
          app.set('views', './views');

          /views 말고 ./views 를 하시면

          현재 디렉토리의 views 폴더를 찾습니다.
          대화보기
          • 여기도 __dirname 써줘야지 에러가 안 나네요
            app.set('views', __dirname+'/views');
          • egoing
            static를 stotic으로 쓰신 것 같아요
            대화보기
            • 호동
              강의를 들으며 따라하고 있는데요.
              명령프롬프트에서 실행하면 다음과 같은 오류 메시지가 떠서요. 뭐가 문제인지 좀 알려주세요.

              TypeError: express.stotic is not a function
              at Object.<anonymous> (D:\자바스크립트\Node.js\생활코딩\예제\apps.js:3:17)
              at Module._compile (module.js:413:34)
              at Object.Module._extensions..js (module.js:422:10)
              at Module.load (module.js:357:32)
              at Function.Module._load (module.js:314:12)
              at Function.Module.runMain (module.js:447:10)
              at startup (node.js:141:18)
              at node.js:933:3
            • WayneKing
              매핑 시켜주는 게 정말 좋네요.
              vo....
            • 익명
              잘 보고 있습니다. 좋은 강의 감사합니다. 뭔가 만들 수 있을 것같은 느낌이 들어요.
            • Devmas
              실습하던 중 저는 [tab]으로 들여쓰기를 하다 보니,
              위 첨부 된 소스는 [space]로 들여쓰기가 되어있기 복사 붙여넣기 시 에러가 납니다. 조금 헤맷네요
              Jade 들려쓰기를 tab, space 통일해야 하는걸 알려주시면 더 좋을 것 같아요. ㅎㅎ
            • egoing
              어이쿠! 방금 교체했습니다. 큰 일 날뻔 했습니다. ^^;
              대화보기
              • 동키신
                첫번째 동영상과 마지막 동영상이 같네요.
              • egoing
                전 ejs를 아직 안 써봤는데요. 한번 그것도 보겠습니다!
                대화보기
                • sonyeonm
                  혼자할 때는 jade를 사용해도 상관없을거같은데, 팀단위로 작업할때는 ejs를 더 쓰지 않을까요?
                • Anttto
                  음.. 저도 그게 약간 고민이네요. 많이 쓰이는 템플릿 엔진이 ejs, jade 두개 중에 뭘까요?.. 음
                  대화보기
                  • 상남자
                    템플릿 엔진을 ejs 로 공부해왔었는데, 그 점이 달라서 약간 어려울 수 있을 것 같아요.
                    처음 공부 시작할 때 ejs, jade 중 고민 했었는데...
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기