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. 오빠는다르다
    감사합니다!!!!
  2. Whoisy
    Jade 가 Pug(멍멍이 이름, 실제로 심벌도 귀여운 퍼그임)로 바꼈습니다. 이름 라이센스 문제로 Pug로 개명 했습니다.
    따라서 설치하는 모듈도, 뷰 템플릿 엔진 설정도, 사용되는 확장자도 pug로 바껴야 합니다.
    npm install pug --save

    app.set('view engine', 'pug');
    app.set('views', path.join(__dirname, 'views'));

    참고로 다른 템플릿 엔진도 있답니다. Handlbar, EJS, Twig, Swig 등..
  3. fjg317@outlook.com
    감사합니다. 좋은 소식 알려줘서...
    대화보기
    • Jade has been renamed to pug, please install th
      e latest version of pug instead of jade

      jade 라는 이름이 pug 로 리네임되었으니 jade대신에 pug를 쓰라는 경고메세지 입니다.
      대화보기
      • jade가 pug로 대체되었습니다.
        코드안의 모든 jade는 다~ pug로 바꾸어서 해주세요~
        npm install pug --save
      • Seo Yun Seok Tudoistube
        Jade 가 이런거군요. Gradle, Gulp, Jade 소문으로는 들어봤는데 이런거구나
        하고 이해하고 넘어가려구요.
        늘 궁금한거지만, 방대한 API 문서 속에서 어떻게 딱 필요한 부분만 잘 찾고,
        행간의 의미랑 차이까지 느끼면서 볼 수 있는 방법을 저도 알고 싶습니다.
        어떤 새로운 것에 대해서 이해하고 나서 그것에 대한 API 문서를 보면 그때는
        문서의 구성과 의미가 와닿지만, 실제로 이해하기 전에는 마치 숨은그림찾기
        처럼 의미파악이 잘안됩니다.
        감사합니다^_____^!!!
      • Steven Spark
        좋다...
      • npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install th
        e latest version of pug instead of jade
        npm WARN retry will retry, error on last attempt: Error: EBUSY: resource busy or
        locked, rename 'C:\Users\PEPSI\AppData\Local\Temp\npm-10028-6df7a894\registry.n
        pmjs.org\character-parser\-\character-parser-1.2.1.tgz.3587261953' -> 'C:\Users\
        PEPSI\AppData\Local\Temp\npm-10028-6df7a894\registry.npmjs.org\character-parser\
        -\character-parser-1.2.1.tgz'
        npm ERR! Windows_NT 6.1.7601
        npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
        node_modules\\npm\\bin\\npm-cli.js" "install" "jade" "--save"
        npm ERR! node v6.10.3
        npm ERR! npm v3.10.10

        npm ERR! tarball.destroy is not a function
        npm ERR!
        npm ERR! If you need help, you may report this error at:
        npm ERR! <https://github.com/npm/npm/issues>
        npm ERR! Windows_NT 6.1.7601
        npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
        node_modules\\npm\\bin\\npm-cli.js" "install" "jade" "--save"
        npm ERR! node v6.10.3
        npm ERR! npm v3.10.10
        npm ERR! path C:\Program Files\nodejs\npm-debug.log.1943892422
        npm ERR! code EPERM
        npm ERR! errno -4048
        npm ERR! syscall open

        npm ERR! Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\np
        m-debug.log.1943892422'
        npm ERR! at Error (native)
        npm ERR! { Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs
        \npm-debug.log.1943892422'
        npm ERR! at Error (native)
        npm ERR! errno: -4048,
        npm ERR! code: 'EPERM',
        npm ERR! syscall: 'open',
        npm ERR! path: 'C:\\Program Files\\nodejs\\npm-debug.log.1943892422' }
        npm ERR!
        npm ERR! Please try running this command again as root/Administrator.
        npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
        npm WARN retry will retry, error on last attempt: Error: EBUSY: resource busy or
        locked, rename 'C:\Users\PEPSI\AppData\Local\Temp\npm-10028-6df7a894\registry.n
        pmjs.org\void-elements\-\void-elements-2.0.1.tgz.870474640' -> 'C:\Users\PEPSI\A
        ppData\Local\Temp\npm-10028-6df7a894\registry.npmjs.org\void-elements\-\void-ele
        ments-2.0.1.tgz'
        npm ERR! Windows_NT 6.1.7601
        npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
        node_modules\\npm\\bin\\npm-cli.js" "install" "jade" "--save"
        npm ERR! node v6.10.3
        npm ERR! npm v3.10.10

        npm ERR! tarball.destroy is not a function
        npm ERR!
        npm ERR! If you need help, you may report this error at:
        npm ERR! <https://github.com/npm/npm/issues>

        무슨 오유인가요?
      • 하하하 너무쉽네요
        스승님 덕이죠뭐
      • 신입1
        감사합니다
      • 그릴렁
        한 30분간을 왜안되지 씨름끝에 node를 재실행 안했다는 것을 알게 되었다.

        뚫어져라 코드를 지켜본 30분이 코드를 이해하는데 많은 도움이 되었습니다.

        수퍼바이져...당분간은 사용하지 않아야 겠어요

        좋은 강좌감사합니다.
      • 호동
        jade에서 CSS파일을 불러올 경우 경로를 어떻게 지정해 주어야 되나요. ./public/css/style.css, /public/css/style.css 등으로 입력해 봤는데 계속 오류 메시지가 떠서요.
      • 초심자
        좋은 강의 감사합니다.
      • 지나가는방청객
        표현하는 웹페이지들이 특정한 양식으로 작성되면서, 예를들어 헤더와 풋터, 사이드 메뉴는 변하지 않으면서 중앙의 컨텐츠만 바뀌는 경우 템플릿을 사용합니다. 말씀하신대로 bootstrap에서 특정 부분만 따와서 쓰고 싶으면서, jade 형식과 같이 html에서 많이 수정해야하는게 싫다고 하시면, nunjucks를 쓰시는 것도 좋은 방법입니다.
        대화보기
        • 코딩초보
          오 재밌네요
        • directory_root
          음 지금은 Jade가 Pug로 이름이 바뀌었네요
        • sean
          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 로 바뀐지 꽤 되었네요.
            • 2두
              해봤죠...
              혹시 버전 몇을 쓰시나요?
              v5.11.0 에서 app.set('views', './views'); 를 쓰면 500 떨어집니다.
              document에서도 __dirname 기준으로 작성되어 있던데...
            • nocomet
              app.set('views', './views');

              /views 말고 ./views 를 하시면

              현재 디렉토리의 views 폴더를 찾습니다.
              대화보기
              • 2두
                여기도 __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 자세히 보기