<Express.js> Pug-layout

layout

레이아웃은 왜 만들까요? 레이아웃을 만들어두면 프로젝트의 탬플릿이 많아도 쉽게 관리가 가능하기 때문입니다. 모든 페이지에서 header나 footer는 동일하게 유지된다고 하면 모든 탬플릿에 동일한 코드를 작성하는건 매우 괴롭고 낭비적인 일입니다. 이번 시간에는 layout을 작성해보고 여러 탬플릿에 어떻게 동일한 layout을 적용하는지 알아봅니다.

project

youtube
  |views
   +|layouts
     +|main.pug
   +|home.pug

main.pug

참고로 pug는 html과 다르게 태그를 열고 닫고가 없고 들여쓰기를 합니다. 들여쓰기로 부모 자식관계를 표시합니다. main.pug는 layout을 담당하는데요. main 아래 보면 block content를 볼 수 있는데요. 이 block content 부분을 탬플릿별로 변경해서 사용할 수 있습니다.

doctype html
html   
  head
    title Wetube
  body
    header
      h1 WeTube
    main
      block content 
    footer  
      span © Wetube

home.pug

layout을 정의했으니 다른 pug파일에서 layout을 불러올 수 있습니다. 불러오기 위해서는 extends 키워드를 사용합니다. layout(main.pug)을 block content 부분을 제외하고 복사해서 붙여넣기한다고 생각해도 됩니다. block content부분을 변경하기위해선 아래처럼 block content 아래에 코드를 작성해줍니다.

extends layouts/main.pug

block content
	p Hello