(13) express 모듈 사용-④ Intro. 템플릿 엔진

템플릿 엔진의 장점 

1. 짧은코드로 장황한 html 코드를 표현할 수 있다. 

++ jade 파일에 외부에서 변수를 선언, 정의하고 변수를 주입시켜 사용할 수 있다. 

2. express(외부 모듈)의 정적파일 서비스에 대한 장점을 구현해 낼 수 있다. (코드를 변경하더라도 app.js를 다시 실행시킬 필요 없음)

3. express(외부 모듈)의 동적 웹페이지에 대한 장점을 구현해 낼 수 있다. 함수를 사용할 수 있으며, for문과 같은 반복문을 사용할 수 있다. 

========================================================================

temp.jade

html

head

title=_title      //(14)번 글 참고 http://sourceflower.tistory.com/14

body

h1 Hello Jade!

ul

-for(var i=0; i<5; i++)

li coding

div=time      //(14)번 글 참고 http://sourceflower.tistory.com/14

// jade 문법에 유의하자.

// div=time   

// temp.jade 외부에서 time이라는 변수를 만들어 주입해 준 것이다.  (14)번 글 참고 http://sourceflower.tistory.com/14

// ※주의 할것. 제이드 문법에서 공백을 두면 error가 발생한다.

// 들여쓰기를 정확히 해야만 for문등이 제대로 실행된다. 

=========================================================================

※ 템플릿 엔진의 종류는 여러 개가 있다.  그 중 jade를 사용할 것이다.  (Express 모듈에서 recommended)

1. 따라서 npm을 이용하여 jade를 인스톨 시켜줘야 한다. 

npm install jade --save 

jade(템플릿 엔진)를 설치한 후에는 express(nodejs가 기본적으로 제공하는 모듈이 아닌 외부 모듈)에 알려줘야 한다. 

2. view engine,  사용할 템플릿 엔진을 설정해줘야 한다. 

app.set('view engine', '사용할 템플릿 엔진');   // jade를 사용할 것.

3. views, 템플리트가 있는 디렉토리를 설정해줘야한다.

app.set('views','템플리트가 있는 디렉토리')     // 템플리트가 있는 디렉토리의 경우 관습적으로 views로 사용한다. 

4. app.js 에 express를 이용하여 비동기방식으로 콜백함수 로직을 작성해보자. (res.render('파일명')사용)

app.get('/temp', function(req, res){     // res.send 대신 res.render를 사용한다. 

res.render('파일명');     // views 디렉토리에 있는 특정 파일(ex: temp)을 렌더링해서 화면상에 뿌려준다. 

}

※ 랜더링 

사전적의미: 렌더링(Rendering)은 컴퓨터 프로그램을 사용하여 모델(또는 이들을 모아놓은 장면인 씬(scene) 파일)로부터 영상을 만들어내는 과정을 말한다. 

// 여기서 렌더링은 jade 문법으로 작성한 로직을 jade 템플릿엔진을 사용하여 화면상에 뿌려주는 의미에서 렌더이다. 

// template 경로로 들어온 사용자에게 위와같은 function이 실행되면서 temp.jade 라는 파일을 찾아서 

웹페이지로 랜더링(jade의 문법에 의존하여 해석한 그 결과)해서 전송한다라는 의미.

=========================================================================

app.js

const express = require('express');

const app = express();

app.locals.pretty= true;     // 코드를예쁘게해준다.

app.set('view engine','jade');

app.set('views','./views');

app.get('/template', function(req, res){

res.render('temp');        

});

 //  template 경로로 접속할 경우 views 폴더 안에 있는 파일명인 temp인 파일을 렌더링해서 화면에  뿌려준다.

위 페이지의 소스보기를 할 경우 아래와같이 소스코드가 붙어서 나온다 이러한 소스코드를 파악하기는 어렵다. 

따라서 app.js 에 코드를 예쁘게 정리해주는 app.locals.pretty= true;  이것을 작성해주자. 

app.locals.pretty= true;     // 소스보기를 하여 열어보았을 때 아래와 같이 코드를예쁘게해준다.

출처: https://sourceflower.tistory.com/13?category=561762 [소스플로우]