brunch

You can make anything
by writing

C.S.Lewis

by 이종복 May 27. 2019

Join controller

이 글에서는 다음과 같은 3가지 주제를 다루겠습니다. 


1) Search 페이지에서 Video 띄우기 

2) 회원가입을 하면 자동으로 로그인하고, 로그인 정보 전송하기 

3) 회원가입시 비밀번호와 비밀번호확인이 다르면 Join에 남아있고, 

     같으면 home으로 이동하기 




1) Search 페이지에서 Video 띄우기 


1) search.pug에 다음 코드를 추가한다. 

    다음 코드의 추가를 통해서 search 페이지에서 video를 띄울 수 있다.  


2) 다음과 같이 home에서 hello를 검색하면,

    search 페이지로 이동하고 video가 뜨는 것을 확인할 수 있다.  





2) 회원가입을 하면 자동으로 로그인하고, 

    로그인 정보 전송하기 


1) 현재 join페이지에서 이름, 이메일 주소, 비밀번호 등을 입력하고, Join Now를 클릭하면,

    /join으로 POST할 수 없다는 메시지가 뜰 것이다. 

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


2) 이를 수정하기 위해, 우선 userControllers.js로 이동해서, 

    const join을 const getJoin으로 수정하고,

    const postJoin을 추가한다. 


3) 다음은 globalRouter.js로 이동해서 

     globalRouter.get(routes.join, getJoin)

     globalRouter.get(routes.join, postJoin)을 추가하고

     userControllers.js에서 import한다. 


4)이제 Join 페이지에서 이름, 이메일, 비밀번호, 비밀번호 확인을 입력하면,  


5) 다음과 같이 정보가 전송되는 것을 확인할 수 있다. 

     다만, Visual Studio Code에서 다음 정보를 확인하려면, 

     userControllers.js의 postJoin 상수에 console.log(req.body)를 추가해야 한다. 




3) 회원가입시 비밀번호와 비밀번호확인이

     다르면 Join에 남아있고, 

     같으면 home으로 이동하기 




1) 코드는 다음과 같다. 

     나눠서 설명하자면,

     (1) import routes from "../routes";

         는 else 파트에서 routes.home을 하므로 필요하다. 

         자세한 건 else 파트 설명에서 보도록 하자. 

     (2)const {

            body: { name, email, password, password2}

          } = req; 은 앞의 req.body를 ECMAscript6 형식으로 나타낸 것이다.

     (3)if(password !==password2){

            res.status(400);

            res.render("Join", {pageTitle: "Join"}

          } 은,

          password와 password2가 일치하지 않으면 400이라는 코드를 전달하고,  

          Join 페이지에 남아 있으라는 의미다. 

          여기서 400은 잘못된 요청이라는 뜻이다.

      (4) else{

                res.redirect(routes.home);

            은 만약 password와 password2가 같으면

            Home 페이지로 리다이렉트 하라는 의미이다.  



2) 이제 Join페이지에서 비밀번호와 비밀번호 확인을 다르게 입력하면, 

     아래와 같은 결과를 얻게 되고, 


3) 비밀번호와 비밀번호 확인을 같게 입력하면, 

     home페이지로 이동하는 것을 확인할 수 있다. 

  


"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."

매거진의 이전글 home에 video 만들기(2)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari