[Node.js] Express - Pug (템플릿 엔진)

템플릿 엔진(Template Engine)이란?

웹 개발에 있어 템플릿 엔진이란 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어로써

템플릿 엔진을 사용하면 애플리케이션에서 정적 템플릿 파일 사용 가능하다.

런타임 시 템플릿 엔진은 템플릿 파일의 변수를 실제 값으로 바꾸고 템플릿을 클라이언트에 전송되는 HTML 파일로

변환하며, 이 접근 방식을 사용하면 HTML 페이지를 더 쉽게 디자인할 수 있다.

Express와 함께 작동하는 템플릿 엔진 Pug (구 Jade)

1. Pug 설치

npm install pug --save

2. 아래와 같이 view engine(사용할 템플릿 엔진)을 설정하면 별도로 엔진을 지정하거나 엔진 모듈을 로드할 필요 없이 Express가 내부적으로 모듈을 로드한다.

app.set('view engine', 'pug') // view engine == 템플릿 엔진
app.set('views', './views'); // views : 템플릿이 있는 디렉토리(express에게 명시), ./views : pug 파일이 저장되어있는 디렉토리 경로

3. temp.pug 파일 - views 디렉토리에 pug 템플릿 파일 생성

html
    head
        title= _title
    body
        h1 hello Pug
        ul
            -for(var i=0; i<5; i++)
                li coding
        div= time

4. pug 템플릿 파일을 렌더링할 경로 지정. (만약 view engine 속성이 설정되지 않은 경우 파일 확장자를 지정해줘야 함)

사용자 요청 시 temp.pug 파일이 HTML로 렌더링된다.

app.get('/template', function(req, res){
    // rendering(랜더링) : html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 / 'temp' : views 디렉토리에 있는 pug파일명
    res.render('temp', {time:Date(), _title:'Pug'});
    // 위와 같이 'temp'를 render하게 되면 epress는 내부적으로 위에 정의해놓은 'views' 디렉토리 내부에 템플릿 엔진('view engine')으로 정의한 'pug'확장자인 'temp.pug'파일을 찾아
    // 해당 파일의 내용을 pug의 문법에 따라서 해석한 후 그 결과를 사용자에게 response해준다.
    // time:'hello' - time이라는 변수에 'hello'문자열을 할당해줌 -> temp.pug에서 time변수를 사용할 수 있고 그 변수에 할당된 값이 출력됨
});

결과)