pug

소개

  html을 작성하다 보면 여러 개의 페이지가 중복되는 코드가 발생한다. 예를 들어 유튜브의 홈페이지에서 영상을 클릭하면 해당 영상을 play할 수 있는 페이지로 이동하게 된다. 동영상이 1억개 면 이러한 영상 페이지를 html로 1억개를 작성해야 한다. 정말 끔찍한 경우다. 이것을 영상의 정보에 따라 중복되는 부분을 하나의 코드로 줄이고 전체 레이아웃을 하나 짜서 동영상의 정보에 따라 페이지를 구성하는 방법이 있다. 템플릿 엔진인 pug를 사용하는 것이다.

 

설치

#npm install pug

  그리고 app.js에 app.set('view engine', 'pug')를 추가한다. 이렇게 하면 app.js가 있는 디렉토리에 views 폴더를 찾고 그 안에서 .pug 파일들을 찾아서 랜더링 한다. 

views 디렉토리

 

  흐름은 이렇게 된다. init.js가 실행 -> app.js가 실행 -> 사용자가 접속한 url에 해당하는 router가 작동(예를 들어 join을 들어갔다고 해보자.) -> app.use(routes.home, globalRouter) on app.js가 실행 -> globalRouter.get(routes.join, join) on globalRouter.js가 실행 -> join on controller.js가 실행이 된다. 여기서 join은 res.send가 아닌 res.render('join')으로 바껴있다. 

userController.js

 

join.pug를 랜더링함으로써 view 페이지를 만든다.

join.pug

 

pug 문법

  이 그림은 전체 내가 만들 wetbue의 layout이다. pug는 html과 달리 닫는 태그(</태그>)와 꺾새(<>)가 없다. 대신 들여쓰기로 구분을 한다. 그래서 pug는 들여쓰기가 굉장히 중요하다. 한 칸을 띄든 4 칸을 띄든 상관 없다. 대신 모두 동일한 indent(들여쓰기)가 적용되어야 한다.

  중복 되는 부분은 따로 header와 footer를 만들고 include로 불러올 수 있다. 

 

header.pug의 모습이다.

header.pug

  header.pug를 보면 if else 문이 있는데 pug는 JS 코드를 사용할 수가 있다. login된 유저일 경우 upload, profile과 logout을 보여주고 아닐 경우 join과 login 기능만 보여준다. loggedUser는 변수인데, 이 부분은 서버 쪽에서 middleware들로 데이터를 넘겨주면서 그 안에 같이 있는 변수다. 이 변수를 생성하는 middlewares.js라는 파일을 다음 블로그에서 만드는 것을 보여줄 것이다. 그 외에도 반복문 사용이 가능하다.

  main.pug를 보면 block content가 있는데 여기서 block은 페이지마다 달라지는 부분을 넣는 곳이다. 한 예로 join 파일을 보면 다음과 같다.

join.pug

join.pug에서 extends로 layouts/main 파일을 불러오고 main.pug에 있는 block content에 'p join' 코드를 대입시킨다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• Node.js 교과서 - 조현영 지음
• 퍼그 공식 사이트
• express using templete engine

소스 코드

https://github.com/zpskek/wetube-v3/commit/c6ed6e697664180f222881a9dc24c317e89d427d