pug 에 대해서

pug에 대해

pug 를 오늘 처음 알았다.

간단히 보자면, html 을 yml 형식 같은 느낌으로 간단히 작성하는 방법을 지원하는 도구이다.

공식 주소 : (https://pugjs.org/api/getting-started.html)[https://pugjs.org/api/getting-started.html]

pug 사용법

살펴보자.

블라블라.pug라는 파일을 만든다. 내용은

doctype html
html
  head
    title 가나다라
  body
    가나다라
    p 가나다라

이런 느낌으로 작성한다.

장점

이런저런 내용은 검색해보면 나오는데, 내가 하고 싶은 말이 있다.

그것은 가장 큰 장점이다.

가장 큰 장점이 무엇이냐면.

주석을 마음껏 써도 된다는 점이다. 주석은 컴파일 되지 않으니까!

백엔드만 해오다보니 이 점이 너무 불편했었다. html 에서는 주석을 남기면 코드에 남는데다가, 쓸데없이 용량이 커지면서 트래픽과 속도에 영향을 주기 때문이다.

해커에게 친절히 알려주는 듯한 이상한 기분도 들고...

다시 사용법으로

설치는 다음과 같다..

npm install pug

노드로 npm 명령어로 설치를 하면 된다. 그 뿐인 듯.

이제 사용법인데, 공식 가이드에서는 express 를 권한다.

그런데 내가 누구냐.. 나는 백엔드 개발자이다. 어느 세월에 express라는 웹프레임워크를 살펴보아야 하는가. 그것보다 좋은 웹프레임워크가 많은데.. (장고도 있고 라라벨도 있고 플라스크도 있고..)

pug에서는 어차피 html 으로 렌더링해서 output 을 만들어준다. 파일로는 안 만들어주는 것 같다. 바로 파일로 만들어보자. node를 이용해서 만들 수 있을 것이다. node라는 것은 그런 것이니까. 파일쓰는 일이 얼마나 빈번히 많을 텐데. 당장에 npm도 파일을 생성하고 보는데...

(https://nodejs.dev/learn/writing-files-with-nodejs)[https://nodejs.dev/learn/writing-files-with-nodejs]

fs를 사용하면 된다고 한다.

결과적으로 이렇게 되었다.

const pug = require('pug')

// Compile template.pug, and render a set of data
const content = pug.renderFile('skin.pug')

const fs = require('fs')

fs.writeFile('skin.html', content, { flag: 'w+' }, err => {
  if (err) {
    console.error(err)
    return
  }
  //file written successfully
})

방금 한 거라서... 귀찮아서 코드는 정리하지 않았다. 정리하면 더 짧아지겠지만..

이렇게 해서 test.js 로 만들고, 실행할 때는 'node test.js'를 하면 skin.html 파일이 생성이 된다.

결론

편하다.. 그런데 장고나 라라벨에서 사용하기에는 좀 안 맞는 것도 같다. 거기에는 복잡한 템플릿 언어가 들어가니까... 생각해보니 number format 이라든가, date format 이라든가, session 값에 따른 분기라던가.. 될 것도 같기도 하는데... 구문 방식에 의해서 장고나 라라벨에는 안 맞을 것 같네. 컴포넌트 같은 거 만들 때는 괜찮을 거 같기도 하고... 검색해보니 사용하기도 하는 듯 하다. 오...

pug 으로 작성을 해서 각 상황에 맞는 템플릿 파일로 작성하게끔 해놓으면, html 을 작성하는 일도 과거보다는 쉬워질 것 같다.

추가

pug 과 같은 계열의 다른 도구들도 있는 듯 하다. 일단 처음이고 만족스러운데, 더 좋은 게 있다면 더 좋은 걸 사용할지도 모르겠다. 적어도 지금은 pug 으로도 괜찮은 듯?