Jade 또는 Pug 설치하고, 알아두어야 할 문법들 정리

NodeJS에서 Jade(혹은 pug)를 템플릿엔진으로 주로 사용하고 있는데요.

Jade로 알려져 있는 것이, 이름에 대한 권리 때문에 Pug로 바뀐것으로 알고 있는데요.

오늘은 이 pug의 문법 중에,

공식문서에서 쉽게 찾을 수 있는 문법외에,

실제 구현해보면서 어렵거나 헥살리는 부분들 위주로 정리해 보도록 하겠습니다.

(참고로 이 글은 NodeJS 그리고 html이나 css에 대해 어느정도 알고 있다고 생각하고 쓴 글입니다.)

1. Pug설치하기

본격적으로 pug에 대해서 알아보기 전에, 간단히 설치하는 방법에 대해서 정리해 보도록 하겠습니다.

먼저 아래 명령어로 pug를 설치해 줍니다.

npm install pug --save

views디렉토리에 index.pug파일을 설치했다고 가정하면,

아래와 같이 설정해 줍니다.

이제 route에서 아래와 같이 사용해 주면

이제 pug를 사용할 준비가 되었네요.

위에서 받아온 title과 message를 아래와 같이 사용할 수 있습니다.

2. 공식사이트와 html 변환 사이트 참조

기본적인 문법들은 Pug의 공식페이지에서 많은 도움을 받을 수 있으니 아래링크를 참조해 주시구요.

https://pugjs.org/language/tags.html

개인적으로는 html을 pug나 jade로 바꾸어 주는 아래의 사이트들을 이용합니다.

기본적인 문법을 알고 수정할 줄만 안다면,

이러한 사이트를 통해서 초반에 감을 익히는데 도움을 받을 수 있습니다.

>> https://html-to-pug.com/

>>http://html2jade.org 

그럼이제 pug를 응용해서 사용하면서,

알아두어야 하는 문법들에 대해서 정리해 보도록 하겠습니다.

3. 버튼 태그와 A태그 같이 사용하기

Pug에서는 attribute을 같이 사용할 때는, 개행을 해서 들여서 써야 하는 경우가 많은데요.

A태그와 Button태그 역시 아래 이미지와 같이 개행을 해서 사용해야 합니다.

들여쓰기를 해서, button태그를 넣어주시면 되구요.

위와 같이 작성을 하시면, 아래와 같은 결과 화면을 볼 수 있습니다.

4. CSS import하기

html에서 쉽게 하던 import도 Pug에서 하려니 막막하기도 한데요.

아래와 같이 하면 됩니다. href에 넣는 path는 app.js에서 설정해놓은 값에 따라서 해주어야 하는데요.

저는 static디렉토리라는 곳의 css폴더에 넣었기 때문에 아래와 같이 하였습니다.

5. 자주하는 실수들

pug를 사용하면서 주의할 것은 띄어쓰기 입니다.

아래와 같이 res.render를 통해서 key-value를 보내줄 수 있는데요.

view에서 pug파일 작성시 아래와 같은 실수를 할 수 있습니다.

위의 것은 맞고 아래 것은 틀려서, 아래와 같이 띄어쓰기를 할 경우 값을 받아 올 수 없습니다.

간결해서 좋기는 하지만, 조금은 예민한 pug이므로 주의할 필요가 있습니다.

이상으로 pug에 대해서 정리해 보았구요.

추가적으로 Pug와 관련된 내용은 이 글을 통해서 계속 업데이트 하도록 하겠습니다.