Nunjucks, body-parser

1. 템플릿 엔진 (Template Engine)

2. Nunjucks

3. body-parser

---

1. 템플릿 엔진 (Template Engine)

 

[그림 1] 템플릿 엔진 (Template Engine)

웹 페이지를 구성할 때 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. 예를 들어 HTML로 1,000개의 데이터를 모두 표현하고 싶다면 HTML에 일일이 직접 써서 넣어야 한다. 하지만 자바스크립트로 표현하면 반복문으로 간단하게 처리할 수 있다.

 

템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해준다. 템플릿 엔진은 기존 HTML과 문법이 살짝 다를 수도 있고, 자바스크립트 문법이 들어가기도 한다. 템플릿 엔진은 html의 역할과 express의 역할을 구분해준다고 생각하면 된다.

 

템플릿 엔진에는 대표적으로 퍼그(Pug), 넌적스(Nunjucks), EJS, Handlebars 등이 있다. 

 

 

2. Nunjucks

 

[그림 2] Nunjucks

Nunjucks는 HTML의 문법을 그대로 사용하되, 추가로 자바스크립트 문법을 사용할 수 있다. Nunjucks는 외부 라이브러리이므로 사용하려면 사용하기 전에 설치와 셋팅을 완료해야 한다. (외부 라이브러리를 사용 방법 : 설치 → 셋팅 → 사용)

 

Nunjucks를 설치하려면, 먼저 확인해야 할 것이 있다. Nunjucks를 설치하려는 디렉토리에 node_modules와 package.json이 포함되어 있는지 ls 명령어로 확인한다.

 

[그림 3] node modules와 package.json이 있는지 확인

node_modules와 package.json이 있음을 확인했다. 이제 Nunjucks를 설치하기 위한 준비가 끝났다.

 

[그림 4] Nunjucks 설치

npm install nunjucks를 입력하여 Nunjucks를 설치한다. Nunjucks는 node_modules 디렉토리 안에 설치된다.

 

[그림 5] Nunjucks 설치 확인

Nunjucks가 제대로 설치되었는지 확인하려면 package.json 파일에 "nunjucks"가 있는지 보면 된다. 

 

이제 Nunjucks 셋팅에 대해 설명하겠다.

[그림 6] Nunjucks 셋팅

Nunjucks는 외부 라이브러리이므로 require('nunjucks');를 써주어야 한다.

 

app.use()는 request method가 get이든 post든 URI만 같으면 실행할 수 있게 해준다. get 방식은 URL에 데이터를 붙여서 전송하는 반면에 post 방식은 body에 데이터를 넣어서 전송한다.

 

app.use(express.urlencoded({extended:true}));는 옵션이 false면 기본으로 내장된 querystring 모듈을 사용하고, true면 따로 설치가 필요한 qs 모듈을 사용하여 쿼리 스트링을 해석한다. 기존 querystring 모듈과 qs 모듈의 차이는 중첩 객체 처리이다.

 

app.use(express.static('public'));는 Express에서 정적 파일을 제공한다는 의미이다. 'public'이라는 디렉토리 안에 포함된 이미지 파일, CSS 파일 및 JavaScript 파일을 사용할 수 있다.

 

그 후 app.set('view engine', 'html');로 express 셋팅을 해준다. 이는 express에서 HTML을 뷰 엔진으로 사용하겠다는 의미이다.

 

다음으로 nunjucks.configure('views', {extended:app});로 nunjucks 기본 디렉토리를 셋팅해준다. 이제 'views'라는 디렉토리를 만들고 그 안에 HTML 파일을 만들어야 한다.

 

[그림 7] HTML 파일

views 디렉토리 안에 index.html 파일을 만들고 link로 CSS 파일을 연결하는데 이때 href에 "./index.css"가 아니라, http부터 시작되는 URI 주소를 모두 적어주어야 한다.

 

body에는 <h2> 태그 안에 {{ num }}과 {{ name }}이 있는데, 이는 JavaScript 파일에 있는 변수 num과 name에 할당된 값을 의미한다.

 

[그림 8] CSS 파일

public 디렉토리 안에 index.css 파일을 만들고 간단한 설정을 마쳤다.

 

[그림 9] 웹 페이지에 구현된 모습

[그림 6]에서 num의 속성값은 i인데, i에 할당된 값이 100이므로, {{ num }}이 웹 페이지에서 100으로 나타난다. 빈 칸에 아무 값이나 입력하고 Login 버튼을 누르면 아래와 같은 화면이 나타난다.

 

[그림 10] post 방식일 경우

이는 post 방식일 경우에 나타나는 화면이다.

 

[그림 11] get 방식일 경우

이번엔 get 방식일 경우에 대한 결과이다. 빈 칸에 aaa와 aaa를 입력하고 Login 버튼을 눌렀더니 숫자 100 옆에 aaa가 나타났다.

 

또 눈에 띄는 점은 URI이다. localhost:5000/ 뒤에 querystring이 붙어있다. ? 뒤부터 querystring이 시작된다는 것이고, &는 여러 개의 querystring을 구분해준다.

 

 

3. body-parser

body-parser는 Node.js 모듈로, 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출한다.

 

body-parser를 설치하는 방법은 다음과 같다.

npm install body-parser

 

body-parser가 제대로 설치되었는지 아래의 명령어로 확인한다.

[그림 12] body parser 설치 확인

 

body-parser를 사용하는 방법은 다음과 같다.

const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended:true}));

body-parser는 외장 라이브러리이기 때문에 require('body-parser');를 써주어야 한다. 

 

그리고, app.use()안에 위에 적힌대로 똑같이 쓰면 된다.

 

Express v4.16.0 기준으로 body-parser는 빌트인 되었다. 따라서 별도의 설치 없이 이용이 가능하다.