[JavaScript, Node.js] 유튜브 클론 정리 5장 (2) - Partials, Templates

머리글

이번 시간에는 반복 작성을 피하기 위한 Pug의 기능인 Partials와 Templates 사용 방법에 대해서 알아보자.

우선 모든 페이지에 들어갈 footer가 하나 있다고 하자.

footer © #{new Date().getFullYear()} Mytube

모든 페이지 하단에는 올해의 연도와 저작권을 표시하는 마크를 삽입할 예정이다.

그렇다면 우리는 모든 페이지에 이 코드를 넣어줘야 할까?
당연히 아니다.

Partials

우선 위의 코드를 footer.pug 파일에 넣어서 저장해 주자.

그리고 우리는 footer를 사용할 페이지에 다음과 같이 작성해 주면 된다.

doctype html
html(lang="ko")
	head
    	title Mytube
    body
    	h1 Watch Page
    include partials/footer.pug

위의 내용은 기본적인 페이지의 구성이고,
include 부분을 중점적으로 보면 된다.

include를 입력하고 '사용할 파일의 경로'를 지정해 주면 된다.

이렇게 하게 된다면 다른 pug 파일에서 우리가 필요한 pug 파일을 불러와서 사용이 가능하다.

근데 이렇게 해도 모든 파일에 footer.pug에 대한 내용을 붙여 넣기 하는 귀찮음은 여전하다.
이 또한 개선을 해보도록 하자.

Base 파일 생성

기본적으로 하나의 사이트에서 페이지의 구성이 크게 달라지지 않고 사용되는 경우가 많을 것이다.
그렇다면 굳이 일일이 유사한 코드를 다 작성할 필요는 없다.
이때, Base 파일을 생성해서 이 파일을 기반으로 추가적인 사항만 작성해 주면 된다.

아까 위에서 작성한 pug 코드를 base.pug라는 파일을 생성해서 넣어주고,

doctype html
html(lang="ko")
	head
    	title Mytube
    body
    	h1 base
    include partials/footer.pug

다른 pug 파일에서 다음과 같이 사용이 가능하다.

extends base

이렇게 입력해 준다면 자동으로 base파일을 기반으로 페이지를 렌더링 할 수 있다.

하지만 모든 페이지에서 같은 내용을 사용하지 않는 경우가 있을 것이다.
예를 들어 지금 h1 같은 경우 base라고 되어 있는데,
어떤 페이지는 watch일 수 있고, edit일 수도 있다.

따라서 우리는 block을 통해 base 파일을 조금 수정해서 해결을 할 수 있다.

doctype html
html(lang="ko")
	head
    	title Mytube
    body
    	block content
    include partials/footer.pug

레고와 비슷한 느낌이라고 생각하면 된다.
작성되어 있는 block 부분에 다른 내용을 얼마든지 끼워 넣을 수 있다.

이제 home.pug 파일로 돌아와서 다음과 같이 내용을 수정해 보자.

extends base

block content
	h1 Home!

이렇게 작성을 하고 페이지를 렌더링 해보면, block 부분에 Home!이라는 글자가 출력되는 것을 볼 수 있다.

변수 사용 방법

페이지에 변수를 사용하고 싶어질 수가 있다.
예를 들어, head에 각 페이지의 제목을 작성하고 싶다고 해보자.

우선 base 파일을 조금 수정해 주자.

doctype html
html(lang="ko")
	head
    	title
        	#{pageTitle} | Mytube
    body
    	block content
    include partials/footer.pug

기본적으로 pug에서는 #{변수}와 같은 방법으로 변수를 사용할 수 있다.

이대로 수정하고 페이지에 들어가 보면,
변수를 사용한 제목 부분은 비어있는 것을 확인할 수 있다.

이는 우리가 변수를 사용하겠다고 했지만,
변수를 주지 않아서 생긴 문제인데 어떻게 변수를 템플릿에 전달할 수 있을까?

정답은 라우터다.
우리는 res.render("home")과 같은 방식으로 페이지를 렌더링 하고 있다.
다음과 같이 변수를 템플릿에 전달이 가능하다.

export const home = (req, res) => res.render("home", {pageTitle: "Home"});

변수의 이름과 내용을 괄호에 묶어서 전달하는 방법으로 전달이 가능하다.
변수를 1개만 전달하는 것이 아니라 2개 이상도 가능하다.

export const home = (req, res) => res.render("home", {pageTitle: "Home", 변수2, 변수3});

위와 같은 방식으로 변수를 한 번에 여러 개 전달할 수 있다.

마무리

이번 시간에는 Pug의 기능 중 하나인 partials의 사용 방법과, Base 파일을 생성하여 extends로 중복 작성을 피하는 방법, 그리고 템플릿에 변수를 전달하는 방법을 알아보았다.

다음 시간에는 MVP Style의 적용 방법과 fakeuser를 통해 로그인의 여부에 따른 페이지의 변환 방법에 대해 알아보자.