view template engine
컨트롤러에서 res.send("<h1>Hi Hello</h1><p>Nice to see you:)</p>")
로 보내는 대신에,
res.render("pug 파일명");
로 html 코드를 훨씬 간편하게 보낼 수 있게 된다.
- pug 설치
npm i pug
- express에서 pug를 view engine으로 설정
app.set("view engine", "pug");
- pug 파일 생성
- views 폴더를 만든 후, '
파일명
.pug' 파일을 생성
(express 에서 view 파일을 찾는 default 값이process.cwd() + '/views'
(current working directory에서 views를 폴더를 찾는다)이기 때문)- 이때 cwd 가 /views 의 위치가 아니라면,
경로를 지정
해주면 된다.
app.set("views", process.cwd() + "/views파일이 있는 폴더/views");
- pug 파일 사용
- res.
render
("파일명
"); 이파일명.pug
파일을 렌더링한다.- 렌더링이란? 개발자가 작성한 코드를 유저에게 보여지는 형태로 보여주는 것
- render() 함수 : 첫 번째 인자는
템플릿
이고, 두 번째 인자는템플릿에 추가할 정보가 담긴 객체
이다.
relative URL
:absolute URL
:상대 url / 절대 url 비교
../images/img.jpg
http://www.aa.or.kr/CV/word/images/img.jpg
edit-profile/edit
http://localhost:4500/profile/edit-profile/edit
/edit-profile/edit
은 http://localhost:4500/edit-profile/edit
와 같다.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