Express (Node.js) - partial (Pug)

자 pug에 대해서 알아봤고 각 템플릿들은 미리 만들어줬다.

이제 페이지의 일부분인 partitial부분을 만들어주자 ~ 음 보니까 지금은 헤더와~ 푸터정도인듯 하다

organization한 purpose라고 한다.

partitial 폴더를 생성해주고 footer.pug와 header pug를 만들어 주자.

 

푸터에는 유튭 아이콘을 넣어주고~ copyright도 작성해주자

그리고 메인pug에 인클루드 해주자~

역시 진자템플릿처럼 include기능이 있다. 원래 footer자리에 footer태그를 지우고

include ../partials/footer로 설정하면 include 된다 import 느낌?

 

pug에서 자바스크립트 코드를 추가하는 방법은 #{}를 이용하자

javacript에서 날짜를 받는 코드를 작성

new date().getFullYear() 이코드를 작성하면 해가 바뀌어도 매번 그냥 자동으로 연도를 얻어와서 뿌려준다.

 

header.pug도 작성한다.

총 세개의 칼럼이다

첫번째 칼럼은 아이콘을 넣어주고 세번째는~~ join login 링크를 걸어준다.

그리고 이역시 main에 include해준다.

One single source of truth 정보는 오직 한곳에서만 보관하라~ 의 원칙..

뭐 이건 3.15강의를 참조해야겠다. 여러곳에서 관리하는 것 보다 한 곳에서 관리하고 전체를 관장하자.

 

그리고 각 템플릿마다 block을 작성해줘야 한다 . block을 작성하지 않으면 보이지 않는다! 명심하자

block은 window이다.