pug
pug는 템플릿 엔진임 ( = 템플릿을 이용해서 view를 만드는 것을 도와줌)
1. pug 설치하기
2. express에서 html 랜더링 해주 view engine은 pug라고 알려주기.
3. pug 파일 만들기.
기본적으로 express는 views 폴더에 존재하는 파일을 탐색.
우리가 pug에게 파일을 보내면 pug가 파일을 html 로 변환해줌. (유저가 보게되는 화면)
추가적으로 기본 경로 설정이 views로 되어있는데 우리는 'src' 폴더에 넣어줬으므로 src 폴더를 한 번 거치고 파일을 검색할 수 있도록 환경 설정 해줘야함.
- 참고로 다음과 같은 오류 발생 시,
아래와 같은 코드 입력 시 해결 가능하다.
4. pug 파일 작성하기.
Pug에서 특정 변수나 자바스크립트 사용할 때에는 #{ } 사용.
- 파일명이 watch 인 Pug 파일이 handleWatch 컨트롤러 수행 시 랜더링됨.
5. partials 이용
pug 파일을 반복적으로 만들다 보면 중복되는 부분을 특정 폴더에 집어넣고
필요할 때 마다 가져와서 사용. (ex : nav bar, footer 등)
동일한 결과를 얻을 수 있음.
6. inheritance (상속)
그럼에도 불구하고,,,
위의 파일들은 doctype, html , body 등 중복적으로 사용되는 코드가 존재한다.
상속은 일종의 레이아웃의 베이스 혹은 html의 베이스를 만듦.
베이스가 생성되면 모든 파일들이 그 베이스를 기준으로 확장됨.
위와 같이 근간이 되는 pug 파일을 생성하고 해당 내용을
doctype html
html(lang="ko")
head
title Wetube
body
h1 Base!
include partials/footer.pug다음과 같이 채워주고,,
' extends base.pug' 를 watch, edit, home 파일에 입력.
그러면,,
모든 url 에서 base.pug를 근간으로해서 랜더링 되는 걸 볼 수 있음.
하지만, 우리가 원하는건 각각의 url 마다 문구가 다르게 표시되는 걸 원하는 것.
7. block
블록은 템플릿의 창문 같은 것.
무언가를 집어넣을 수 있는 공간.
즉 , 다른 pug 파일들이 내용을 채워넣을 공간을 확보 시켜 주는 것.
다음과 같이 매번 다른 url 마다 변경하고 싶은 공간을 block으로 처리해주고
다음과 같이 각기 다른 block 코드를 입력 하면
다음과 같이 다른 결과를 확보 할 수 있다.
8. Variables to Templates
만약, 각 페이지 마다 표시되는 title의 큰 틀이 동일하다면 base.pug에 특정 변수만 다르게 해서 큰 틀은 유지하도록 하고 싶을 것이다.
따라서 다음과 같이 base.pug에 위에서 언급한 #{ } 을 사용해서 특정 페이지마다 변수명만 다르게 해보자.
중요한 것은 특정 변수명을 랜더링하는것은 controller 단에서 한다는 것이다.
따라서, 다음과 같이 base.pug 파일에 가용되는 변수명을 설정해주고,
다음과 같이 특정 변수명에 대한 결과값을 컨트롤러에게 넘겨준다.
그러면,,
이처럼 따로 title을 해당 Pug 파일에 언급해주지 않아도 base 파일에서 설정한 변수명을 컨트롤러 단에서 받아서 랜더링 해주는 것이다.
< 결과! >
흐름도
- base.pug 파일에서 설정한 변수명(pageTitle) 을 랜더링 해야함.
- 변수를 제공하기 위해서 controller 단에서 render에 파일명과 변수명을 써줌.
- home,edit,watch.pug 는 base.pug 파일을 확장(extends) 하고 있기 때문에 각각의 컨트롤러단에서 변수명만 설정해주면 해당 변수명이 해당 파일에 전송되서 각각의 다른 결과값을 얻을 수 있음.
