[ TIL ] - pug의 사용

pug란?

view template engine
컨트롤러에서 res.send("<h1>Hi Hello</h1><p>Nice to see you:)</p>") 로 보내는 대신에,
res.render("pug 파일명"); 로 html 코드를 훨씬 간편하게 보낼 수 있게 된다.

pug 사용법

1. pug 설치
   npm i pug

---

2. express에서 pug를 view engine으로 설정
   app.set("view engine", "pug");

---

3. pug 파일 생성

• views 폴더를 만든 후, '파일명.pug' 파일을 생성
  (express 에서 view 파일을 찾는 default 값이 process.cwd() + '/views'(current working directory에서 views를 폴더를 찾는다)이기 때문)
• 이때 cwd 가 /views 의 위치가 아니라면, 경로를 지정해주면 된다.
  app.set("views", process.cwd() + "/views파일이 있는 폴더/views");

---

4. pug 파일 사용

• res.render("파일명"); 이 파일명.pug파일을 렌더링한다.
• 렌더링이란? 개발자가 작성한 코드를 유저에게 보여지는 형태로 보여주는 것
• render() 함수 : 첫 번째 인자는 템플릿이고, 두 번째 인자는 템플릿에 추가할 정보가 담긴 객체이다.

relative URL / absolute URL

• relative URL :
  웹 페이지나 파일 디렉토리 중심으로 상대적으로 찾아갈 수 있도록 나타낸 URL
• absolute URL :
  서비스, 호스트, 파일 경로를 나타내는 완전한 주소
• 상대 url / 절대 url 비교
  • 상대 url : ../images/img.jpg
    절대 url : http://www.aa.or.kr/CV/word/images/img.jpg
  • 상대 url : edit-profile/edit
    절대 url : http://localhost:4500/profile/edit-profile/edit
• 참고 : /edit-profile/edit 은 http://localhost:4500/edit-profile/edit 와 같다.

pug 기능

1. 레이아웃 확장 기능

• pug를 이용하면 html에서 복사 / 붙여넣기를 통해 반복하던 작업을 extends를 통해 쉽게 해결할 수 있다.

// base.pug 파일을 그대로 가져와서 쓰는 것
extends base.pug

• block 영역은 base.pug를 가져다 쓴 파일에서 수정 가능하다.

// block 의 생성(base.pug에서)
block content
// block 의 사용(login.pug에서)
extends base
block content
    h1 Login!

---

2. 컴포넌트 분리와 사용

• include를 통해 pug에서 분리된 컴포넌트를 가져올 수 있다.

include 폴더명/header
include 폴더명/footer

---

3. javascript 코드 사용

• #{} 괄호 안에 javascript 코드를 넣어서 쓸 수 있다.
• 변수 사용
  base.pug 에서 #{pageTitle} 이란 변수를 쓴다면,
  controller 에서 변수값을 지정하여 렌더링 하면 된다.

// base.pug 파일
title #{pageTitle}
title= pageTitle // 변수 하나라면 '='으로 사용해도 됨
// controller.js 파일
res.render("파일명", {pageTitle :"페이지 명"});

4. mixin 함수로 형식 재활용

• mixin이란? 형태는 같되 내용은 다르게 사용하고 싶을 때 쓴다.
• mixin 함수 생성 예시

// mixins/contents.pug 파일에서
// mixin 함수 생성
mixin contents(게시물)
    h1 게시물.title
    p=게시물.description
    ul
		each hashtag in 게시물.hashtags
			li=hashtag

• mixin 함수 사용 예시

// home.pug 파일에서
// mixin 함수 사용
include mixins/contents
block content
	each posting in postings
		// "+함수이름" 으로 사용
		+contents(posting)
	else
		No contents