[유튜브 클론코딩] 2.15 Partials with Pug (pug의 일부분을 만들어서 include 하기)

2.15 Partials with Pug

views폴더> partials폴더> header.pug, footer.pug 파일 만들기

partials는 페이지의 일부분이다. 조직적인 목적으로만 만들어진다.

views 폴더 아래에 partials 폴더를 만들고 header.pug , footer.pug라는 파일을 만든다.

 

footer.pug 만들기

footer 파일에는 footer 태그를 추가하자. 이 안에는 유튜브 아이콘이 들어갈 것이다.

fontawesome에서 아이콘을 추가한다.

footer 태그에 footer라는 클래스를 추가하고, div에는 footer_icon이라는 클래스를 추가한다.

(div는 div라고 안적어주고 클래스이름만 적어줘도 된다)

icon 다음에는 footer__text가 클래스명인 span 태그를 추가하자.

©를 추가하고, 년도와 MyTube를 추가한다.

 

footer.footer

    .footer__icon

        i.fab.fa-youtube

    span.footer__text © 2018 MyTube

나는 이 년도를 매번 바꾸고 싶지 않다. javascript 함수로 년도가 자동으로 바뀌도록 할 것이다(나중에)

 

 

*** fontawesome에서 아이콘을 추가할때에는 head에다가 link sheet 코드를 넣어줘야함 (fontawesome 계정에서 자기 무료 계정 코드 찾아서 복사해야 함)

 

doctype html

html

    head

        link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous")

        title MyTube

    body

        header

            h1 MyTube

        main

            block content

        

     footer 

            span © MyTube

이게 pug 방식. 여러 속성이 있을 때는 콤마로 구분 (그냥 html방식으로 쳐도 pug가 인식한다고 함!)

 

footer.pug를 main.pug에서 include하기

doctype html

html

    head

        link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous")

        title MyTube

    body

        header

            h1 MyTube

        main

            block content

        include ../partials/footer

이게 컴포넌트를 분리하는 방식이다. 웹 사이트의 분리하고 싶은 부분을 분리할 수 있다.

★ 프로그래밍은 분할 정복(나눠서 하나씩 처리하는 것)이다.

 

Pug에 자바스크립트 코드 삽입하기 - #{ }

아까 년도 바꾸고 싶다고 한거 pug 사이에 자바스크립트 코드를 어떻게 삽입할 수 있을까?

아주 간단하다. #{} 안에 자바스크립트 코드를 작성하면 된다.

올해 년도를 가져오려면 new Date().getFullYear() 메소드를 사용하면 된다.

 

footer.footer

    .footer__icon

        i.fab.fa-youtube

    span.footer__text © #{new Date().getFullYear()} MyTube

 

 

header.pug 만들기(로그아웃버전 헤더)

header에는 모든 링크들이 들어갈 것이다.

그리고 두 개의 열을 만들고, 첫번째 열에는 아이콘을 추가할 것이다.

두번째 열에는 ul을 추가하고, ul 안에는 li 태그를, 또 그 안에는 a(anchor, 앵커) 태그를 추가한다.

지금 작성하는 이 header를 logged out header라고 생각하고 만든다.

로그아웃이 된 상태라면 join과 login이 보여야 할 것이다.

(만약, 로그인 된 상태라면, logout, upload video, profile이 헤더에 보여야 할 것이다)

지금 작업하고 있는 파일에는 logged out header 부분을 추가할 것이다.

join을 추가하고, 같은 방식으로 log in 도 추가하자.

header.header

    .header__column

        i.fab.fa-youtube

    .header__column

        ul

            li

                a(href="#") Join

            li

                a(href="#") Logged In

이제 이 partial을 main 레이아웃에 추가하자. (main.pug에서 아까 footer.pug한 것처럼 include)

 

잘 보이는 것을 확인할 수 있다.

 

다음시간에는

join 과 log in의 링크를 누르면 우리가 추가했던 라우트들이 pug 파일로 연결되면 좋겠다.

왜냐하면 a태그에 href 를 /join 이렇게 적고 싶지는 않기 때문이다.

routes에서 한번에 관리하는 것이 편하기 때문이다.

한 곳에서만 정보를 보관 - 더 나은 코드를 만들어주는 원칙이다. 그러므로 다음시간에는 이런 것들을 해볼 것이다.