개념

Pug(이전 이름은 Jade)는 간결하고 읽기 쉬운 문법을 가진 템플릿 엔진입니다. HTML을 작성하는 대신 들여쓰기를 사용하여 구조를 정의하며, JavaScript 코드를 삽입할 수 있습니다. Pug는 Node.js와 함께 사용되며, 특히 Express와의 호환성이 뛰어나 서버 측 애플리케이션을 구축하는 데 유용합니다.

특징

1. 간결한 문법: Pug는 HTML보다 간결한 문법을 가지고 있어 코드의 가독성을 높여줍니다.
2. 재사용 가능한 코드 블록: Mixin을 사용하여 코드 블록을 정의하고 여러 곳에서 재사용할 수 있습니다.
3. 동적 데이터 삽입: JavaScript 코드를 삽입하여 동적으로 웹 페이지를 생성할 수 있습니다.
4. Express와의 호환성: Express 애플리케이션과 함께 사용하기 쉽고, 템플릿 엔진으로 설정하기 간편합니다.

시작하기

1. Pug 설치하기: 프로젝트 디렉터리에서 npm을 사용하여 Pug를 설치합니다.
   npm install pug
2. Express 애플리케이션에 Pug 설정하기: Express 애플리케이션을 생성하고 Pug를 사용하도록 설정합니다.

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

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

3. Pug 템플릿 작성하기: .pug 확장자를 가진 파일에 Pug 문법을 사용하여 템플릿을 작성합니다.
   템플릿 렌더링하기: 라우팅을 설정하여 템플릿을 렌더링합니다.

// views/index.pug
html
  head
    title= title
  body
    h1 Hello, #{name}!

4. 템플릿 렌더링하기: 라우팅을 설정하여 템플릿을 렌더링합니다.

app.get('/', (req, res) => {
    res.render('index', { title: 'Homepage', name: 'John' });
});