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
을 확인한다.
해당 정보를 잘 전달해준다. (에러가 있다는데 현재는 에러가 안뜬다.)
Author And Source
이 문제에 관하여(Create Account #01), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0_cyberlover_0/Create-Account-01저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)