Node.js ejs, jade module basic 템플릿 모듈 기본

Node.js

ejs module

ejs모듈을 다운로드할때는 다음 코드를 사용한다.

1
npm install ejs;

위의 코드를 실행하면, npm이 외부 모듈을 설치하게된다.

설치가 끝나면 밑의 코드처럼 기존의 내부 모듈 사용법과 마찬가지로 변수에 담아서 사용이 가능하다.

1
var ejs = require('ejs');

ejs 모듈은 템플릿 엔진 중 하나이기 때문에 특정 형태의 스트링을 HTML 타입의 스트링으로 변환시켜준다.

ejs페이지를 HTML 페이지로 변환시키는 서버 페이지를 만들고자 한다.
이때에는 ejs모듈에 내장된 render(str, data, option)메소드를 사용한다.

변수를 사용할 때, ejs 안에서 변수를 선언하여 사용할 수도 있지만,
일반적으로 자바스크립트에서 선언한 변수를 ejs로 전달하여 사용한다.

자바스크립트의 변수를 ejs로 넘겨줄때는, 아래 코드의 9, 10번째 줄처럼 render() 메소드의 두 번째 매개변수에 담아 전달한다.

Tip — 파일을 저장할때 반드시 utf8로 인코딩해서 저장해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http = require("http");
var fs = require('fs');
var ejs = require('ejs');

http.createServer(function ( request, response){
  fs.readFile("ejsPage.ejs", 'utf8', function(error, data){
    response.writeHead(200, {'Content-Type':'text/html'});
    response.end(ejs.render(data, {
      name: 'booski',
      description : 'Hellow ejs with node.js'
      }));
    });
  }).listen(52273, function(){
    console.log("Server Running at http://127.0.0.1.52273");
  });

ejs 페이지를 작성할때, 몇가지 특수한 태그들을 사용할 수 있다.

  • <% Code %> → 자바스크립트 코드를 넣는다
  • <%= Value %> → 데이터를 출력한다

위의 태그들을 사용하여 ejsPage.ejs파일을 작성해보았다.

1
2
3
4
5
6
<h1><%=name%></h1>
<p><%=description%></p>
<hr/>
<%for(var i = 0;i<10;i++){%>
  <h2>The Square of <%= i %> is <%= i*i%></h2>
 <%}%>

Jade module

Jade 모듈도 ejs와 마찬가지로 템플릿 엔진 중 하나이다.

Jade모듈을 설치할 때에도 다음과 같이 ejs와 같은 방식(외부 모듈 설치)을 사용한다.

1
npm install jade

Jade 모듈이 jade페이지를 HTML페이지로 변환할 때는 모듈의 내장 함수 중
compile(String, option)을 사용한다.
ejs모듈의 render()함수와 한가지 다른 점은 render()함수는 스트링을 리턴하지만,
jade의 compile()함수는 함수 자체를 돌려준다.
같은 맥락에서 jade에 자바스크립트의 변수를 전달할 때는 아래 코드의 11, 12번째 줄처럼
compile()함수가 리턴한 함수의 매개변수로 전달한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require("http");
var fs = require('fs');
var jade = require('jade');

http.createServer(function ( request, response){
  fs.readFile("jadePage.jade", 'utf8', function(error, data){
    var fn = jade.compile(data);

    response.writeHead(200, {'Content-Type':'text/html'});
    response.end(fn({
      name: 'booski',
      description : 'Hellow jade with node.js'
    }));
  });
}).listen(52273, function(){
    console.log("Server Running at http://127.0.0.1.52273");
});

Jade를 사용할 때도 ejs처럼 특별한 방식으로 코드를 작성해야한다.
가장 중요한 부분은 들여쓰기이다.
jade모듈은 들여쓰기를 기준으로 새로운 HTML태그를 만들기 때문이다.

Tip: jade에서 들여쓰기를 할 때는 탭 또는 스페이스바 중 하나로 통일해야한다.
그렇지않으면 에러가 발생한다.

태그 안에 글을 넣고 싶을 때는 해당 태그의 다음 줄에서 들여쓰기를 한 뒤 작성하면 된다.
또한 어떤 태그에 속성을 부여하고 싶을 때는, 괄호 ()를 이용하면 된다.(여러 속성을 주고 싶으면 각 속성을 ,로 구분한다.)

Jade는 doctype과 주석 등 몇 가지 코드를 특수한 형태로 변환하는데 그 형태는 다음과 같다.

  • doctype html → <!DOCTYPE html>
  • // JADE String → <!-- JADE String -->

특히 새 div태그를 만들 때는 ‘div’를 직접 쓸 필요가 없다.

#header의 형태로 jade를 작성하면, ‘header’를 id로 갖는 div태그가 만들어진다.
같은 방식으로, .article의 경우는 ‘article’을 class로 갖는 div태그가 만들어진다.

Jade 역시 ejs처럼 특수한 태그를 갖는다.

  • -Code → 자바스크립트 코드를 적는다
  • #{Value} → 값을 출력한다.(내용 중간에 값을 집어넣음)
  • =Value → 값을 출력한다.(전체 내용이 값이 됨)
    이러한 태그들을 사용해서 아래 코드의 11번째 줄처럼 for 반복문도 구현 가능하다.

지금까지 언급한 내용을 바탕으로 아래와 같은 코드를 작성할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
doctype html
html
  head
    title index Page
  body
    // JADE String
    #header
      h1 hello jade...!
      h2 #{name}, we are the World
      h3= description
    hr
    - for(var i = 0; i< 10;i++) {
    .article
      p
        a(href="https://medium.com/@booski/", data-test="attribute added") Go to new world #{i}
    - }

그리고 서버를 실행하면 아래의 화면을 브라우저에서 확인할 수 있다.

Comments