Pug란?

Pug란 Javascript를 사용하여 정적인 HTML을 동적으로 렌더링 해주는 템플릿이다. 그래서 DB에서 데이터를 넣거나 if문, 반복문을 사용할 수 있다.

형태

파일은 .pug을 사용 (이미지가 강아지 퍼그를 따온 것이 귀엽다.)

Pug의 코드 구성은 HTML과 비슷하지만 더 간결하다는 장점이자 단점이 있다.

Express와 연결

먼저 pug를 프로젝트에 설치를 해야 한다.

npm install --save pug

참고로 --save 옵션을 넣어주는 이유는 패키지를 node_modules에 설치하고 package.json의 devDenpendencies항목에 패키지 정보가 저장을 해주기 때문입니다.

옵션을 추가하지 않을 경우, 패키지만 설치한다. 하지만 최근에는 install만 해도 자동으로 package.json에 저장된다고 한다.

그 후 Express에 아래의 코드로 템플릿을 저장해준다.

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

첫 번째 줄은 확장자를 지정하고, 두 번째 줄에는 폴더 경로를 지정해주는 것이다.

데이터 전송하기

HTML에 동적으로 데이터를 보내기 위해서는 필요한 설정이 있다.

router.get("/add-product", (req, res, next) => {
  res.render('add-product', {pageTitle: 'Add Product', path: '/admin/add-product'});
});

사용자의 요청에 데이터를 전송하기 위해서는 Response에 render함수를 사용하면 된다. 첫 번째 인수에는 파일 이름을 쓰고, 두 번째 인수에는 전달할 값은 Javascript 객체로 전달된다. 그래서 Json형태로 값을 넣어주면 된다.

그리고 값을 표시할 때는 pug파일에 #{값}의 형태로 넣어주면 된다.

예시 #{pageTitle}

이처럼 넣어주면 pageTitle에는 Add Product가 표시된다.

개인 끄적임

Node js를 배우면서 처음으로 동적 템플릿을 배웠다. 그리고 그것이 Pug라는 템플릿인데 나름 괜찮다고 생각한다. 깔끔한 코드를 좋아하는데 그것을 가능하게 해주며 기능도 충실하다고 느꼈다. 하지만 HTML 형태에서 벗어난 것에 조금은 불편하다. 그래도 동적으로 움직인다는 것이 어떤 것인지에 대해 알려주기에는 충분히 좋은 템플릿인 것 같다.