Pug, Partials

0_CyberLover_0·2022년 3월 19일

JavaScript node.js partials pug

Node.JS # 02

목록 보기

4/19

에러가 났던 걸 고치는 방법은 디폴트 값을 바꾸는 거다.

한가지 해결 방법은 views폴더를 src밖으로 꺼내는 거다. (너무나도 단순, 무식한 방법이다.)

이 방법은 별로 추천하지 않는다.

모든 코드를 정리하기에도 보기에도 src폴더 안에 있는게 좋다.

그래서 express가 가진 세팅을 하나 해줄거다.

그건 바로 views이다.

server.js에다가 추가 해준다.

app.set("view engine", "pug");

app.set("views", process.cwd() + "/src/views");

view engine 밑에다가 넣어주면 된다.

http://localhost:4000/ 가보면 정상으로 작동하는걸 볼수 있다.

views폴더 안에 watch.pug를 만들어 준다.

doctype html

html(lang="en")

head

title Wetube

meta(charset="UTF-8")

meta(http-equiv="X-UA-Compatible", content="IE=edge")

meta(name="viewport", content="width=device-width, initial-scale=1.0")

body

h1 Watch video !

footer &copy; #{new Date().getFullYear()} Wetube

pug는 JavaScript이기에 올해의 연도를 맞춰 바꿀수 있다.

해당 년도를 적용 시켜 주는 함수를 적용 해준다.

videoController.js에다 추가 해준다.

export const see = (req, res) => res.render("watch");

명심해야 될건 파일명이 같아야 한다는거다.

("watch" 파일명) 띄어쓰기가 있어도 안된다.

전부 소문자여야 한다.

템플릿에 어느 JavaScript code라도 넣을수 있다는걸 알게 되었다.

JavaScript code는 user의 browser로 보내지 않는다.

user가 보기전에 text로 변환된다.

그것을 렌더링이라고 부른다.

pug가 하는 일이 바로 이것이다.

모든걸 check해서 JavaScript를 실행시킨다.

그러나 이 방법은 문제가 있다. 여전히 반복해서 작성하고 있다.

모든 페이지에 footer를 수정하게 된다면 하나씩 일일이 다 수정을 해야 될것이다.

pug에 최대 장점은 반복해서 사용 할 필요가 없다.

partials가 그 기능을 한다.

views폴더 안에 partials폴더를 만든다.

그리고 partials 폴더 안에 footer.pug 파일을 만들어 준다.

footer.pug 파일 안에 넣어준다.

footer &copy; #{new Date().getFullYear()} Wetube

footer.pug 파일은 이런식으로 대부분 한줄만 작성 될것이다.

그리고 이제 home.pug, watch.pug 에 있는 footer를 지워 준다.

http://localhost:4000/

이제 새로 고침을 해보면 footer가 적용이 안되어 있다.

footer를 include를 해야된다.

https://pugjs.org/api/getting-started.html

pugjs.org 해당 링크로 가면 여러가지 기능을 볼수 있다.

include의 기능은 파일을 포함 시킬수 있는 거다.

watch.pug 파일로 가서 추가해준다.

include partials/footer.pug

home.pug에도 마찬가지로 추가해준다.

http://localhost:4000/ 새로고침해서 확인해 보면 footer가 잘 적용 되는걸 알수 있다.

pug가 페이지를 렌더링하고 html로 변환하고

pug는 footer로 가서 내용을 가져와서 적용시켜준다.

edit.pug파일도 하나 만들어 준다.

doctype html

html(lang="en")

head

title Wetube

meta(charset="UTF-8")

meta(http-equiv="X-UA-Compatible", content="IE=edge")

meta(name="viewport", content="width=device-width, initial-scale=1.0")

body

h1 Edit

include partials/footer.pug