리액트 보일러 프로젝트 - 3 post방식으로 입력한 데이터 처리 만들기

body-parser

회원가입을 할 때 아이디, 비밀번호 등의 정보를 입력하는데

정보를 우리 쪽에서 받기 위해서는 프로젝트에 "body parser"를 설치해야합니다

프로젝트 경로에 열린 cmd창에서 npm install body-parser --save 명령어를 입력합니다

이전에 install을 해서 위와 같은 로그가 나왔습니다

package.json 파일의 dependencies에 body-parser가 생성된 것을 확인할 수 있습니다

 

index.js 파일에서 app.get('/', (reqm res) => res.send('Hello World!')) 아래에 새로운 코드를 작성합니다

app.post로 post 방식으로 구현합니다

 

/register 경로에 접속할 경우 실행합니다

{} 안의 코드를 실행합니다

{} 안에 데이터 처리를 할 수 있는 코드를 만들기 전에 전에 만들었던 몽고 DB 스키마의 데이터들을

사용할 수 있게 위에 설정을 합니다

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

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

입력합니다

 

{User}는 User.js에서 module.exports 이름입니다

require는 경로 models 안의 User 파일에서 가져온다는 뜻입니다

const bodyParser = require('body-parser'); 입력합니다

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

body-parser가 있어야 보낸 데이터를 처리할 수 있습니다

bodyParser의 옵션을 주겠습니다

옵션의 형식으로 온 데이터를 처리할 수 있게 했습니다

app.post 안에 아래의 코드를 입력합니다

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
        })
    })
})

const user는 export 한 User 변수를 new로 만들고 파라미터로 req.body를 받습니다

여기에 데이터 넣어주는 것은 bodyParser가 해줍니다

user.save() 함수를 실행하는데 몽고 dB에 데이터를 넘겨줍니다

내용은 error가 날 경우 if 문이 실행되고 json 형식으로 실패했고 error 내용을 보내줍니다

그리고 error가 아닐 경우 성공했다는 내용을 json 형식으로 보냅니다

res.status(200)은 성공했다는 의미입니다.

 

포스맨 실행

포스트맨을 이용해서 테스트를 하는 방법입니다

포스트맨을 실행하고 get에서 "post"로 변경하고 주소를 http://localhost:3000/register을 입력합니다

Body를 선택하고 아래의 라디오 버튼들 중에서 "raw" 선택합니다

오른쪽의 버튼을 클릭해서 JSON 타입으로 선택합니다

아래와 같이 {} 안에 입력할 데이터를 JSON 형식으로 작성합니다

"send" 버튼을 클릭하면 실행됩니다

에러가 발생했습니다

이유는 "password"의 최대 글자 수는 5글자입니다

그런데 보낸 값은 5글자 이상을 보내서 에러가 발생했습니다

models/User.js에서 password의 maxlength 설정을 10으로 변경합니다

그리고 다시 실행한 후에 다시 시도합니다

성공했습니다

app.post('/register')의 코드 중에 성공하면 json 형식으로 "success: true"를 보내게 입력했습니다