[javascript] Express.js에서의 템플릿 엔진 사용법

04 Dec 2023

Express.js는 Node.js를 기반으로한 웹 애플리케이션 개발을 위한 프레임워크입니다. Express.js의 강력한 기능 중 하나는 다양한 템플릿 엔진과의 호환성입니다. 템플릿 엔진을 사용하면 동적인 웹 페이지를 생성하고 효율적으로 코드를 관리할 수 있습니다.

이 문서에서는 Express.js에서의 템플릿 엔진 사용법에 대해 알아보겠습니다.

템플릿 엔진 설치

Express.js에서 템플릿 엔진을 사용하기 위해서는 먼저 해당 엔진을 설치해야 합니다. 대표적인 템플릿 엔진으로는 Pug, EJS, Handlebars 등이 있습니다.

예를 들어, Pug를 사용하려면 다음과 같이 명령어를 실행하여 Pug 패키지를 설치합니다:

npm install pug

템플릿 엔진을 사용하기 위해서는 Express.js 애플리케이션에 미들웨어로 해당 템플릿 엔진을 등록해야 합니다. Express.js에서는 app.set('view engine', '템플릿 엔진')을 사용하여 템플릿 엔진을 설정합니다.

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

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

위의 예제에서는 Pug 템플릿 엔진을 사용하도록 설정했습니다.

템플릿 파일은 Express.js 애플리케이션에서 동적으로 생성할 웹 페이지의 구조를 정의하는 파일입니다. 템플릿 파일은 .pug, .ejs, .handlebars와 같은 확장자를 가질 수 있습니다.

템플릿 파일은 Express.js 애플리케이션에서 미리 정의한 변수 값을 동적으로 삽입하여 클라이언트에게 제공됩니다.

Express.js에서는 res.render('템플릿 파일', { 변수: 값 })를 사용하여 템플릿 파일을 렌더링합니다. 두 번째 인수로 전달되는 객체에 정의된 변수들은 템플릿 파일에서 사용할 수 있습니다.

app.get('/', (req, res) => {
  res.render('index', { title: 'Express.js 템플릿 엔진 사용법' });
});

위의 예제에서는 index.pug 템플릿 파일을 렌더링하고, title 변수에는 'Express.js 템플릿 엔진 사용법'이라는 값을 전달하고 있습니다.

렌더링된 템플릿 파일에서는 JavaScript 코드를 사용하여 변수 값을 출력하거나 활용할 수 있습니다. 예를 들어, Pug 템플릿 엔진에서는 변수를 출력하기 위해 #{변수} 형식을 사용합니다.

doctype html
html
  head
    title #{title}
  body
    h1 #{title}

위의 예제에서는 title 변수를 제목 태그와 본문의 제목으로 출력하고 있습니다.

Express.js에서 템플릿 엔진을 사용하여 동적인 웹 페이지를 생성하는 방법을 알아보았습니다. 템플릿 엔진은 Express.js 애플리케이션 개발을 효율적으로 진행할 수 있도록 도와주는 강력한 도구입니다.

더 많은 템플릿 엔진 옵션과 사용법에 대해서는 Express.js 공식 문서를 참고하시기 바랍니다.