Node.js(express.js) 회원가입

회원가입을 하려면, 사용자가 보낸 요청에서 사용자 입력한 정보를 꺼내올 수 있어야 한다.

그래야 그 정보로 유효성 검사를 하고 DB에 등록을 하기 때문.

이 과정에서 필요한게 body-parser이다. body-parser를 이용하면 사용자가 보낸 요청에서 쉽게 데이터를 꺼낼 수 있다.

1. body-parser 설치

먼저, body-parser를 백엔드에 설치한다.

npm i body-parser --save 명령어 입력

설치가 완료되면 백엔드의 시작점인 index.js에 body-parser을 가져와서 등록한다.

const express = require('express');
const app = express();	

const bodyParser = require('body-parser');

 

express 자체는 json을 받지 못하기 때문에 아래와 같은 설정을 해주어야 한다.

app.use(bodyParser.json()) 

그럼 body-parser는 요청을 통해 들어 온 json 데이터를 파싱해서 req.body에 넣어준다.

예를들어 사용자가 이메일과 패스워드를 입력해 서버로 요청을 보냈다면 ,

{ email:"tester", password:'tester' } 라는데이터가 request에 담겨  JSON 형태로 보내지는데, 이 데이터를 파싱해서 req.body에 넣어준다.

그럼 서버에선 req.body.email 이런 식으로 데이터에 접근 할 수 있게 된다

---

또  데이터가 JSON 형식이 아닌 주소 형식( 쿼리스트링 )으로 오는 경우를 위한 설정이 필요하다. ex) get 요청

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

urlencoded는 주소 형식으로 데이터를 보내는 방식인데, extended는 url의 쿼리스트링을 뭘로 해석할 것인지에 대한 설정이다. 이것에 대한 자세한 설명은 아래 링크에서 확인. 별도의 모듈을 설치하지 않고 하려면 false로 하면 된다.
https://backback.tistory.com/336

Node - Express 미들웨어 body-parser

2. 회원가입 요청 API 등록

API는 app.http요청메소드('라우터 경로', 컨트롤러); 형태로 만들어 주면 된다.

app.post('/users/register',(req,res)=>{
	//실행할 내용
})

 

만약, 프론트에서 axios.post('/users/register',{ email: "test@gmail.com ", pw: "tester" })요청 보냈다고 치면,

백엔드에서는 '/users/register' 경로로 들어온 post 요청을 담당하는 API를 찾아서 이 요청을 넘겨준다.

const { User } = require('./models/User'); //전 글에서 정의한 사용자 스키마 모듈 가져옴
 
//  '/users/register' 경로로 들어온 post 요청은 아래 API로 들어간다.
 
app.post('/users/register', (req, res) => {
  const userInfo = new User(req.body);//사용자 정보를 담은 User인스턴스 userInfo를 생성한다.
  
  userInfo.save((err, doc) => {//save메소드를 이용해 userInfo가 가진 정보로 회원 객체를 생성한다.
  							  //save메소드는 몽고디비에서 제공하는 메소드이다
    if (err) {
      return res.json({ success: false, errMessage: err }); // 실패 시 에러 메시지와 함께 리턴
    }
  
  return res.status(200).json({ // 성공할 경우 200코드와 함께 리턴
      success: true,
     msg:'회원 가입 성공!'
    })
  })
});

 

3. 결과 확인하기

백엔드 서버 켜고, 포스트맨을 통해 회원가입 요청을 보내본다.

post메소드 선택 후 경로 입력, JSON 형태의 사용자 데이터를 입력한 뒤 전송 버튼을 누르면 아래와 같이 

요청 결과가 뜬다.

몽고디비에서 결과를 확인해 보면, 몽고 디비에 사용자 계정이 생성된 것을 알 수 있다.

결과를 보면 password가 암호화가 되어있는데, 이 작업은 다음 글에서 포스팅 하겠습니다.