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. 21.7.22 done
  2. smong
    저는 ejs썼습니다~
  3. 굼벵이
    완료
  4. 키리모찌
    jade에서 pug로 바뀌었다고 합니다. 설치도 jade가 아닌 pug를 설치하셔야 하고,
    temp.jade가 아닌 temp.pug, app.set("view engine", "jade"); 에서 jade를 pug로 바꾸시면 됩니다.
  5. loopback
    최신 IDE에서는 라이선스 문제 때문에 Jade에서 Pug로 명칭이 개명되었다고 해요. 확장자도 pug로 바꾸어야 되구요.
    대화보기
    • 이수하
      완료!
    • 송동훈
      app.js 맨 마지막줄에 Conneted -> Connected네요 하하;;
    • 이제관
      재미 있네요. 감사합니다.
    • 정의를실천하는사람들
      20181125 감사합니다~
    • 신재우
      흥미있게 봤습니다^^ 일단은 개념적으로 알아가겠습니다!! 2018.10.15
    • jiwan
      20180930 강의 잘 들었습니다!
    • 이승우
      20180809 완료
    • jcm1126611@naver.com
      치사하당<퍽
    • 궁금해요!
      pug로 이름을 바꾸었다고 하는데 jade를 사용해도 되는거에요?
    • 김혜경
      6.06
      오픈 소스 코드들보면, ejs라던지 이해 안되는 부분이 많아서 머리 아팠는데,
      템플릿이라는 거였군요!
      덕분에 다른 코드분석들도 훨씬 이해가 잘됩니다 ㅎㅎ
      감사합니다.
    • 이유리
      감사합니다.
    • antil
      jade 를 씀으로써 코드가 간결해지는 것 같습니다
    • 지발
      이해는 가는데 뭔가... 개운하지는 않은느낌.
      템플릿 엔진이 어색해서 그런건지 거부감이 들긴하네요
      언젠가 굉장히 도움이 될것이라 믿습니다.
    • 라울
      감사합니다!
    • 저도 궁금합니다. html에 <script> 를 사용하는것과 템플릿을 사용하는것이 동작 방식은 같은건지 .. html에 <script>사용하는것은 동적인지 정적인지요?
    • 박인호
      1-10
      수강완료.
    • 헬리사우드
      꼭 jade를 사용해야하나요? 아래에 090922님과 같은 의견입니다.
    • 090922
      17.12.22 완
      jade를 쓰는 이유를 잘 모르겠다. html이 훨씬 보기좋아보인다
      굳이 배워서 쓸 필요가??
      html쓰고 <script></script> 로 html내에서 js도 쓰는게 낫지않나요??
    • 내이름은이한샘
      잘봣습니다.! 감사합니다!
    • 은행동주민
      잘 보고 있습니다 항상 감사드립니다!
    • 오빠는다르다
      감사합니다!!!!
    • 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 등..
    • fjg317@outlook.com
      감사합니다. 좋은 소식 알려줘서...
      대화보기
      • test
        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
          좋다...
        • Fang
          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>

          무슨 오유인가요?
        • 1234
          하하하 너무쉽네요
          스승님 덕이죠뭐
        • 신입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 기준으로 작성되어 있던데...
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기