[Day61] Node.js - Express에서 Nunjucks 활용

Express와 Nunjucks

Nunjucks는 Mozilla에서 개발한 JavaScript 템플릿 엔진이다. Nunjucks는 파워풀한 특징과 유연성을 자랑하며, HTML을 동적으로 생성하는 데 사용된다. 이 엔진은 Jinja2(Python의 템플릿 엔진)와 유사한 문법을 사용한다.

Express 웹 프레임워크와 함께 사용할 때, Nunjucks는 웹 페이지의 동적 콘텐츠를 렌더링하는 데 도움을 준다.

Nunjucks의 기본적인 특징

1. Extensible: 사용자 정의 필터와 확장을 통해 기능을 확장할 수 있다.
2. Rich built-in filters and tags: 여러 내장 필터와 태그를 통해 템플릿을 간편하게 작성할 수 있다.
3. Autoescaping: 안전한 코드 출력을 위해 자동으로 문자열을 이스케이프한다.

Nunjucks와 Express 통합하기

Express에서 Nunjucks를 사용하려면 먼저 nunjucks 패키지를 설치해야 한다:

npm install nunjucks

설치가 완료되면, Express 애플리케이션에 Nunjucks를 설정할 수 있다:

const express = require('express');
const nunjucks = require('nunjucks');

const app = express();

nunjucks.configure('views', {
    autoescape: true,
    express: app
});

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

위의 코드에서, nunjucks.configure는 Nunjucks를 설정하는 메서드다. 첫 번째 인자는 템플릿 파일들이 저장된 디렉터리를 나타내며, 일반적으로 'views'라는 이름을 사용한다. 두 번째 인자는 Nunjucks의 옵션을 나타낸다. 여기서는 autoescape를 true로 설정하여 출력되는 문자열이 자동으로 이스케이프되도록 하였다.

app.set('view engine', 'njk')를 사용하여 Express에 Nunjucks를 기본 뷰 엔진으로 설정했다.

Nunjucks 템플릿 기본

Nunjucks 템플릿은 기본적으로 .njk 확장자를 사용한다. 템플릿은 변수, 필터, 제어 구조(예: 반복문, 조건문) 등을 포함할 수 있다.

1. 변수: 중괄호 {{ }} 안에 변수를 넣어 출력할 수 있다.

<p>Hello, {{ name }}!</p>

2. 제어 구조: **{% %}를 사용하여 제어 구조를 표현할 수 있다.**

• 반복문:

<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>
// 이런식으로 순회도 가능하다

• 조건문:

{% if user.loggedIn %}
    <p>Welcome back, {{ user.name }}!</p>
{% else %}
    <p>Hello, guest!</p>
{% endif %}

3. 필터: | 뒤에 필터 이름을 추가하여 사용할 수 있다.

{{ name | capitalize }}

위의 코드에서 capitalize 필터는 문자열의 첫 글자를 대문자로 바꿔준다.

Express에서 Nunjucks 뷰 렌더링하기

Express 라우트 내에서 Nunjucks 템플릿을 렌더링하려면 res.render 메서드를 사용한다. 첫 번째 인자로 템플릿 파일의 이름을, 두 번째 인자로 템플릿에 전달할 데이터 객체를 제공한다:

app.get('/', (req, res) => {
    res.render('index.njk', { name: '홍길동' });
});

위의 코드에서 index.njk 템플릿은 { name: '홍길동' } 객체를 사용하여 렌더링된다. 따라서 템플릿 내에서 {{ name }}을 사용하면 '홍길동'이 출력된다.

Nunjucks와 Express를 함께 사용하면 웹 페이지의 동적 콘텐츠를 효과적으로 렌더링할 수 있다. Nunjucks의 다양한 특징과 기능을 활용하면 복잡한 웹 페이지도 쉽게 구성할 수 있다.