[유튜브 클론 코딩] #5.0~5.9 Templates(템플릿)

#5.0 Returning HTML

 

HTML을 리턴하는 법

 

---

#5.1 Configuring Pug

 

템플릿 엔진. 뷰 엔진. 작성하면 자동으로 html으로 변환해준다.

아래의 코드로 뷰 엔진을 pug로 설정할 수 있다.

뷰는 유저가 보는 대상을 말한다.

app.set("view engine", "pug");

 

views 폴더 안에 pug 확장자 파일을 만들면 된다.

📂wetube

|----📂node_modules

|----📂src

|      |----📂views

|             |----📄home.pug

|      |----📂routers

|             |----📄globalRouter.js

|             |----📄userRouter.js

|             |----📄videoRouter.js

|      |----📄server.js

 

pug 작성법

• 모든 것은 소문자로 작성한다.
• 속성이 있으면 괄호 안에 작성한다.
• 모든 건 부모 속성보다 안 쪽에 있어야 한다.(2칸/4칸)
• 기본적으로 express는 cwd(현재 작업 디렉토리) + /views 에서 pug 파일을 찾는다.

 

Failed to lookup view "home" in views directory 에러

• 현재 작업 폴더는 node.js를 실행하는 폴더이다.(현재는 /wetube에 해당한다.)
• 루트 파일은 서버를 기동(where is starting the server)하는 파일의 위치에 따라 결정된다.
• 즉, 어디서 노드를 부르고 있는지에 따라 결정된다.
• 이는 바로 package.json이다.
• 우리가 wetube 안에 있는 package.json에서 node.js를 실행하고 있기 때문에 이 다렉토리가 현재 작업 디렉토리가 되는 것이다.

 

---

#5.2 Partials

 

위의 문제를 해결하는 방법은 default 값을 바꾸는 것이다.

아래의 코드를 추가하면 바꿀 수 있다.

app.set("views", process.cwd() + "/src/views");

 

partials

pug 의 include 기능을 통해 코드의 반복을 최소화할 수 있다.

  include partials/footer.pug

 

---

#5.3 Extending Templates

 

Inheritance(상속) - Extend

• 레이아웃(HTML)의 베이스 
• 모든 파일이 그 베이스로부터 확장해나감

Block

• 무언가를 집어 넣을 수 있는 곳
• block content -> content를 위한 공간이 마련됨

 

---

#5.4 Variables to Templates

 

템플릿으로 어떻게 변수를 보낼까? html을 렌더링하는 녀석을 찾아가야 한다.

render는 2가지 인수를 받는다. 하나는 view의 이름이고, 하나는 템플릿에 보낼 변수다.

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

 

 

---

#5.6 MVP Styles

 

MVP

HTML 태그에 몇 가지 기본 스타일들을 입혀줌. 못생긴 채로 작업하기 싫을 때 씀!

 

---

#5.7 Conditionals

 

Conditionals

template에 조건식 쓰기

 

• =을 넣으면 "pageTitle"이라는 variable로 넘거가게 된다. h1은 오직 pageTitle의 값만 갖는다.

h1 = pageTitle
// h1 #{pageTitle}: variable을 text와 섞게 된다면 이렇게 적어야 한다.

 

---

#5.8 Iteration

 

Iteration

기본적으로 elements의 list를 보여주는 것. each X in Y

  each video in videos
    li=video
  // videos는 array

 

videoController.js에 아래와 같은 코드를 적는다.

export const trending = (req,res) => {
	const videos = [
    {
      title: "First Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Second Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Third Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
  ];
  return res.render("home", { pageTitle: "Home", videos });	// videos:videos라고 써도 같다.
};

videos라는 배열에 위의 정보를 저장한 것이다. 그리고 return res.render("home", {pageTitle:"Home", videos });를 통해서 home.pug 템플릿에 videos 변수를 보낼 수 있다. 

 

 

home.pug에 아래와 같은 코드를 적는다.

extends base.pug

block content
	ul
    	each video in videos
        	li=video // li #{video}
        else
        	li Sorry nothing found

videoController.js에 저장해 둔 videos 배열 안의 각 element에 대해서 list item을 만들어서, 자바스크립트 객체인 video를 그 안에 넣어주는 것이다. (여기서 video는 loop 상의 현재 값이므로 원하는 대로 바꿀 수 있다. 단 여기 videos는 Controller 부분의 videos와 같아야 한다.)

---

#5.9 Mixins

 

mixin

• partial이긴 한데 데이터를 받을 수 있는 partial
  • partial: HTML의 한 조각
• 블록은 같은 형태를 가지지만(똑같은 구조의 HTML 블록인데), 데이터는 바꿔줘야 할 때
• mixin은 똑똑한 partial이다.
  • 데이터를 받을 수 있는 일종의 미리 만들어진 HTML block
• 복붙은 최소화하되 똑같은 구조를 재사용하는 것이다.
• else 구문을 이용해서 배열이 비어있는 경우에 대처할 수 있다.

 

mixin 폴더 안에 video.pug라는 파일을 추가해 아래의 코드를 적는다.

mixin video(info) // video는 mixin의 이름. 괄호 안에는 mixin이 받게될 데이터 적음.
	div
      h4=info.title
      ul 
        li #{info.rating}/5.
        li #{info.comments} comments.
        li Posted #{info.createdAt}.
        li #{info.views} views.

그리고 home.pug 파일의 아래의 코드를 입력한다.

extends base.pug
include mixins/video

block content 
  h2 Welcome here you will see the trending videos
  each potato in videos
    +video(potato)	// video는 mixin의 이름. potato는 보내는 객체.
  else 
    li Sorry nothing found.

videos 안의 각각의 potato에 대해서, video라는 mixin을 호출해서 potato라는 정보 객체를 보내고 있는 것이다. potato는 video mixin 안의 info가 된다.

 

footer과 mixin 모두 include를 해야하는데, mixin은 사용하는 곳에 +를 더 붙여준다.

 

---

#5.10 Recap: Iteration & Mixin 

 

둘 다 자주 쓰인다.