익스프레스(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
키워드로 리스트를 출력하는 코드를 정의한뒤 호출하면 정의한 템플릿 코드가 생성된다. 자세한 제이드 문법은 공식 문서를 참고하자.