[유튜브 클론코딩] 2.14 Layouts with Pug

2.14 Layouts with Pug

Pug를 사용하는 이유

html과 css만으로 작업을 할 때에는 똑같은 것들을 반복하는 경우가 많기 때문에 별로 좋지 않다.

html과 css는 프로그래밍 언어가 아니고, 논리적인 작업들을 할 수 없다.

계속 복사-붙여넣기 하는 건 고통스럽다.

pug와 같은 것들로 작업을 하면, html을 생성하기 하는 javascript의 위력을 사용할 수 있다.

 

views 폴더 아래에 layouts 라는 이름으로 새 폴더를 만들기

이 폴더 안에 layout 파일들을 만들 것이다. main 레이아웃 먼저 main.pug로 만든다.

이제 여기에 HTML 작성을 시작할 것이다. 이 파일은 모든 페이지들의 토대가 되는 파일이 될 것이다.

예를 들어, 모든 페이지는 header와 footer, HTML head 태그, css link 를 필요로 할 거고, 이 레이아웃 파일에 그 공통되는 코드들을 집어넣으면 된다.

 

 

pug가 작동하는 방식은 HTML의 방식과 좀  다르다

pug는 html보다 더 편하다.

 <> 같은 방식을 사용하지 않고 대신에 들여쓰기를 한다. ( 탭, 스페이스 다 가능, 근데 나는 탭을 사용할 것임)

탭 안쪽에 있는 코드라면, 무언가의 내부에 있는 코드라는 뜻이다. (children)

탭 바깥에 있는 코드라면 윗줄 다음 코드라는 뜻이다.

 

doctype html

html

    head

        title MyTube

    body

        main

            block content

        footer 

            span © MyTube

 

레이아웃 파일에는 실제 내용들이 들어갈 자리가 있어야 한다.

main 태그에 다른 모든 페이지들의 내용이 들어갈 것이다.

예를 들어, home 화면의 코드가 main의 이 자리(block content 부분)에 들어갈 것이다.

그 작업을 위해 block이라는 걸 추가했다. block에는 name이 있는데, 이 block에는 content라는 이름을 붙였다.

 

doctype, html, head 태그 , head 태그 안에 title 태그가 있고, 그리고 head 태그를 닫았고

그 다음 body 태그를 시작했고, 그 안에 main 태그를 시작했고 그 안에 block 태그가 있다.

그리고 이 block 에서 content라는 곳에 다른 화면의 내용들이 들어갈 것이다.

main 태그를 닫고 footer 태그를 열었고, footer 태그 안에는 MyTube 텍스트가 있다.

이 태그들을 매번 복-붙 하지 않으려고 레이아웃을 만들었다.

 

만약 레이아웃을 이렇게 만들지 않는다면

header 부분에 변화를 하나 주고 싶다면 모든 템플릿들의 header를 바꿔줘야 할 것이다.

이 프로젝트보다 더 큰 프로젝트는 템플릿이 수백개 존재하는 경우도 있다.

그 경우 footer를 바꾸고 싶다면 모든 파일을 다 바꿔야 할 것이다.

그렇게 작업하고 싶지 않아서 레이아웃을 만드는 것이다.

 

extenstion(확장)으로 다른 파일에서 pug 사용하기

home 파일로 가서 p 태그 이전에, 파일의 제일 윗부분에 extension(확장) 이라는 걸 할 것이다.

- 이 레이아웃을 템플릿에서 확장하겠다는 뜻이다. 이 코드들도 사용하고. 거기에 추가적인 것을 더하겠다는 뜻이지.

 

extends layouts/main

p Hello! 

↑ home.pug

extends 코드를 추가했다. 이제 main 레이아웃을 확장해서 사용하고 있다.

이제 home 화면이 레이아웃 코드를 복사-붙여넣기 한다는 뜻이다.

 

이제 block content가 들어가는 자리에 내용들을 채워넣을 수 있다.

p hello를 이렇게 적는 대신에, block content라고 적고 그 안에 p hello 태그들을 추가한다.

 

extends layouts/main

block content 

    p Hello! Home!

 

 

복습

레이아웃 템플릿을 만들었고(layouts/main.pug) 내용이 들어갈 곳을 만들었다.(block content)

home.pug에서 레이아웃 파일을 extends 했다. 레이아웃 전체 코드를 복사했다는 뜻이다.

전체를 복사했기 때문에, 그 위에 덮어쓰기(overwrite)할 수 있다. 

 

(여기서 block을 쓰지 않으면 거기에 들어갈 컨텐츠가 보이지 않는다. 한마디로, 창문을 만들어야 그 창문 안에 내용물이 보이는 것이다.)

 

이제 npm start를 해보면!

 

home.pug에서 확장말고 따로 작성한 코드라고는 Hello! 밖에 없었고

나머지는 main.pug에서 레이아웃으로 title이랑 footer를 작성했었는데 아주 잘 뜬다.

 

main.pug를 좀 더 수정하기

 

doctype html

html

    head

        title MyTube

    body

        header

            h1 MyTube

        main

            block content

        footer 

            span © MyTube

 

main.pug ↑

 

이제 모든 pug 파일에서 main을 extension(확장) 하도록 전부 바꿔준다..(노가다)