Pug (구 Jade) 설치 및 기본 문법들 정리 # NodeJS

NodeJS의 UI템플릿 엔진으로 pug를 사용하고 있는데요.

Jade로 알려져 있던 것이, 이름에 대한 권리 때문에 Pug로 바뀐것으로 알고 있습니다.

 

오늘은 이 pug의 문법을 기초부터 하나씩 정리하기보다는,

자주 사용하는 것들을 위주로정리하고, html변환기의 도움을 받아서 빠르게 문법을 작성하는 방향으로 정리해 보겠습니다.

다만, NodeJS와 Express등에 대한 사용법은 이 글에서 생략되어 있습니다.

 

1. Pug설치하기

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

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

 

npm install pug --save

 

프로젝트로 폴더에서 views디렉토리에 index.pug라는 이름의 파일을 생성해 줍니다.

NodeJS에서 아래와 같이 view engine을 pug로 설정해 줍니다.

 

 

이제 route에서 아래와 같이 사용해 줄 수 있는데요.

render라는 함수를 통해서, title과 message를 전달해 줍니다.

 

 

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

가장 먼저, title과 Body에서의 h1태그의 내용을 입력해 보겠습니다.

"="기호를 이용해서 위에서 render함수를 통해서 넘어온 title과 message를 아래와 같이 입력해 줄 수 있습니다.

 

 

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

클로징 태그가 없는 것이 pug의 가장 큰 특징중의 하나인데요.

위에서 잠깐 사용해 보았던, "="태그는 생략하겠습니다.

 

그럼 하나씩 보도록 하겠습니다.

 

2-1. ul과 li

안에 nest되는 구조로 많이 쓰는 ul과 li는 아래와 같이 들여쓰기로 끝낼 수 있습니다.

하단의 우측은 html로 변환한 모습입니다.

pug로 훨씬 심플하게 구현할 수 있습니다.

 

 

2-2. img

img태그와 같은경우, pug가 알아채고 스스로 태그를 닫아줍니다.

이러한 태그들로는, img, link, meta 태그등이 있습니다.

 

img태그에는 a태그를 같이 사용하는 경우가 많은데요.

아래와 가팅 사용할 수 있습니다.

 

 

2-3. Self-Closing 태그

만약 "<foo />"와 같은 표현을 하고 싶다면,

태그이름뒤에 "/" 만 붙여주면 아래와 같이 pug가 붙여줍니다.

 

2-5. html 변환 사이트 도움

 

사실 작성하고자 하는 html이 있다면, 변환 사이트를 참조해서 쉽게 pug의 문법을 배울 수 있습니다.

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

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

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

 

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

>>http://html2jade.org 

 

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

>> pugjs.org/language/tags.html

 

그럼이제 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와 관련된 내용은 이 글을 통해서 계속 업데이트 하도록 하겠습니다.