Create Account #01

이번에는 계정을 생성하는 페이지를 만들어 보겠다.

이전 파트에서는 Mongoose,Mongo, schema 이런 것들을 다뤄 봤다.

이번에는 user을 다뤄 보겠다. 유저를 다룰 때는 이전에 배웠던 내용들을 많이 써먹을 거다.

Mongoose,schema 등등 다 써볼 거다. 그리고 여기에 인증(Authentication)도 추가해 볼거다.

유저가 로그인 하는걸 구현해 보면서 로그인이 어떤 의미를 가지고 있는지 알아 보겠다.

그리고 어떻게 로그인한 유저를 기억하게 만들 수 있는지도 알아 볼거다.

GitHub로 로그인 하는것도 구현해 볼거다. 소셜 로그인을 어떻게 구현 하는지에 대해 알아보는 거다.

대부분 소셜 로그인은 비슷한 패턴으로 구현되니깐 깃허브로 로그인을 예로 들어서 이해 하도록 한다.

그러니까 이메일, 비밀번호로 로그인하는거랑 깃허브 로그인을 구현해 볼거다.

이제 유저로 CRUD를 구현해 볼건데 생성,조회,수정,삭제를 하는거다.

그리고 비밀번호를 어떻게 만드는지도 알아 보겠다. 이 모든걸 이전에 사용했던 내용들로 구현해 보겠다.

로그인 페이지에 양식을 넣고 회원가입 페이지에도 양식을 넣어서 POST 요청을 처리하는 방법도 알아본다.

그리고 비밀번호 체크도 알아 본다. 프로필 보는 것도 만들고,프로필을 수정 하는 것도 만든다.

이미 알고 있는 것들이 충분히 있고 추가로 이메일, 비밀번호, 세션까지 처리해 볼거다.

우선 User라는 모델을 만든다.

models폴더에서 User.js 새파일을 만들었다.

이것도 Video를 만들 때 했던 것처럼 똑같은 과정을 거쳐 만들어 볼거다.

가정 먼저 schema를 만들어서 Mongo와 Mongoose에 User가 어떻게 생겼는지 알려준 다음에

static을 만들고 모델을 export해볼거다.

import mongoose from "mongoose";

const userSchema = new mongoose.Schema({});

const User = mongoose.model("User", userSchema);
export default User;

먼저 mongoose를 import했다. 이렇게 User 모델을 만들었다.

물론 아직 schema를 만들지 않았다. 나중에 추가해 주도록 한다.

이제 init.js에서 User를 import한다.

import "./db";
import "./models/Video";
import "./models/User";
import app from "./server";

저렇게 해서 User를 추가해준다. 이제 여기서는 Video와 User를 import하고 있다.

그럼 이제 User는 어떻게 만들면 될까? 먼저 email은 필수일거다.

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  name: { type: String, required: true },
  location: String,
});

이렇게 추가 해 보았다. 그리고 unique는 딱 하나만 존재하게 하는거다.

같은 email을 가진 계정이 여러개이면 안되고 username도 같은 계정이 있으면 안된다.

이제 User를 만들었으니 template을 만들어 본다.

회원 가입을 할수 있는 URL을 만드는 거다. 이번에는 controllers폴더에 만들어 본다.

이미 존재하는 userController.js에 만들면 되겠다.

여기에 이미 join controller가 있으니 또 만들 필요는 없겠다.

여기서는 res.send("Join")을 하는 대신

export const join = (req, res) => res.render("createAccount");

이렇게 바꿔 준다. createAccount는 아직 없으니 view폴더에 createAccount.pug를 만들어 준다.

home에서 했던 것처럼 createAccount도 extends base를 쓴다.

extends base

base를 extends하면 pageTitle변수가 필요하니깐 변수를 전달한다.

export const join = (req, res) =>
  res.render("createAccount", { pageTitle: "Create Account" });

이제 navigation을 수정한다. "createAccount"로 link가 있으니

그 전에 globalRouter.js의 이름을 바꿔 준다.

rootRouter.js로 바꿔 주는게 좋을것 같다. global이라고 하면 사람들이 헷갈릴수 있다.

물론 안에 있는 코드도 변경해 준다. 이렇게 바꾸면 어플리케이션이 작동하지 않는다.

왜냐하면 globalRouter는 더이상 존재하지 않기 때문이다.

server.js에서도 globalRouter를 rootRouter로 바꿔 준다.

rootRouter에는 /join이 이미 만들어져 있다.

이제 base.pug의 navigation에 한가지 추가를 할건데

    body 
        header
            h1=pageTitle
            nav 
                ul 
                    li 
                        a(href="/videos/upload") Upload Video
                    li  
                        a(href="/") Home
                    li  
                        a(href="/search") Search
                    li 
                        a(href="/join") Join

이렇게 추가해 준다. 그리고 이제 작동하는지 확인해 보면 잘 작동한다.

join을 클릭하면 Create Account까지 나오고 있다.

join controller는 준비가 되었다.

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

join으로 다 수정해 준다. 파일 이름까지도 그렇게 하는게 통일성이 있고 좋다.

그런데 여기서 post요청을 보낼 거라는걸 알고 있다.

rootRouter.js에서

rootRouter.route("/join").get(join).post();

그러니깐 get("/join")을 하는 대신에 route("/join")으로 하고

이어서 get(join)을 쓰고 post를 위한 function은 이제 만들어야 한다.

function이름을 join으로 쓰지 않고 바꿔서 써본다. 전에 했던 방식대로 해본다.

join을 getJoin으로 바꾼다.

userController.js에서

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

그리고 postJoin이라는 새 function을 만든다.

function은 만들었지만 아직 아무 기능도 하지 않는다. 만든 postJoin을 저장하고

rootRouter.js에서

import { getJoin, postJoin, login } from "../controllers/userController";
rootRouter.route("/join").get(getJoin).post(postJoin);

getJoin,postJoin을 import한다. 그리고 getJoin,postJoin을 넣어 준다.

그러면 오류 없이 다 잘 작동 된다. postJoin의 기능을 만들기 전에 form을 먼저 만든다.

join.pug에서

extends base


block content 
    form(method="POST")
        input(name="name", type="text", requeired)
        input(name="email", type="email", requeired)
        input(name="username", type="text", requeired)
        input(name="password", type="password", requeired)
        input(name="location", type="text", requeired)
        input(type="submit", value="Join")

이렇게 만들어 준다. 그리고 가장 중요한건 name이 꼭 있어야 한다.

백엔드에서는 name이 없으면 쓸수가 없다.

이제 userController의 postJoin에서 테스트를 해본다.

userController.js에서

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

req.body를 console.log하고 res.end()를 써서 요청을 종료한다.

새로고침을 해보면 join이 잘 나온다. 값을 다 입력해 본다. 그리고 console을 확인한다.

해당 정보를 잘 전달해준다. (에러가 있다는데 현재는 에러가 안뜬다.)