Programming Blog

express-템플릿 엔진(Jade) 본문

Node js/생활 코딩 Node js

express-템플릿 엔진(Jade)

Go-ong 2019. 2. 8. 06:55
  • 템플릿 엔진이란?

    - 짧은 코드로 html코드를 만들어 낼 수 있는 기능을 제공한다.
    - 템플릿 엔진 안에서 변수도 사용가능하다.


  • 템플릿 엔진 사용하기

    - $ npm install jade --save
    jade 템플릿 엔진을 사용하기 위해 위의 코드를 터미널에 작성하여 npm 패키지를 설치한다.

    -설치가 완료되면 dependency항목에 추가된다.

    - app.set('view engine', 'jade');
    사용할 템플릿 엔진을 express에게 알려주는, jade 엔진과 express를 연결하는 코드이다
    view engine은 템플릿 엔진이라고 약속되어있고, jade라는 템플릿 엔진을 세팅하겠다는 의미이다.

    - app.set('views', './views');
    템플릿이 있는 디렉토리를 express에게 알려주는 코드
    views라는 디렉토리에 jade파일을 넣어야 한다. 만약 두번째 인자를 './template' 으로 바꾸게 되면 디렉터리 이름이 template로 지정한다.
    관습적으로 views로 디렉토리명을 작성한다.

  • 템플릿 엔진이 적용된 페이지에 대한 라우터 만들기

    - 
    1
    2
    3
    app.get('/template', function(req, res) {
        res.render('temp');
    });
    		cs

    사용자가 template으로 들어왔을 때 이 함수가 실행되는데 그 때 temp라는 템플릿을 호출해서 렌더링한 결과를 사용자에게 응답한다라는 의미이다. temp라는 것은 temp.jade라는 이름으로 파일이 위치해야 한다.

    - 템플릿 파일의 코드를 가지고와서 웹 페이지를 만들어내는 것들을 render함수로 구현한다.

    - 이렇게 사용할 시 파일 확장자는 반드시 jade 이어야 한다.

    - 터미널에 supervisor app.js 로 실행시키면, app.js 의 코드가 수정된 것을 알고 스스로 재시작하여 서버를 재시작 할 필요없이 수정이
    가능하다.


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

    * 반드시 들여쓰기로 구분하여 작성해야 한다.
    * 

    1
    app.locals.pretty = true;
    		cs

    이 코드를 작성하여 jade파일의 구문들을 보기 좋게 정리할 수 있다.

    - <html></html> = html
    <body></body> = body
    <head></head> = head

    - 

    1
    2
    3
    4
    5
    html
        head
        body
            h1 Hello Jade

    		cs

    jade에서 텍스트를 작성할 때 줄바꿈을 하면 새로운 태그가 시작된다는 것을 의미하기 떄문에
    4번째 문장과 같이 같은 줄에서 작성해야 한다.

    - 

    1
    2
    -for(var i=0; i<5; i++)
                    li coding
    		cs

    화면에 출력하기 위한 코드가 아닌 프로그래밍적으로 제어하기 위한 자바스크립트 코드는 '-'를 붙여서 작성해야 한다.

    - 

    1
    div= time
    		cs

    time은 jade의 변수이다. 변수로 값을 넣고싶을 때 =을 사용한다.

    1
    2
    3
    app.get('/template', function(req, res) {
        res.render('temp', {time:Date(), _title:'Jade'});
    });
    		cs

    위에서는 jade를 사용하는 express쪽에서 변수의 값을 주입해야 한다.

    jade파일을 호출하고 있는 express의 코드에서 render의 두 번째 인자로 객체(프로퍼티 값)를 전달한다.
    반드시 jade파일의 변수명과 express의 프로퍼티 명이 같아야 한다.

    http://jade-lang.com/

    이 사이트로 이동하면 템플릿 엔진에 대한 문법을 참고하면 된다.


'Node js > 생활 코딩 Node js' 카테고리의 다른 글

express-웹페이지를 표현하는 방법  (0) 2019.02.07
express-정적파일 서비스하는 법  (0) 2019.02.07
express-간단한 웹애플리케이션 만들기  (0) 2019.02.07
express설치  (0) 2019.02.07
express 도입  (0) 2019.02.07
'Node js/생활 코딩 Node js' Related Articles more
Comments