Node.js에서 Pug 모듈 사용하기

Pug는 Node.js를 위한 템플릿 엔진으로, HTML을 보다 간결하고 유연하게 작성할 수 있도록 도와줍니다. 이 글에서는 Pug를 설치하고 간단한 예제를 통해 사용하는 방법을 알아보겠습니다.

설치: 먼저, 프로젝트 디렉토리에서 다음 명령어를 사용하여 Pug를 설치합니다.

 

pug index.pug

 

사용방법:

1. Pug 파일 작성하기: 먼저, Pug 파일을 작성합니다. .pug 확장자를 사용하며, 기본적으로 HTML과 비슷한 구조를 가지지만 간결하게 작성할 수 있습니다. 예를 들어, index.pug 파일을 다음과 같이 작성합니다.

html
  head
    title My Pug Page
  body
    h1 Welcome to my Pug Page
    p This is a paragraph written in Pug.

1. Pug 파일 컴파일하기: 작성한 Pug 파일을 HTML로 변환해야 합니다. 이를 위해 터미널에서 다음 명령어를 실행합니다.

pug index.pug

 

이 명령어는 index.pug 파일을 컴파일하여 index.html 파일을 생성합니다.

1. Express 애플리케이션에서 Pug 사용하기: Express 애플리케이션에서 Pug를 사용하여 동적인 웹 페이지를 렌더링할 수 있습니다.

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

// Pug 템플릿 엔진 설정
app.set('view engine', 'pug');

// 루트 경로에 대한 라우트 및 Pug 템플릿 렌더링
app.get('/', (req, res) => {
  res.render('index', { title: 'My Pug Page', message: 'Welcome to my Pug Page' });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

 

위의 예제에서 index.pug 파일은 views 폴더에 위치해야 합니다.

 

결론: 이제 Node.js 프로젝트에서 Pug를 설치하고 사용하는 방법에 대해 알아보았습니다. Pug를 사용하면 HTML을 보다 간결하게 작성할 수 있으며, Express와 함께 사용하여 동적인 웹 애플리케이션을 만들 수 있습니다.