[NODE 강의] View Engine / 미들웨어 란?

[클립명]

1. view engine

2. 템플릿 상속

3. 미들웨어

View Engine이란?

Node.js에는 View Engine이라는 시스템이 있다.

뷰엔진은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용한다. 뷰엔진에서 요구하는 형태로 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다.

백엔드 로직을 작성하는 자바스크립트 파일 안에 HTML코드를 작성하지 않아도 되므로, 좀 더 MVC 패턴에 맞게 개발을 진행할 수 있도록 도와준다. 또한 뷰엔진에서 요구하는 문법에 맞춰 코드를 작성하면 뷰엔진이 자동으로 html 파일로 렌더링해주기 때문에 HTML파일보다 좀 더 간결하고 구조 분석이 쉬운 형태로 코드를 작성할 수 있다. 물론 뷰엔진에서 사용되는 각종 문법은 각 엔진별로 별도로 공부해야 한다.

 

왼쪽처럼 입력하면 우측처럼 html로 렌더링해준다. (jade 뷰엔진)

Node.js의 뷰엔진으로 유명한 것은 EJS, PUG(구 제이드 : jade의 라이센스 문제로 명칭이 바뀜) 등이 있으며, nunjucks 라는 엔진도 존재한다. 뷰엔진은 많이 사용되는 엔진을 선택하는게 좋을 듯..

일단 강의에서 nunjucks를 사용하므로 nunjucks의 설정과 간단한 사용방법에 대해 알아보자.

 

Nunjucks

//Nunjucks 설치
$ npm install nunjucks

//app.js 
//Nunjucks 뷰엔진  
const nunjucks = require('nunjucks');
//템플릿 문서 파일의 root 경로를 template 폴더로 지정
nunjucks.configure('template', {
    autoescape : true,
    express : app
});



//admin.js
const express = require('express');
const router = express.Router();
router.get('/products', (req, res) => {
    //텍스트를 출력할 때
    //res.send('admin 이후 프로덕트 URL');
    //템플릿 문서 출력 (template/admin/products.html 파일을 템플릿 문서로 지정)
    res.render('admin/products.html', {
        name : '나이키 농구화'   //name 변수로 데이터를 전달
    })
});
module.exports = router;

//products.html
//template/admin/ 폴더에 products.html 파일을 만들고 아래와 같이 코딩
{{ name }}

위와 같이 app.js 에서 nunjucks 모듈 호출 및 설정을 하고, 템플릿 문서(products.html)를 설정한 경로에 만들어주고,

admin.js 파일의 소스처럼 특정 URL 요청이 들어올때, 화면에 렌더링할 템플릿 문서를 지정하고, 필요한 데이터를 전달해주면 해당 템플릿 문서가 html 형태로 렌더링 되어 출력된다.

미들웨어?

미들웨어란 양쪽을 연결하는 중간에서 공통 기능을 수행하는 소프트웨어라고 하면 이해가 빨리 될 것 같다.

웹애플리케이션 관점에서 얘기를 하자면, request(요청)과 response(응답) 중간에서 공통 기능을 수행하는 소프트웨어라고 이해하면 좋을 것 같다. 

예를 들어보자.

특정 URL로 요청이 들어왔을 때, 사용자가 로그인 상태인지 체크하여 비로그인 상태라면 로그인 페이지로 보내거나

요청이 들어온 내역을 로그로 기록하거나 하는 공통적인 기능을 수행하는 소프트웨어를 미들웨어라고 할 수 있다.

Node.js에서는 다양한 미들웨어가 존재한다. 따라서 이런 기능을 수행하는 미들웨어를 잘 적용하면 개발시간 단축 및 퍼포먼스가 향상된다.  

ex) 요청을 로그로 기록하는 morgan