김정환블로그

Express.js - 3. 템플릿(Jade)

익스프레스(Express.js)를 설치하고 라우팅 설정을 마쳤으면 웹페이지 서비스 방법에 대해 알아보자. 익스프레스는 템플릿 엔진을 이용해서 웹페이지를 생성하는데 제이드(Jade)가 대표적이다. 템플릿과 연결된 스타일시트는 기본적으로 CSS를 사용할 수 있지만 LESS, STYLUS 등 CSS 전처리기(pre-processor)를 사용하여 코딩의 효율성을 높일 수도 있다. 이번 글에서는 익스프레스에서 Jade 템플릿을 이용한 웹페이지 렌더링 방법에 대해 알아보자.

Jade + Express.js

익스프레스에 제이드 템플릿을 설정하는 방법은 매우 간단하다.  제이드 모듈을 설치한다.

npm install jade --save

설치한 제이드 모듈을 익스프레스에 설정하는 코드를 추가한다.

app.set('view engine', 'jade'); // 뷰 엔진으로 제이드를 사용한다.
app.set('views','./views'); // 뷰 폴더를 ./views 경로로 설정한다.

이상 설정하고 나면  /views 폴더에 있는 제이드 파일을 뷰 템플릿으로 렌더링할 수 있는 준비가 된 것이다. 이제 각 라우팅별로 제이드 템플릿 파일을 렌더링 한다.

router.get('/', function (req,res,next) {
  res.render('index',{title:'Express'});
});

클라이언트에서 /리소스에 대해 GET 요청이 들어올 경우 상기 라우팅 로직이 실행된다. res.render() 함수는 제이드 템플릿을 클라이언트로 렌더링하는 역할을 한다. render(view, locals) 함수의 첫번째 파라매터 view는 응답에 사용할 템플릿의 파일 이름이다. 익스프레스 세팅에서 app.set('view', './views')로 설정한 부분을 기억하면 ./views/index.jade 파일을 렌더링 한다는 것을 알 수 있다. 두번째 파라매터 locals는 제이드 파일에 주입할 변수 객체이다. {title: 'Express'}로 넘겨주면 템플릿에서는 title 변수에 접근하여 "Express"라는 문자열을 얻을 수 있다.

Jade 문법

제이드 파일 views/index.jade를 살펴보자.

extends layout

block content
  h1 =title
  p Welcometo#{title}

제이드 파일을 작성하기 위해서는 몇 가지 문법을 숙지해야 한다.  첫 줄의 extends 키워드는 다른 템플릿을 상속한다는 의미다. layout.jade 템플릿을 그대로 가져다 쓰면서 필요한 부분만 추가하는 하기 위해 사용한다. block 키워드는 상속한 부모 템플릿에 선언한 특정 영역(블록)을 대체 한다는 의미다.  layout.jade 파일을 살펴보자.

doctypehtml
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

마지막 줄에 block content라고 선언한 부분을 아래 jade 구문으로 대체하는 것이다.

h1= title
p Welcometo#{title}

h1은 <h1></h1> HTML 코드로 변경된다. =title은 render(view, locals) 함수에서 설정한 locals 객체의 title 값을 가져온 것이다. h1 =title 제이드 코드는 <h1>Express</h1>  HTML 코드로 변경될 것이다. 변수값을 문자열 내에서 사용할 경우 #{변수명} 이라는 문법을 사용한다.

Jade 모듈화

상속을 위한 extends 키워드 뿐만 아니라 include, mixin 등 템플릿을 구조화 할 수 있는 키워드를 사용할 수 있다. include는 제이드 파일 뿐만 아니라 HTML, CSS, 자바스크립트 파일까지 넣을 수 있다. 기능에 따라 템플릿 파일을 분리하고 스타일 시트와 자바스크립트 코드를 각 각 파일로 분리하여 최종적으로 아래 코드처럼 제이드 파일을 작성할 수 있다.

html
  head
    title Sample
    include style.css
  body
    include content.jade
    include footer.html
    include script.js

믹스인 키워드는 일종의 함수 역할을 한다.

//- 믹스인 정의
mixin list
  ul
    li one
    li tow
    li three

//-  정의한 믹스인 호출
mixin list

mixin 키워드로 리스트를 출력하는 코드를 정의한뒤 호출하면 정의한 템플릿 코드가 생성된다.  자세한 제이드 문법은 공식 문서를 참고하자.

 

© 김정환 2024