7. 익스프레스 (4) - 템플릿 엔진 : Pug 1

 

 

 

 

 

기본적으로 템플릿 엔진, 정적인 언어인 HTML의 한계를 극복하기 위해서 지원하는 엔진입니다. 반복적인 데이터 처리나 복잡한 과정을 처리하기 위해 자바스크립트를 기반으로 HTML을 렌더링할 수 있게 해주는 엔진이지요. 그래서 HTML 문법과의 차이가 있을수도 있고, 자바스크립트 문법을 사용하기도 합니다. 

 

여기서는 퍼그(Pug), 넌적스(Nunjucks)를 살펴볼 예정이며 향후에는 넌적스를 기반으로 예제를 살펴보겠습니다. 

 

 

---

 

 

 

○ Pug 사용 준비

 

- 우선, 아래와 같은 방식으로 패키지를 설치합니다. 

$ npm i pug

 

 

- app.js에서의 설정은 다음과 같습니다. 

// ...
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(morgan('dev'));
// ...

 

 > views는 템플릿 파일들이 위치한 폴더를 지정합니다. res.render 메서드가 이 폴더를 기준으로 동작합니다. 

    res.render('index') : views/index.pug 렌더링

    res.render('admin/main'): views/admin/main.pug 렌더링

 > view engine은 템플릿 엔진 종류를 정의합니다. pug로 설정되어 있습니다.