[모두의 이력서_4일차] 회원가입 기능 만들기 (몽고디비에서)

백에서만 회원가입 기능을 구현하고자 합니다.

처음으로 혼자서 프론트부터 백까지 하는 프로젝트이다 보니 정확하지 않을 수 있습니다!

 

회원 가입 기능 만들기

---

1. Body-parser Dependency 설치하기

Body-parser Dependency를 이용해서 클라이언트에서 보내주는 이름, 이메일, 비번등을 받을 수 있습니다.

npm install body-parser --save

 

현재 server.ts

import express from "express";
const app = express();

const { User } = require("./models/User");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const mongoose = require("mongoose");
mongoose
  .connect(
    "mongodb+srv://아이디:비밀번호@modooresume.eodr2fw.mongodb.net/?retryWrites=true&w=majority",
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  )
  .then(() => console.log("MongoDB Connected..."))
  .catch((err: "empty") => console.log(err));

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.listen(5000, () => {
  console.log("server is running!");
});

전에 만든 User스키마를 사용할 예정이라 불러왔습니다.

 

2. Register Route 만들기

2-1. bodyParser 불러오고 옵션주기

// server.ts
const bodyParser = require("body-parser");

// bodyParser옵션을 줘야 된다.
// application/x-www-form-urlencoded 이렇게 된 데이터 분석해서 가져올 수 있게
app.use(bodyParser.urlencoded({extended: true}));

// application/json 타입으로 된 것을 데이터 분석해서 가져올 수 있게
app.use(bodyParser.json());

body-parser가 클라이언트에서 오는 정보를 서버에서 분석해서 가져올 수 있게 설정해 줍니다.

 

2-2. 회원가입 라우터 기본 틀 만들기

// 회원가입 라우터
app.post("/register", (req, res) => {
  // 회원 가입 할때 필요한 정보들을 client에서 가져오면 그것들을 데이터 베이스에 넣어준다.

  // 인스턴스 만들기
  const user = new User(req.body); // 정보들을 데이터베이스에 넣기
});

// req.body에는
{
    id: 'hello'
    password: '123'
}
// 이런식으로 들어있다.

bodyParser을 이용해서 req body로 클라이언트 정보들을 받습니다.

데이터를 req.body에 들어갈 수 있게 해주는 것은 bodyParser가 있기 때문에 가능합니다.

 

2-3. 데이터를 보낼때 성공 & 실패 전달하기

성공 시 200과 success: true, 실패 시 success: false, err를 보내줍니다.

// 회원가입 라우터
app.post("/register", (req, res) => {
  // 회원 가입 할때 필요한 정보들을 client에서 가져오면 그것들을 데이터 베이스에 넣어준다.

  // 인스턴스 만들기
  const user = new User(req.body); // 정보들을 데이터베이스에 넣기

  //save() 몽고디비메서드 -> 정보들이 모델에 저장이 된다.
  user.save((err: "empty", userInfo) => {
    // 저장을 할 때 에러가 있으면 클라이언트한테 에러가 있다고 전달해야 됩니다.
    // 그러므로 성공하지 못했다고 json형식으로 전달해야하며, 에러메시지도 함께 전달해야됩니다.
    if (err) return res.json({ success: false, err });
    return res.status(200).json({ success: true });
  });
});

 

하지만 이렇게 작성하면 POST MAN으로 Register Router에 Request 보내면 오류가 납니다.

MongooseError: Model.prototype.save() no longer accepts a callback

MongooseError가 나더라고요.

이 오류는 Mongoose6부터 callback문법이 사용되지 않아 생긴 오류라고 합니다.

그래서 아래 사이트를 참고하시면 됩니다.

https://www.inflearn.com/questions/805491/%EA%B0%95%EC%9D%98%EC%97%90-%EB%82%98%EC%98%A4%EB%8A%94-%EB%AC%B8%EB%B2%95%EC%9D%B4-%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80-%EC%95%8A%EC%8A%B5%EB%8B%88%EB%8B%A4

강의에 나오는 문법이 적용되지 않습니다 - 인프런 | 질문 & 답변

 

아래와 같이 변경하면 잘 작동됩니다.

// 기존
app.post("/register", (req, res) => {
  const user = new User(req.body);

user.save((err: "empty", userInfo:any) => {
    if (err) return res.json({ success: false, err });
    return res.status(200).json({ success: true });
  });
});

// 변경
app.post("/register", async (req, res) => {
  const user = new User(req.body);
  const result = await user
    .save()
    .then(() => {
      res.status(200).json({
        success: true,
      });
    })
    .catch((err: "empty") => {
      res.json({ success: false, err });
    });
  return result;
});

 

3. POST MAN으로 Register Router에 Request 보내기

지금 데이터를 클라이언트한테 보낼 수 없으니 이 상황을 대처하기 위해 POST MAN 사용합니다.

 

Node Server 실행시킨후 포스트맨으로 데이터를 보내야 합니다.

npm run start

 

 

1. post선택, url입력
2. Body, raw, JSON 선택
3. 보낼 데이터를 넣어줍니다.

Send를 클릭해줍니다.

성공!

확실하게 성공한 건지 확인하시려면 MongoDB Compass에서 확인하시면 됩니다.

 

 

require → import

---

 

이번도 어김없이 require를 import로 교체

import express from "express";
import bodyParser from "body-parser";

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const mongoose = require("mongoose");
mongoose
  .connect("mongodb+srv://아이디:비밀번호@modooresume.eodr2fw.mongodb.net/?retryWrites=true&w=majority",
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB Connected..."))
  .catch((err: "empty") => console.log(err));

app.get("/", function (req, res) {
  res.send("Hello World");
});

// 회원가입 라우터
app.post("/register", async (req, res) => {
  const user = new User(req.body);

  const result = await user
    .save()
    .then(() => {
      res.status(200).json({
        success: true,
      });
    })
    .catch((err: "empty") => {
      res.json({ success: false, err });
    });

  return result;
});

app.listen(5000, () => {
  console.log("server is running!");
});

 

참고자료

---

https://www.youtube.com/watch?v=RVhOamEWyGs