[Node.js] 유튜브 클론 02

👩‍💻 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다.

 

+ 이 시리즈의 첫 번째 글 👉 유튜브 클론 01

 

 

 

 

(2-18) Search Controller

이번에는 검색 페이지를 만들어 봅시다. 검색창은 헤더 안에 들어갈 거니 header.pug를 수정합니다.

 

/* header.pug */

header
  h1.title
    a(href=routes.home) #{siteName}
  div.search
    form(action=routes.search, method="get")
      input(type="text", placeholder="검색", name="term")
...

 

form의 action은 폼 데이터가 도착할 URL을 말합니다. 우린 search 페이지에서 검색 결과를 보여줄 거니까, locals에 저장된 routes.search를 연결합니다.

form의 method는 폼 데이터를 어떤 HTTP 메소드로 보낼 건지 정하는 건데요, 검색 등 단순 작업에는 주로 GET을 사용합니다.

 

GET은 URL에 폼 데이터를 추가하여 서버로 전달하기 때문에, 주소창 뒤에 데이터가 쫄래쫄래 붙어 나옵니다.

또 브라우저에 캐시되어 저장되며, 길이의 제한이 있다는 특징도 있어요.

 

input에 name을 명시하면 폼 데이터를 참조할 때 쓸 수 있어요. 한 번 시험해 보죠.

 

 

 

폼에 검색어를 입력 후 엔터를 뙇 쳤더니 주소창 뒤에 '?term=나나' 라고 표시되네요!

 

자, 그럼 이제 이 검색어를 화면에 보여주려고 합니다. '나나로 검색한 결과입니다' 이런 식으로 표시할 건데요, 이 검색어는 어떻게 알 수 있을까요? 음... 생각해보니 이건 사용자가 '요청'한 내용이군요. 따라서 reqest object 안에 들어있을 거 같네요.

얼른 콘솔에 찍어 확인해 봅니다.

 

/* videoConteroller.js */

export const search = (req, res) => {
  console.log(req);
  res.render("search", {
    pageTitle: "Search"
  });
};

 

콘솔에 찍었더니 어마어마한 오브젝트를 던져줬습니다 (크엌)

검색해보니 req.query 안에 { tem: 'HeyNana' } 형태로 들어있었네요. 이걸 search.pug에 넣어주면 되겠습니다. 넘길 이름은 searchTerm이라고 할게요!

 

/* videoController.js */

const searchTerm = req.query.term;
  res.render("search", {
    pageTitle: "Search",
    searchTerm: searchTerm
  });
};

/* search.pug */

extends layouts/main
block content
  .search__header
    h3 '#{searchTerm}'로 검색한 결과입니다.

 

위와 req.qeury.tem이라 써도 되지만, 난 뭔가 좀 더 까리하게 쓰고 싶다! 그럴 땐 이렇게 써볼 수도 있어요.

 

const { query: { term } } = req;

 

바로 이렇게요! 엌... 이건 ES6 문법인데, 엄청 쉽게 객체를 가져왔네요 뜨든.

그리고 이 가져온 애한테 이름을 붙일 수도 있어요.

const { query: { term : searchTerm } } = req;

 

그리고 searchTerm: searchTerm일 때 그냥 searchTerm이라고만 써도 알아서 인식합니다.

 

/* videoController.js */

export const search = (req, res) => {
  const { 
    query: { term: searchTerm }
  } = req;
  res.render("search", {
    pageTitle: "Search",
    searchTerm
  });
};

 

 

---

 

(2-19~20) HTML Forms

이제 폼이 필요한 몇 가지 페이지의 HTML을 작업합니다. 대애애충 뼈대만 만들어봐요!

예를 들면 아래처럼 프로필을 수정하는 페이지를 만들 수 있습니다.

 

/* editProfile.pug */

extends layouts/main
block content
  .editProfile
    h3 프로필 수정
    form(action=routes.editProfile, method="post")
      label(for="avatar") Avatar 
      input(type="file", id="avatar", name="avatar")
      input(type="text", name="userName", placeholder="이름을 입력하세요.")
      input(type="email", name="email", placeholder="이메일을 입력하세요." )
      input(type="submit", value="프로필 업데이트")
    a(href=`${routes.users}${routes.changePassword}`) 비밀번호 변경하기

 

이 경우에는 사용자 비밀번호처럼 중요한 정보가 들어오니 http 프로토콜이 POST 방식이여야겠죠?

대신 우리는 GET 방식에 대해서만 작성했기 때문에 지금은 동작하지 않을 거에요. 요건 나중에 수정해 줍시다.

 

이제 userController.js와 userRouter.js에 가서 이어주는 작업을 합니다.

 

/* userController.js */

export const editProfile = (req, res) => {
  res.render("editProfile", {
    pageTitle: "Edit Your Profile"
  })
};

/* userRouter.js */

import { editProfile } from "../controllers/userController";
userRouter.get(routes.editProfile, editProfile);

 

이런 식으로 페이지들을 쭉쭉 연결해주면 됩니다. 🔗

 

이때 주의할 점! userController.js를 작성할 때, editProfile → userDetail 순서대로 get() 시켜야 합니다.

만약 userDetail → editProfile 순대로 한다면, /:id 자리에 /edit-profile이 들어간다고 인식하기 때문에 editProfile 페이지가 나오지 않습니다.

 

/* routes.js */

// Users
const USERS = "/users";
const USERS_DETAIL = "/:id";
const EDIT_PROFILE = "/edit-profile";
const CHANGE_PASSWORD = "/change-password";

/* userRouter.js */

userRouter.get(routes.editProfile, editProfile);
userRouter.get(routes.userDetail, userDetail);

 

---

 

(2-21~22) Home Controller 

 

이번엔 가짜 DB 데이터를 만들어 화면에 보여주는 작업을 해볼게요!

db.js 를 생성 후, 아래처럼 가짜 데이터를 만들어 줍니다. 내용은 원하는 만큼 작성하세요~!

 

/* db.js */

export const videos = [{
    id: 1881,
    title: 'A Study in Scarlet',
    description: "I should like to meet him.",
    views: 28,
    videoFile: "https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm",
    creator: {
      id: 12345,
      name: "Nana",
      email: "nykim@nykim.net",
    }
}]

 

그리고 videoController.js 에 import하여 홈 화면에 넘겨줍니다.

 

/* videoController.js */

import {
  videos
} from "../db";

export const home = (req, res) => {
  res.render("home", {
    pageTitle: "Main",
    videos: videos  //videos 라고만 써도 돼요!
  });
};

 

그리고 home.pug로 넘어와 each문을 써서 데이터를 쫘악- 뿌려줍니다.

 

/* home.pug */

extends layouts/main
block content
  .videos
    h1 video
      each video in videos
        h2=video.title
        p=video.description

 

 

 

여기서 마쳐도 충분히 데이터를 잘 가져올 수 있지만, HTML 작업을 좀 더 효율적으로 해볼게요.

바로 pug의 mixin을 이용해서요 🤩

 

SASS에서 mixin을 써본 적이 있다면 짐작할 수 있겠지만, 반복되는 코드를 담고 있기 때문에 필요할 때마다 불러 쓸 수 있습니다.

예를 들어, "<h1>나는 나나다!</h1>"라는 HTML을 매번 써야한다면 mixin nana()를 만들면 됩니다.

한 번 시험해보죠! 우선 views/ 폴더 내에 mixins/ 폴더를 만듭니다.

 

그리고 이름을 nanaTitle.pug로 짓고 아래처럼 작성합니다.

/* nanaTitle.pug */

mixin nanaTitle()
  h1="나는 나나다!"

 

이걸 쓰려면 include로 가져오면 됩니다. home.pug에서 시험해 볼게요.

 

/* home.pug */

extends layouts/main
include mixins/nanaTitle

block content
  +nanaTitle

 

그리고 localhost:4000에 접속하면 잘 가져와서 쓴 걸 볼 수 있습니다.

 

 

본론으로 돌아가서 원래 하려던 작업을 계속 진행해 봅시다.

홈 화면에서는 비디오 정보를 보여줄 건데요, 이것에 대한 mixin이 있으면 작업이 참 편할 것 같습니다.

그럼 아까처럼 mixins/ 폴더 내에 videoBlock.pug를 만들면 되겠죠?

 

/* videoBlock.pug */

mixin videoBlock()
  .videoBlock

 

이번에는 mixin 내에 인자를 하나 넣을 거에요. 이름이 video인 빈 객체를 쏙 넣어줍시다.

 

/* videoBlock.pug */

mixin videoBlock(video = {})
  .videoBlock

 

그리고 이 객체로부터 받아온 프로퍼티를 뿌려줍시다.

 

/* videoBlock.pug */

mixin videoBlock(video = {})
  .videoBlock
    video(src=video.videoFile)
    h2=video.title
    p=video.description

 

위 코드가 이해 되시나요?

videoBlock이라는 mixin에 인자가 하나 입력되면, 그 인자의 이름을 video로 하겠다는 뜻입니다.

그리고 그 인자의 속성들(videoFile, title, description)을 가져와 보여주겠다는 거고요.

 

그럼 이제 이 HTML이 필요한 home.pug로 가서 include 해줍니다.

 

/* home.pug */

extends layouts/main
include mixins/videoBlock

block content
  .videos
    h1 비디오 목록
    each item in videos
      +videoBlock({
        title: item.title,
        description: item.description,
        videoFile: item.videoFile
      })

 

each문으로 videos내에 루프를 돌리고, 그 정보를 차곡차곡 가져와 mixin으로 넘겨주고 있는 모습입니다.

데이터가 스무스하게 흘러흘러 들어가는 모습을 보니 기분이 죠아요!

 

아참, 저는 여기서 문득 '응...? 근데 each item in videos에서 videos는 어디서 온 거지? include도 안 했는데?'라고 생각했는데요.

이는 home.pug를 렌더링하는 videoController.js에서 넘겨줬기 때문이었습니다.

넵. 이 글을 읽을 미래의 저에게 까먹지 말라고 적는 내용입니다 🙄

 

/* videoController.js */

import {
  videos
} from "../db";

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

 

 

여기까지 했으면 search.pug도 잠깐 손보고 갑시다.

검색을 완료했을 때 해당 페이지에도 비디오 목록을 뿌려줄 거잖아요? 따라서 videoBlock을 불러와 쓸 수 있겠네요.

 

 

/* videoController.js */

export const search = (req, res) => {
  const {
    query: {
      term: searchTerm
    }
  } = req;
  res.render("search", {
    pageTitle: "Search",
    searchTerm,
    videos
  });
};

/* search.pug */

extends layouts/main
include mixins/videoBlock

block content
  .search__header
    h3 '#{searchTerm}'로 검색한 결과입니다.
  .search__video
    each item in videos
      +videoBlock({
        title: item.title,
        description: item.description,
        videoFile: item.videoFile
      })

 

아아아아주 죠아요오

 

---

 

(2-23) Join Controller 

 

 

이번에는 Join 쪽을 건드려 볼게요. userController.js로 들어갑니다.

기존에 있던 Join을 getJoin으로 이름을 바꾸고, POST에 대한 postJoin도 만듭니다.

 

/* userController.js */

export const getJoin = (req, res) => {
  res.render("join", {
    pageTitle: "Join"
  })
};

export const postJoin = (req, res) => {
  res.render("join", {
    pageTitle: "Join"
  })
}

 

getJoin은 /join 페이지로 GET 요청이 왔을 때 보여주고,

postJoin은 /join 페이지 내에서 폼 전송이 이뤄졌을 때(=POST 요청이 왔을 때) 보여주면 되겠네요.

 

좋아요, 그럼 globalRouter로 가서 연결시켜 줍니다.

 

/* globalRouter.js */

import {
  getJoin,
  postJoin
} from "../controllers/userController";

globalRouter.get(routes.join, getJoin);
globalRouter.post(routes.join, postJoin);

 

회원가입 버튼을 눌렀을 때, 가입이 완료됐다고 가정하고 홈화면으로 보내는 코드를 추가하겠습니다.

이때 비밀번호와 비밀번호 재입력 두 폼의 내용이 같은지 아닌지 판단이 필요한데요, req에 딸려오는 정보를 보면 될 것 같습니다.

넵, 요 정보는 req.body에서 확인할 수 있어요!

 

/* userController.js */

export const postJoin = (req, res) => {
  console.log(req.body);
}

 

 

이걸 const bodyInfo = req.body 이렇게 가져와 bodyInfo.userName, bodyInfo.email와 같이 쓸 수도 있지만,

const { body: {} } = req;처럼 효율적으로 쓰면 좋을 것 같아요!

 

/* userController.js */

//...

export const postJoin = (req, res) => {
  const { body: { userName, email, password, password2 } } = req;
}

 

그렇다면 이걸 가지고 password !== password2 인지 확인하면 되겠네요.

만약 일치하지 않는 경우엔 에러 코드 400을 넘겨주자고요. res.status()를 쓰면 됩니다.

그럼 브라우저는 "앗 에러당!"하고 비밀번호 저장 메시지 같은 걸 묻지 않을 거에요.

 

/* userController.js */

//...

export const postJoin = (req, res) => {
  const { body: { userName, email, password, password2 } } = req;
  if (password !== password2) {
    res.status(400)
  }
}

 

만약 일치한다면 home 화면으로 리다이렉트 해줄 거에요. routes를 import한 뒤, res.redirect()를 써줍니다.

 

/* userController.js */

import routes from "../routes";

//...

export const postJoin = (req, res) => {
  const { body: { userName, email, password, password2 } } = req;
  if (password !== password2) {
    res.status(400)
  } else {
    res.redirect(routes.home)
  }
}

 

이제 폼에 알맞게 입력 후 회원가입 버튼을 누르면 홈 화면으로 슈슝 이동하게 됩니다.

 

 

 

---

 

(2-24) Log In and User Profile Controller 

 

 

Join과 마찬가지로 로그인에 대한 것도 getLogin과 postLogin으로 나누어 작성합니다.

/* userController.js */

//...

export const getLogin = (req, res) => {
  res.render("login", {
    pageTitle: "Login"
  })
};

export const postLogin = (req, res) => {
  console.log("로그인 성공!");
  res.redirect(routes.home);
}

//...

/* globalRouter.js */

//...

import {
  //...
  getLogin,
  postLogin
} from "../controllers/userController";

globalRouter.get(routes.login, getLogin);
globalRouter.post(routes.login, postLogin);


//...

 

 

한편, 로그인 됐을 때는 헤더에 다른 메뉴를 보여줘야 합니다. 업로드, 프로필 확인, 로그아웃 같은 기능을 써야 하니까요.

header.pug로 가서 조건문을 작성합니다.

 

/* header.pug */

header
  h1.title
    a(href=routes.home) #{siteName}
  div.search
    form(action=routes.search, method="get")
      input(type="text", placeholder="검색", name="term", value=searchTerm)
  ul
    if !user.isAuthenticated
      li
        a(href=routes.login) Login
      li
        a(href=routes.join) Join
    else
      li
        a(href=`/videos/${routes.upload}`) Upload
      li
        a(href=routes.userDetail) Profile
      li
        a(href=routes.logout) Logout
  hr

 

저기에 있는 user.isAuthenticated는 아직 존재하지 않는 변수입니다.

middleware.js로 가서 임의로 작성해 줍니다. 로그안한 셈 치자는 거죠 😛

 

/* middleware.js */


export const localsMiddleware = (req, res, next) => {
  //...
  res.locals.user = {
    isAuthenticated: true,
    id: 12345
  }
  //...
}

 

 

짜잔- 메뉴가 바뀐 걸 볼 수 있습니다.

 

 

다만 이 상태에서 Profile 링크를 누르면 localhost:4000/:id 로 이동하게 됩니다.

아까 우리가 임의로 넣어뒀던 locals.user.id를 연결시키는 작업을 해야 합니다.

 

routes.js로 가서 userDetail 부분을 함수로 바꿉니다. 인자가 들어오면 /users/${인자}를 리턴하는 함수입니다.

 

/* routes.js */

const routes = {
  //...
  userDetail: (id) => {
    if (id) {
      return `/users/${id}`;
    }
  }
 }

 

인자가 없다면, 기존대로 /:id 가 들어가게 해줍시다.

 

/* routes.js */

const routes = {
  //...
  userDetail: (id) => {
    if (id) {
      return `/users/${id}`;
    } else {
      return USERS_DETAIL;
    }
  }
 }

 

이렇게 하면 인자로 "nana"를 넘겼을 경우 /users/nana 로 routes가 설정되겠죠?

locals에 넣어둔 user.id와 연결시켜줍니다.

 

/* header.pug */

header
  //...
    li
      a(href=routes.userDetail(user.id)) Profile

 

마지막으로 userRouter.js로 가서 함수로 바뀐 userDetail을 실행시켜 줍니다.

 

/* userRouter.js */

userRouter.get(routes.userDetail(), userDetail);

이제 Profile 메뉴를 누르면 알아서 짜잔 잘 이동하는 걸 볼 수 있어요.

 

물론 주소창에 /users/121212이나 /users/nananana 이런 식으로 직접 쳐도 여전히 잘 동작합니다.

왜냐하면 인자 없이 userRouter.get(routes.userDetail(), userDetail);가 실행됐으니, /users/:id로 들어온 셈이 되거든요.

 

 

 

---

 

 

 

(2-25) More Controllers

 

 

userDetail과 비슷하게 videosDetail도 /:id를 받으니 아까처럼 수정하면 될 것 같습니다.

 

/* routes.js */

const routes = {
  //...
  videoDetail: (id) => {
    if (id) {
      return `/users/${id}`;
    } else {
      return USERS_DETAIL;
    }
  }
 }

/* videoRouter.js */

videoRouter.get(routes.videoDetail(), videosDetail);

 

 

그리고 비디오 목록을 눌렀을 때 videosDetail로 이동하게 합니다.

videoBlock.pug로 가서 a 태그로 감싸주는데, 이때 video.id를 인자로 넘겨줍니다.

그러려면 mixin을 불러와 쓸 때도 id값을 넘겨줘야겠죠? id:item.id로 전달하면 되겠습니다.

 

/* videoBlock.pug */

mixin videoBlock(video = {})
  .videoBlock
    a(href=routes.videoDetail(video.id))
      video(src=video.videoFile)
      h2=video.title
      p=video.description
    

/* home.pug */

extends layouts/main
include mixins/videoBlock

block content
  .videos
    h1 비디오 목록
    each item in videos
      +videoBlock({
        title: item.title,
        description: item.description,
        videoFile: item.videoFile,
        id: item.id
      })

 

 

이번엔 로그아웃 차례입니다. 이 경우엔 처리가 끝나면 홈 화면으로 리다이렉트 시키면 되겠네요.

우선은 res.redirect(routes.home);만 작성하고, 상세 기능은 뒤에서 작업하겠습니다.

 

/* userController.js */

export const logout = (req, res) => {
  //TODO: 로그아웃 기능 구현
  res.redirect(routs.home);
}

 

 

그 다음엔 남은 건... 아, 비디오 업로드가 있었군요.

이것도 GET과 POST 둘 다 요청이 있을 테니, 컨트롤러에서 두 개로 나누어줍니다.

 

/* videoController.js */

export const getUpload = (req, res) => {
  res.render("videosUpload", {
    pageTitle: "Upload your video"
  })
}

export const postUpload = (req, res) => {
  res.render("videosUpload", {
    pageTitle: "Upload your video"
  })
}

//...

/* videoRouter.js */

//...
import {
  getUpload,
  postUpload,
  //...
} from "../controllers/videoContoller"
const videoRouter = express.Router();

videoRouter.get(routes.upload, getUpload);
videoRouter.post(routes.upload, postUpload);

/* videosUpload.pug */

extends layouts/main
block content
  .video-upload
    h3 비디오 업로드
    form(action=routes.postUpload, method="post")
      input(type="file", name="videoFile")
      input(type="text", name="videoTitle", placeholder="제목")
      input(type="textarea", name="videoDesc", placeholder="설명")
      input(type="submit", value="업로드")

 

 

자, 이제 postUpload()에 대한 보완이 필요하겠군요.

조금 전에 postJoin()에서 req.body로 정보를 가져왔던 것과 비슷하게 하면 돼요.

 

/* videoContoller.js */

import routes from "../routes";

export const postUpload = (req, res) => {
  const {
    body: {
      videoFile,
      videoTitle,
      videoDesc
    }
  } = req;
  res.redirect(routes.home)
}


//...

 

크으 뭔가 슈슈슝 잘 이동하는 걸 보니 뿌듯하네요 😚

지금까지는 가짜 데이터로 작업을 했지만, 다음부터는 진짜! 레알! DB를 갖고 작업해 보겠습니다.

 

다음 글에서 만나요! (어.. 언젠가 옵니다!)