Nomad-Wetube-5) Templates

풀스택 유튜브 클론코딩 강의 #5.0 ~ 5.9 (230213)

1. Pug

Node.js 및 브라우저용 JavaScript로 구현된 고성능 템플릿 엔진

[장점]
1) 깔끔한 html을 작성하게 함
2) 자바스크립트를 html에 포함할 수 있음
3) 한 파일로 모든 템플릿을 업데이트 할 수 있음 (복붙x)

• return Html 태그로 작성 : 태그를 많이 사용할 때는 크기가 커서 return하기에 좋지않음

app.set("view engine", "pug") //express에서 이제 사용할 뷰 엔진은 pug라고 말해줘야함

• process. cwd() + '/views' : 현재 작업 디렉토리(node.js를 실행하는 디렉토리)에서 /views라는 디렉토리를 찾음
• 소문자로 작성, 속성은 괄호안에 작성
• 부모속성보다 안쪽에 있어야함 (들여쓰기로 구분)

2. res.render

view 화면을 랜더링하고 랜더링된 html을 클라이언트에 보내주는 역할.
res.render(view, [, locals][, callback])

res.send("home")
수정 => res.render("home") //home.pug를 렌더링한다

• 디렉토리를 찾지 못한다는 에러가 날때 : console.log(process.cwd())를 해서 현재 디렉토리를 확인
• node.js를 실행하는건 package.json, package.json은 src안에 있지 않다

app.set("views", process.cwd() + "/src/views") //디렉토리의 위치를 기준으로 views를 찾게 해주기

3. extends(확장), inheritance (상속)

• extends : 베이스가 되는 파일을 가져와서 그대로 사용
• inheritance : 상속은 block과 extends키워드를 통해 사용
• block : 확장한 템플릿 안에 내용을 넣을 수 있는 창문 or 문

[base.pug]

doctype html
html(lang="ko")
    head
        title #{pageTitle} | Wetube //템플릿에 보낼 pageTitle 변수
    body
        block content
    include partials/footer.pug

[videoController.js]

export const trending = (req, res) => res.render("home", {pageTitle: "Home"})
//render(view의 이름, 템플릿에 보낼 변수)

[watch.pug]

extends base.pug //base 확장

block content //템플릿마다 다르게 쓸 수 있음
    h1 Watch Video

4. MVP styles

html태그에 기본 스타일을 입혀줌
https://andybrewer.github.io/mvp/

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

Pug 변수 사용법

• html 태그 안에 하나의 속성만 넣는경우 (다른 텍스트 못씀)
  h1=pageTitle
• html 태그 안에 속성과 텍스트를 섞어서 쓰는경우
  title #{pageTitle} | Wetube

5. Conditionals (조건)

if, else, else if문을 활용
https://pugjs.org/language/conditionals.html

ul
	if fakeUser.loggedIn //fakeUser가 loggedIn 상태라면
		li 
			a(href="/logout") Log out ///logout 버튼 표시
	else
		li 
			a(href="/login") Login //그게 아니라면 login 버튼 표시

6. Iteration (반복)

리스트를 생성 (배열 또는 객체가 필요)
Pug는 두 가지 주요 반복 방법인 each및 while을 지원
https://pugjs.org/language/iteration.html

[videoController.js]

export const trending = (req, res) => {
	const videos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return res.render("home", { pageTitle: "Home", videos}) //array인 videos를 템플릿으로 보낸다
}

[home.pug]

block content
	h2 Welcome here
    ul
    	each video in videos //videos array 안의 각 요소에 대해서 
			li=video //list item을 만들어서 video를 그안에 넣어줌

• 여기서 else는 JS가 아닌 Pug!!

7. Mixins / Partials

• 반복되는 코드를 mixins, partials를 이용해 따로 관리할 수 있다.
• partial : 단순히 반복되는 코드를 위한 것
• mixins : 데이터를 받을 수 있는 똑똑한 partial

* partials 적용
[footer.pug]

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

[base.pug]

doctype html
html(lang="ko")
    head
        title #{pageTitle} | Wetube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css")
    body
        header
            h1=pageTitle
    include partials/footer

* mixins 적용
[video.pug]

mixin video(info) //mixin이 받게 될 데이터 info
    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
include mixins/video

block content
    h2 Welcome here you will see the trending videos
    each potato in videos //videos안의 각각의 potato에 대해서
        +video(potato) //video라는 mixin을 호출해서 poato라는 정보객체를 보냄
    else
        li Sorry nothing found.
```

**git commit**
https://github.com/dmswl2030/Newtube-repeat/commit/cfd8743b35c5a14105fb1352f9eea225b1b3e616