[Node.js 5강] Express 템플릿 엔진 Pug (Jade) Express-Template Engine Pug

본 강의는 생활코딩 강좌를 바탕으로 복습하며 진행되는 코드들을 재구성한것입니다. 일부 코드들의 경우 호환성의 이유로 원본의 강좌와 다를수 있음을 알려드립니다.

NodeJS 6.11.0 LTS, Express 4.X 버전에서 완벽하게 작동하는것을 확인하였습니다.

이번 강좌에서는 Pug (구 Jade)을 사용하여 Express 앱내에서 웹페이지를 구현하지 않고 따로 탬플릿 엔진을 사용하여 구현하는 방법에 대해서 알아보도록 하겠습니다. 이 강좌를 진행하기 전에 NPM으로 pug 모듈을 설치해주셔야합니다. 생활코딩 강좌의 경우 Jade 기준으로 작성되어있지만 저작권 문제로 Jade가 Pug로 변경됨에 따라 NPM에서도 pug 모듈을 사용해주셔야 정상적인 값이 반영됩니다.

우선 전체적인 코드를 살펴봅시다.

새로 추가된 부분들이 보이시나요? 우선 위에서부터 아래로 내려가면서 새로 추가된 코드들에 대한 설명을 덧붙이겠습니다. 우선 app.locals.pretty = true; 라는 코드가 새로 생겼는데요. 이 코드는 서버 구동시에 크롬이나 파이어폭스같은 클라이언트 웹브라우저에서 소스보기를 하였을때 이 코드 값을 true을 주게되면 코드들이 예쁘게 정리가 됩니다. 작성하지 않거나 false값을 주는 경우에는 코드들이 줄줄이 붙어서 나오기에 가독성이 떨어지게 됩니다.

그다음 확인할 부분은 app.set('view engine', 'pug'); 와 app.set('views', path.join(__dirname, 'views')); 인데요. pug 템플릿을 사용하겠다고 명시하는것이며 후자의 코드의 경우에는 템플릿 코드의 위치 경로를 설정해주는 것입니다. 저의 경우에는 프로젝트 폴더 내에 views 라는 폴더를 생성하고 그 안에다가 pug 템플릿 파일들을 작성할 예정이기에 경로 설정을 저렇게 하였습니다. 그리고 template 라우팅 경로가 추가됨을 확인하실수 있습니다. 그리고 res.render라는 코드로 temp를 지정해두었는데 이는 temp.pug 라는 템플릿 파일을 사용하겠다는 의미로 해석할수 있습니다. 그리고 아래의 코드들은 랜더링할 코드들을 작성해둔것입니다.

그렇다면 이번에는 temp.pug 파일을 작성해보도록 하겠습니다.

pug 템플릿 파일의 경우에는 매우 간결하게 표현이 가능합니다. 자바스크립트, HTML 코드 모두 pug 템플릿으로 표현이 가능합니다. 다만 현재 내가 가지고 있는 HTML코드들을 어떻게 Pug 파일로 변환할지 궁금하실수 있는데요. 이미 어떤 개발자분께서 HTML -> PUG 변환기를 개발해두셨습니다. 링크에서 HTML파일을 넣어 쉽게 Pug 파일로의 변경이 가능합니다. http://html2jade.org/

그렇다면 이제는 실행을 해보도록 하겠습니다. 실행하기전 반드시 경로문제를 확인한 후에 실행을 하셔야합니다. 경로가 꼬일경우에는 해당 pug 템플릿을 로드하지 못해서 404 에러가 발생할수도 있습니다. 동일하게 코드를 작성하였다면 프로젝트 트리안에 view 폴더를 생성하고 그 안에 pug 파일들을 작성해두시면 됩니다. 결과값은 아래와 같이 출력됩니다.

pug을 사용함으로서 얻는 이점은 app.js 파일 내에 가독성이 떨어지는 클라이언트 코드들의 작성을 분리해낼수 있고 HTML 자체를 훨씬 간결하게 표시가 가능하다는 점에 있습니다. 다만 Pug 문법이 어려울수도 있고 특히 HTML을 벗어나 자바스크립트의 영역으로 들어서게되면 생각보다 활용하기 다시 까다로워지는 문제점이 발생하지만 한번 습득해두면 코드를 훨씬 간결하게 표현이 가능하다는 점에서 꼭 필요한 모듈이 아닌가 생각됩니다.