[NodeJS] 노드 리액트 기초 - BodyParser를 이용한 회원가입 기능(with.PostMan)

 

 

만약 클라이언트에서 정보를 서버에 보내주면 서버에서는 그 정보를 받아주어야 합니다.

그것을 받을때 BodyParser라는 디펜던시가 필요합니다!

바디파서를 이용해서 클라이언트에서 보내주는 자료(이름, 이메일, 비밀번호)등을 받을수가 있습니다.

 

 

npm install body-parser --save

바디파서 디펜던시를 다운받기 위해서 필요한 명령어입니다.

 

모듈이 잘 설치가 되었습니다.

 

지금 현재 로그인이나 회원가입을 할때 클라이언트를 만들어 놓은 것이 없기 때문에 데이터를 클라이언트에 보내줄수가 없어 해당 기능을 대처하기위해 Postman을 사용할 예정입니다.

https://www.postman.com/

Postman API Platform | Sign Up for Free

해당 사이트에서 무료로 다운로드가 가능하며 개발을 하면서 아주 유용하게 사용할수 있습니다!

 

 

const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
const { User } = require('./model/User');

// application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: true}));

// application/json
app.use(bodyParser.json());

const mongoose = require('mongoose');
mongoose.connect('mongodb+srv://cine:cine@cluster0.7sr4t.mongodb.net/myFirstDatabase')
.then(() => console.log('MongoDB Connected...'))
.catch(arr => console.log(arr))

app.get('/', (req, res) => {
  res.send('Hello, Express!');
})

app.post('/register', (req, res) => {
  // 회원가입에 필요한 정보들을 클라이언트에서 가져오면 그것들을 데이터베이스에 넣어준다.
  const user = new User(req.body);

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`)
});

해당 코드에서 보면 

 

const bodyParser = require('body-parser');
const { User } = require('./model/User');

앞서 다운받았던 bodyParser와 작성해놓았떤 User모델을 가지고 오겠습니다.

 

// application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: true}));

// application/json
app.use(bodyParser.json());

바디파서가 클라이언트에서 오는 정보를 서버에서 분석해서 가져올수 있도록 해주는것입니다.

해당 정보는 각각 application/x-www-form-rulencoded로 된 데이터를 분석해서 가지고 오고 application/json 정보를 분석해서 가지고옵니다.

 

app.post('/register', (req, res) => {
  // 회원가입에 필요한 정보들을 클라이언트에서 가져오면 그것들을 데이터베이스에 넣어준다.
  const user = new User(req.body);

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

이번에는 post 메서드를 이용하려고 합니다.

해당 라우더의 endpoint는 /register로 하겠습니다.

클라이언트에서 넘어오는 정보들을 데이터베이스에 넣기 위해서는

const user = new User(req.body);

이런식으로 req.body를 이용해서 가지고 와야합니다.

req.body는 원래는

{
  id: "hello",
  password: "1234"
}

이런식으로 들어있어야 하는데 이렇게 들어있을수 있도록 도와주는 역할을 하는것이 바로 body-parser입니다.

 

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

이렇게 user로 등록된것을 이용하여 save메서드를 사용할건데요.

save는 몽고디비에서 오는 메서드입니다.

req.body를 통해 클라이언트에서 넘어오는 정보들이 user모델이 등록이 되도록 해줍니다.

만약 저장을 할때 에러가 있다고하면 클라이언트에 에러가 있다고 전달을 해주어야 합니다.

이런 에러를 json형태로 전달을 할 예정입니다.

뒤에 err를 통해 에러메세지도 함께전달을 해줍니다.

실패하지 않았다면 응답으로 200상태를 리턴하고 json형태로 정보를 전달을 해줄건데 success가 true로 전달을 해줍니다.

 

이제 포스트맨을 이용해서 회원가입을 한번 해보도록 하겠습니다.

npm run start

npm run start로 모듈을 실행시켜줍니다.

3000번포트에 연결이 되었고 몽고디비도 잘 연결이 되었네요.

 

저희는 이 어플리케이션을 post방식으로 전달하기위해 post메서드를 사용했기때문에 post방식을 선택했습니다.

그리고 3000번 포트를 사용하도 endpoint는 register이기 때문에 http://localhost:3000/register의 url을 사용하며 body는 raw를 선택하여 json형태로 보내주어야합니다.

(지금 스크린샷에서는 Text가 선택이 되어있는데 JSON으로 보내야합니다! 근데 Text형식으로도 JSON형태면 전송이 잘 되긴하네요)

제가 만들어둔 User 모듈에 필수값이 없기 때문에 적어둔 모든것을 다 적지 않아도 전송이 됩니다.

그래서 편의상 name, email, password만 작성하고 Send를 눌러보면 성공하네요!

아까 성공할경우 success: true가 나오도록 설정해주었기 때문에 이와같은 결과가 나오게 됩니다.