1. PUG란?
pug는 템플릿을 이용하여 뷰를 만드는 템플릿 엔진이다.
뷰는 사용자가 보는 대상,화면을 말한다.
html return
export const see = (req, res) => {
`<!DOCTYPE html><html lang='ko'><head><title>Wetube</title></head><body><h1>Watch video #${req.params.id}</h1><footer>©2023 Wetube - All rightsreserved</footer></body></html>`
};위와 같은 길다란 html코드를 넣어야할때 pug를 사용하면 단순한문장으로 입력한것을 쉽게 html형식으로 바꿀수있다.
2. 설치방법
1. npm i pug를 입력하여 설치한다.
2. express 에게 html 헬퍼로 pug를 쓰겠다고 server.js 로알려주기.(pug를 뷰엔진으로 설정한다)
sever.js에 app.use("viewengine", "pug"); 적으면 된다.
3. pug파일을 생성한다.
view는 기본적으로 현재작업중인 디렉토리의 views에서 view파일을 찾는다.
process.cwd() + '/views' 때문에 views라는 폴더를 따로 만들어야한다.
폴더 만들기: mkdir views
홈 파일 만들기: touch home.pug
- 홈파일 내용 작성하기
- 모든 문자는 소문자로 작성해야한다.(파일명도 소문자)
- 속성이 있으면 괄호안에 작성한다.
- 모든것은 부모속성보다 안쪽에 있어야한다.(tab또는 띄어쓰기 2칸)
doctype html
html(lang="ko")
head
title Wetube
body
h1 Welcome to Wetube
footer © 2023 Wetube
이렇게 작성된 파일은 우선 pug로 보내지고 pug는 이파일을 렌더링하여 평범한 html로 변환해준다.
이제 맨 위의 복잡했던 코드를 바꾸면 된다.
export const trending = (req, res) => res.render("home);
이제 express는 내가 템플릿 엔진으로 pug를 쓰는것을 알았다.
그리고
에러 발생
원인은
띄어쓰기
하지만 언제나 그렇듯 나는 예상치 못한 에러를 만난다.
원인은 app.set("viewengine", "pug")로 설정해놨는데
app.set("view engine", "pug")로 뷰 띄고 엔진으로 써야했다.
경로
이번에는 홈파일을 뷰즈디렉토리 안에서 찾을 수 없다고 떴다. 근데 뒤 쪽의 경로를 보면 내가 넣어둔 경로가 아닌 다른 경로가 뜬다
- consloe.log(process.cwd())로 현재 작업중인 경로를찾아본다.
cwd는 nodejs를 호출하는곳,서버를 기동하는 파일의 위치에 따라 결정된다.
바로 package.json이다.
package.json안의 scripts에서 nodejs를 실행하고있다. 때문에 현재작업디렉토리는 wetube가 된다. - 경로위치를 물리적(?)으로 바꾼다.
(1) view폴더를 src밖의 package.json이 있는 곳에 둔다.(구려) - 경로위치를 재설정한다.
partial
모든페이지에띄우기위해 또는 분리하여 사용하기위해 partial를 쓴다.
views/partial/에 footer.pug 파일을 만들어서 footer의 내용을 채운다.
다른 퍼그파일들에서 일일이 적어둔 푸터를 지운뒤 확인해보면 푸터가 다 지워져있다.
푸터를 인클루드하지 않아서이므로 인클루드해주자
그러면 푸터가 모든 페이지에서 뜨는것을 확인할 수 있다.
상속
레이아웃의 베이스 혹은 html의 베이스를 만드는것
extend는 html의 베이스를 가질수 있게 해준다.
block
블록은 템플릿의 공간이다. 그 공간에 이것저것 집어넣을 수 있다.
block content
doctype html
html(lang="ko")
head
block head
body
block content
include partials/footer.pug
block 은 다른 pug파일들이 내용을 채워넣을 공간을 만드는것이다.
변수 지정
#{변수명: 값}
장점
깔금하고 간단하게 html코드로 변경해준다.
html에 자바스크립트를 포함시킬수 있다.
반복적이지 않고 한파일로 모든 템플릿을 업데이트 할수 있다.
