[유튜브 클론코딩] 2.23 Join Controller

2.23 Join Controller

search화면 작업하기(home화면과 유사함)

이제 다음으로 search 화면을 작업할 것이다. search도 home 화면과 거의 비슷하다. 일단은 비디오 검색 기능을 구현하지는 않겠다.(데이터베이스를 아직 안했기 때문에)

 

videoController.js에서 search에 videos(데이터베이스)를 전달해준다.

search.pug도 똑같이 작업해준다.(mixin을 include해서)

export const search = (req, res) => {

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

};

↑ videoController.js

 

extends layouts/main

include mixins/videoBlock

block content 

    .search__header

        h3 Searching for: #{searchingBy}

    .search__videos 

        each video in videos

            +videoBlock({

                title: video.title,

                views: video.views,

                videoFile: video.videoFile

            })

↑ search.pug

 

Join 화면 만들기

다음은 Join 화면을 바꿔볼 것이다. userController에 가서 수정한다.

Join 화면에서 Full Name, email, password, verify password를 입력하고 join을 클릭하면, '

Cannot POST /join (/join으로 POST할 수 없습니다)'라는 에러가 보일 것이다.

이것은 /join 경로로 POST하기 위한 설정이나 코드가 없기 때문이다.

원래 있던 join을 getJoin으로 이름을 바꾸고 그리고 postJoin 이라는 함수를 추가한다. 여기에는 다른 method를 적용할 것이다.

 

export const getJoin = (req,res) =>{

    res.render("join", {pageTitle: "Join"});

}

export const postJoin = (req,res) =>{

    console.log(req.body);

    res.render("join", {pageTitle: "Join"});

}

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

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

export const userDetail = (req,res) => res.render("userDetail", {pageTitle: "User Detail"});

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

export const changePassword = (req,res) => res.render("changePassword", {pageTitle: "Change Password"});

↑ userController.js

 

import express from "express";

import { getJoin, login, logout, postJoin } from '../controllers/userController';

import { home, search } from '../controllers/videoController';

import routes from "../routes";

const globalRouter = express.Router();



globalRouter.get(routes.join, getJoin);

globalRouter.post(routes.join, postJoin);



globalRouter.get(routes.home, home);

globalRouter.get(routes.search, search);

globalRouter.get(routes.login, login);

globalRouter.get(routes.logout, logout);



export default globalRouter;

↑ globalRouter.js를 수정한다.

 

이렇게 한 다음 console.log를 확인해보면 console.log(req.body)라고 해놨기 때문에

이렇게 잘 뜨는 것을 볼 수가 있다. form에서 전송한 데이터를 받고 있는 것이다.

만약 그런데 bodyParser를 삭제하고 코드를 실행하면 body가 없다고 뜰것이다. 사용자가 전송한 정보를 알 수 없다. 그래서 bodyParser를 쓰는 것이다.

 

export const postJoin = (req,res) =>{

    // console.log(req.body);

    const{

        body:{name, email, password, password2}

    } = req;

    res.render("join", {pageTitle: "Join"});

}

↑ userController.js

 

우선 password와 password2가 같은지 체크해야 한다. 다르다면 가입시킬 수 없다.

가짜 액션이지만 그래도 체크할 것이다. 만약 password와 password2가 다르다면 잘못되었다는 상태 코드(status code)를 전달할 것이다.

상태 코드(status code)는 인터넷이 서로 어떻게 상호작용하는지 표시하는 것이다.

 

export const postJoin = (req,res) =>{

    // console.log(req.body);

    const{

        body:{name, email, password, password2}

    } = req;

    if(password !== password2){

        res.status(400);

    }

    res.render("join", {pageTitle: "Join"});

}

↑ userController.js

만약 password와 password2가 같지 않다면 status code 400을 전달할 것이다. 400은 잘못된 요청이라는 뜻이다

실행해보면 아무것도 되지 않는 것을 볼 수 있다. 400코드가 전달되었기 때문

사용자의 비밀번호가 잘못되었다면, 400으로 상태코드를 등록해두고 다시 join 화면을 render할 것이다.

 

export const postJoin = (req,res) =>{

    // console.log(req.body);

    const{

        body:{name, email, password, password2}

    } = req;

    if(password !== password2){

        res.status(400);

        res.render("join", {pageTitle: "Join"});

    }else{

        //To Do: Register User

        //To Do: Log User In

        res.redirect(routes.home);

    }

}

↑ userController.js

if else문 설명을 해보자면 if 비밀번호 두개가 같지 않다면 400 상태코드를 보내고 join 페이지를 render해준다. else(비밀번호 두개가 같다면) home화면을 redirect해준다.(나중에는 사용자도 등록해야 하고 사용자를 로그인도 시켜야 한다.)

 

이러고 이제 실행해보면, 비밀번호 두개가 같다면 홈화면으로 이동하게 되고 크롬에 비밀번호가 저장이 된다.