📝 오늘 한 것

1. 템플릿 확장 - extends / block

2. 템플릿에 변수 전달하기 - #{변수} / =변수 / res.render()

3. 조건문 / each 문 / mixins

📚 배운 것

1. templates

어제 공부에서 이어서
pug 템플릿 엔진 배우는 중
일단 시작 전에 edit.pug 파일도 추가한 후 res.render("edit")까지 한 상태

3) 템플릿 확장

앞서 include를 이용해 pug 파일을 만들었지만 여전히 반복되는 부분이 있다.
home.pug와 see.pug 파일의 상당 부분이 반복된다.
이를 개선하기 위해 상속 및 확장을 사용할 수 있다.

(1) extends

베이스가 될 파일로 base.pug를 만든다.

doctype html
html(lang="ko")
  head
    title Wetube
  body
    h1 Welcome to Wetube
    include partials/footer.pug

다른 파일들(home.pug, see.pug, edit.pug)은 base.pug 파일을 확장(extends)해 만든다.

extends base.pug

이제 모든 파일들은 base.pug 파일을 상속한다.
그러나, 이렇게만 하면 모든 파일이 같은 내용을 가지게 된다.
파일마다 다르게 표시될 부분을 채워넣는 방법이 필요하다.

cf. pug 안에서 extends 혹은 include 사용시 .pug는 생략해도 된다.

(2) block

일종의 창문 같은 것으로 이 안에 서로 다른 내용을 채워넣을 수 있다.

💡 base.pug 파일에 block 만들기

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

base.pug 파일에 head와 content라는 block을 위한 공간이 마련되었다.

💡 base.pug 파일을 상속한 파일의 block에 내용 채워넣기

extends base.pug

block head 
  title Home | Wetube

block content 
  h1 Home

extends base.pug

block head 
  title See | Wetube

block content 
  h1 See Video

extends base.pug

block head 
  title Edit | Wetube

block content
  h1 Edit Video

이제 각각의 파일들은 base.pug 파일을 상속하면서도 각자 다른 부분들을 가진다.
그러나, 여전히 title 태그와 | wetube 텍스트가 반복되고 있어 개선이 필요하다.

4) 템플릿에 변수 전달하기

(1) #{변수}

위의 문제를 해결하기 위해 ~pug 파일의 block head 부분을 모두 삭제한 후 base.pug 파일을 아래와 같이 수정한다.

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

배운대로라면 #{ } 안에는 자바스크립트 코드가 와야 한다.
그러나 pageTitle은 그 자체로 값을 가지는 코드가 아닌 변수이기 때문에 템플릿에 해당 변수의 값을 보내줘야 한다.

(2) res.render("view의 이름", {템플릿에 보낼 변수들})

렌더링을 하는 것은 controller 함수이므로 controller 함수에 템플릿으로 보내고 싶은 모든 변수를 추가한다.

우선, videoController.js 파일의 trending controller를 수정해보자.

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

이제 localhost:4000 으로 들어가면 title란에 Home | Wetube 라고 뜬다.
백엔드로부터 변수의 값을 받아와서 프론트엔드에서 랜더링한 것이다.

5) 조건문(Conditionals)

이번에는 템플릿에서 조건문을 사용하는 방법을 배워보고자 한다.

들어가기 전에 잠깐, 간단하게 CSS를 입히고 가자.

💡 MVP.css

MVP란 HTML 태그에 몇 가지 기본 스타일을 입혀주는 미니멀리스트 스타일시트를 말한다.

base.pug

doctype html
html(lang="ko")
  head
    title #{pageTitle} | Wetube
    link(rel="stylesheet" href="https://unpkg.com/mvp.css") <!-- MVP.css 적용 -->
  body
    main <!-- 가운데 정렬 -->
      block content
    include partials/footer.pug

home.pug

extends base.pug

block content
  h1 Home
  input(placeholder="What's your name?") <!-- 예시로 추가한 것 -->
  button send <!-- 〃 -->

(1) =변수

앞서 태그에 변수 값을 넣는 방법으로 #{변수}를 배웠다.

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

그러나, 태그에 하나의 변수 값만 경우라면 =변수 라고 쓸 수도 있다.

doctype html
html(lang="ko")
  head
    title #{pageTitle} | Wetube
    link(rel="stylesheet" href="https://unpkg.com/mvp.css")
  body
    header
      h1=pageTitle <!-- 추가 -->
    main
      block content
    include partials/footer.pug

(2) pug 파일에서 조건문 사용하기

home.pug 파일의 header에 nav를 추가해 login과 log out 링크를 만든다.
user가 로그인 상태라면 log out 링크를, 로그아웃 상태라면 login 링크를 보여줘야 한다.
이를 위해 조건문을 사용할 수 있다.

우선, 예제를 위해 가짜 유저를 만들어야 한다.

/(Home)에 들어갈 시 실행되는 trending controller 함수가 있는 videoController.js 파일에 가짜 유저 객체를 만든 후 이를 home.pug 파일에 보낸다.

videoController.js

const fakeUser = {
  username: "Syong",
  loggedIn: "false" // 로그아웃 상태
}

export const trending = (req, res) => res.render("Home", { pageTitle: "Home", fakeUser: fakeuser });
// 그냥 fakeUser이라고만 써도 됨

base.pug 파일에서 조건문을 작성한다.

base.pug

doctype html
html(lang="ko")
  head
    title #{pageTitle} | Wetube
    link(rel="stylesheet" href="https://unpkg.com/mvp.css")
  body
    header
      if fakeUser.username 
        small Hello #{fakeUser.username}
      nav
        ul
          if fakeUser.loggedIn
            li 
              a(href="/users/logout") Log out
          else
            li 
              a(href="/login") Login
      h1=pageTitle
    main
      block content
    include partials/footer.pug

이제 설정한 조건에 맞게 링크가 보이게 된다.

예제를 위한 코드였으므로 관련 코드를 모두 지워줬다.

6) 반복문(Iteration)

pug - Iteration 참고

앞에서는 문자열을 값으로 가지는 변수를 HTML로 전달하는 방법을 배웠다.
그렇다면 문자열 대신 배열을 전달하려면 어떻게 해야 할까?
이 문제에 답하려면 Iteration에 대해 배워야 한다

iteration는 기본적으로 list의 모든 elements를 HTML에 보여준다.

(1) each 문

우선, 예제를 위해 가짜 비디오 배열을 만들어야 한다.

/(Home)에 들어갈 시 실행되는 trending controller 함수가 있는 videoController.js 파일에 가짜 비디오 배열을 만든 후 이를 home.pug 파일에 보낸다.

videoController.js

export const trending = (req, res) => {
  const videos = [1, 2, 3, 4, 5, 6, 7, 8];
  res.render("Home", { pageTitle: "Home",  videos });
}

home.pug 파일에 배열을 값으로 가지는 변수를 만든다. (each ~ in ~)
pug는 배열에 값이 있는지 없는지 체크한 후에 있다면 배열의 각 요소들을 보여주고, 없다면 따로 설정한 내용을 보여준다. (else ~)

home.pug

extends base.pug

block content
  h1 Welcome here you will see the trending videos
  ul 
    each video in videos
      li=video
    else
      li sorry nothing found

💡 객체를 iterate 한 경우

videoController.js

export const trending = (req, res) => {
  const videos = [ // 수정
    {
      title: "a"
    },
    {
      title: "b"
    },
    {
      title: "c"
    }
  ];
  return res.render("Home", { pageTitle: "Home", videos });
}

home.pug

extends base.pug

block content
  h1 Welcome here you will see the trending videos
  ul 
    each video in videos
      li=video.title <!-- 수정 -->
    else
      li sorry nothing found

💡 만약 Cannot read property 'length' of undefined 라는 에러가 나온다면, each x in y 에서 y가 undefined 라는 뜻이다.

(2) Mixins

🔎 partials와 mixin의 차이점

전에 만들었던 footer.pug 파일은 HTML의 한 조각으로서 데이터를 받지는 못하는 partial이다.
똑같은 코드를 반복하지 않기 위해 만든 것으로 페이지가 바뀌어도 내용은 바뀌지 않는다.

반면에, Mixins는 데이터를 받을 수 있는 partial이다.
즉, 형태는 같지만 서로 다른 데이터가 반복해서 등장하는 HTML 블록을 뜻한다.

🔎 component

videoController.js

• videos 배열 안의 객체를 좀 더 복잡하게 수정했다.

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

home.pug

• home.pug 파일을 확장했다. 각각의 video에 div를 만들어 이 div 안에 정보를 담도록 수정했다.

extends base.pug

block content
  h1 Welcome here you will see the trending videos
  each video in videos 
    div 
      h4=video.title
      ul 
        li #{video.rating}/5.
        li #{video.comments} comments.
        li Posted #{video.createdAt}.
        li #{video.views} views.
  else
    li sorry nothing found

이를 어느 곳에서나 재사용 가능한 component라고 한다.

예를 들어, 유튜브에 들어가면 흔히 볼 수 있는 썸네일, 제목, 조회수 등의 video block이 이에 해당한다. 직접 영상을 볼 때도 보이고 추천 영상란에도 보인다. 그 외 연관 동영상이나 다른 사람의 프로필을 눌러 뜬 영상에도 이와 똑같은 것들을 보여줘야 한다.

이처럼 형태는 같지만 데이터는 서로 다른 HTML 블록을 여러 페이지에서 보여주고 싶을 때, UI component를 이용할 수 있다. 복붙은 최소화하면서 똑같은 형태를 사용하려는 것이다.

🔥 Mixin 만들기 🔥

views 폴더 안에 mixins 폴더를 만든 후, 그 안에 video.pug 파일을 추가한다.

video.pug

mixin video(info)
  div 
    h4=info.title
    ul
      li #{info.rating}/5.
      li #{info.comments} comments.
      li Posted #{info.createdAt}.
      li #{info.views} views.

여기서 video는 mixin의 이름이다
mixin video는 info 객체를 받는다. ( 앞에서는 video로 적었지만 video가 너무 반복돼서 info로 고침 )
info는 mixin video가 받게 될 데이터를 저장한다.

div부터 시작되는 코드는, info에 의거하여 얻게 되는 HTML 코드이다.
즉, mixin video는 HTML 코드를 return 하는 함수이다.

🔥 Mixin 사용하기 🔥

home.pug 파일을 수정한다.

home.pug

extends base.pug
include mixins/video.pug

block content
  h1 Welcome here you will see the trending videos
  each potato in videos 
    +video(potato)
  else
    li sorry nothing found

home.pug 파일에 mixins/video.pug 파일을 가져온다.
videos(배열) 안의 각각의 potato(객체)에 대해서, video mixin을 호출하여 potato를 video mixin에 보낸다.
video mixin은 potato를 받으면서 video.pug 파일에 작성한 대로 potato 즉, info의 모든 정보에 접근해 HTML 코드를 return 한다.

이 mixin은 어디에서든 쓸 수 있다.
즉, 해당 HTML 코드는 어디서든 재사용할 수 있다.

2. 에러 해결

(1) 에러 내용

Error: listen EADDRINUSE: address already in use :::4000

VS code 확장 프로그램을 설치하는 중에 node.js가 비정상적으로 종료되었다.
그 다음부터 위와 같은 에러가 뜨면서 연결이 안됐다.

(2) 해결 방법

서버를 종료한다.
wsl에서 4000 포트를 사용 중인 프로세스 목록을 확인한다.
서버가 열려있지도 않은데 4000 포트를 차지하고 있는 프로세스가 있을 것이다.

lsof -i :4000

해당 프로세스를 강제 종료한다.

kill -9 [PID]

다시 서버를 연다. 정상 작동된다.

✨ 내일 할 것

1. 강의 계속 듣기