[Node.js/React] 간단한 회원가입 시스템 구현, postman 이용

·2023년 6월 20일
0

node-react 기초 공부

목록 보기
4/12
post-thumbnail

이전에 설계했던 userSchema를 이용하여 회원가입 기능을 간단하게 구현해보려고 한다.

✏️Post방식으로 '/register' 접근

우선, User.jsmodule.exports를 통해 설계한 유저 정보 스키마를 다른곳에서도 사용할 수 있도록 입력했었다.
그럼 다른 파일에서도 해당 값을 써먹는다고 써줘야 쓸 수 있을것이다.

그걸 index.js에 입력해주는 것이다.

const { User } = require('./models/User')

이렇게 입력해주면 './models/User' 경로에 있는 모듈을 User라는 이름으로 사용한다고 선언한 것이다.

그리고 우리가 회원가입을 할 때 오가는 정보들은 공개적인 것이 아니라 개인정보이므로 이를 숨겨야한다. 그래서 Url에 데이터가 노출되지 않도록 Post방식을 이용해야한다.

//index.js
app.post('/register', (req, res) => {
    const user = new User(req.body)

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

/register이라고 입력한 부분은, 나중에 서버를 켰을 때 localhost:3000/register에 접속했을 때, 해당 기능에 접근할 수 있다는 것이다.

자세한 코드설명

const user = new User(req.body)

클라이언트에서 받은 데이터 값을 User형태로 새롭게 유저값에 저장한다.

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

이 저장한 user값을 save했을 때, 저장이 가능한 형태라면 status(200)을 내보내고, json값도 success:true로 전달한다.
만약 오류가 발생한다면, status(500)을 내보내고, json형식으로 success:false값과 err값을 전송한다.


✏️body-parser 설치

이렇게 User을 이용한 코드를 입력했다면, body-parser 모듈을 이용하기 위해 설치해야한다.
body-parser은 간단히 말하자면, nodejs의 모듈로, POST request data의 body로부터 파라미터를 편리하게 추출한다.

npm install body-parser

모듈을 설치하고 이를 이용할 코드를 입력한다.

//index.js
const bodyParser = require('body-parser')

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

(bodyParser.urlencoded({...})application/x-www-form-urlencoded방식의 Content-type 데이터를 받아준다.
bodyParser.json()application/json방식의 Content-type 데이터를 받아준다.
좀 더 자세한 내용은 이 아래의 블로그를 참고하면 될듯하다.
body-parser 정확히 알기

(단순히 알고 있던 개념인데, 막상 공부하면서 적다보니 모르는 부분도 있어서 조만간 자세히 알아봐야 할 것 같다😶😶)

이렇게 코드를 입력하고 서버를 켜보자.


✏️회원가입 테스트 (요청) - postman 이용

서버가 켜지면 postman을 통해 회원가입 api를 테스트해보자.

method: POST
url: localhost:3000/register
입력값 방식: JSON
-name, email,password를 차례로 입력

'SEND' 클릭하면

{
    "success": true
}

와 같이 입력한 값이 제대로 전송되었음을 알려준다. 그럼 DB에 제대로 들어갔는지 확인해보자.

✏️회원가입 테스트 (DB 확인) - mongodb compass 이용

(나는 원래 MongoDB Compass가 설치되어있어서 해당 프로그램을 이용하였다. 이를 이용해서 mongodb에 값이 잘 들어갔는지 확인할 수 있기때문에 설치하는 것을 권장한다.)


mongoDB Compass를 키면, 아래와 같이 연결할 db의 url을 입력하도록 나온다. 이 URL값은 저번에 mongodb 연결하면서 입력했던 url변수값을 그대로 입력하면 된다. -> 물론 password까지 다 채워서 입력해주어야한다.

연결이 실패뜨는 경우는 보통 2가지이다.

1. 비밀번호를 잘못 입력한 경우
2. 현재 ip 주소가 추가되어있지 않은 경우
-> ip 주소의 경우, mongodb atlas 사이트에 접속하면 현재 ip 주소가 추가되어있지 않다고 추가하라는 메시지가 자동으로 뜬다. 그럼 버튼 한번 누르면 알아서 ip주소를 추가해준다.

이렇게 connect하고 testusers를 보면 아래와 같이, postman을 통해 전송한 값들이 저장되어있다.


👩‍💻 깃허브 주소

node-react

0개의 댓글