Express View engine - PUG (2), mvp.css

inheritance 상속 (extends-block)

반복되는 코드들을 베이스로 만들어 준다. 모든 파일들은 만들어진 베이스를 기반으로 확장해 나간다. 확장(복붙)된 코드 일부분을 block을 통해 수정해서 적용이 가능하다. block을 어떠한 정보를 집어넣는 창문이라고 생각하면된다.

 

 

 

위의 3 코드에서 반복되는 HTML 코드 (doctype, head, body, footer....)를 base 코드로 만든 후 extends로 확장한다. 각 페이지 pug로 돌아와 extends base.pug하면 base와 동일한 코드로 복사붙여넣기 효과를 볼 수 있다. 페이지마다 바뀌는 title, body... 부분은 base.pug에 block을 적용하여 변경해 주면된다.

 

block 적용된 base.pug

base.pug 와 block 적용된 각 페이지 코드

위에서 반복되는 문구를 더 줄여줄 수 있다. 예를 들어... Home | Wetube... 반복되는 것을 줄여주는 것이 에러 발생 확률을 낮출 수 있다.

 

Variable 변수

home.pug를 렌더링되면  base.pug을 extends 한다. base.pug는 block과 #{pageTitle} 이라는 변수를 가지고 있다. home 페이지를 레던링하는 것은 videoController에서 하기 때문에 렌더링할 때  #{pageTitle} 변수를 전달한다. 컨트롤러에서 변수를 전달할 때는 원하는 만큼 변수를 맘대로 사용할 수 있다.

 

(controller에서 render는 2개의 인자(argument)를 갖는다. 하나는 view name, 다른 하나는 variable object)

 

 

MVP.styles

html의 요소들을 예쁘게 꾸며주는 역할. css를 적용하기 전에 작업하면서 예쁜 화면으로 보기위한 임시방편!

link(rel="stylesheet" href="https://unpkg.com/mvp.css")

 

mvp.css 적용화면