프로젝트 1 - BodyParser, PostMan

BooKi·2022년 3월 15일

React mongodb node.js 프로젝트 - 개인 공부

프로젝트 - 개인 공부

목록 보기

7/19

⭐프로젝트 1 - BodyParser, PostMan

📕클라이언트 - 서버 통신하는 법

클라이언트가 우리가 정해놓은 입력 양식에 정보를 입력하고 버튼을 누르면

그 정보가 body에 담겨져서 서버로 오게된다

우리는 그 body에 담겨진 데이터를 분석해야 하는데 그것을 parse라고 한다

그래서 bodyparser를 다운받도록 하자

npm install body-parser --save

그리고 PostMan이라는 것도 다운 받아야 한다

포스트맨인 지금 현재 우리가 클라이언트 화면을 만들어 둔 게 없기 때문에

그걸 대체하기 위해 다운 받는 것이다

사이트에 들어가서 자신의 OS에 맞는 것을 설치하도록 하자

다운 받은 후 회원가입을 하고 로그인을 하면 된다

일단 그렇게 놔두고 VS Code를 켜보자

저번에 우리가 index.js에서

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

이렇게 작성한 간단한 라우터를 볼 수 있다

이건 주소 마지막에 /가 오면 저 화면을 출력하도록 만든 것이다

위 코드는 get을 썼는데 이번엔 post를 써서 데이터를 받아 오도록 하다

간단히 get은 정보 조회만 하는 것이고 post는 데이터도 받아 온다고 생각하면 된다

자세한 설명은 다음에 다루도록 하겠다

우선 회원가입 하는 라우터를 만들도록 할 것인데 지난번에 회원 모듈을 만들었다

그걸 먼저 받아오자

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

이렇게 상단에 코드를 작성하자

그리고 데이터를 받아오면 그걸 parse 해야하니 bodyparser도 추가시켜주자

const bodyParser = require('body-parser')

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

이렇게 세 줄을 추가하도록 하자

밑에 두 줄은 옵션인데 urlencoded, json 데이터를 가져올 수 있게 해준다

그리고 (req.body)는 클라이언트가 입력 양식에 작성한 데이터들이

담겨져서 오는 곳이다

app.post('signup', (req, res) => {
  //회원 가입 할 때 작성한 정보들을 가져와 DB에 넣어준다
  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
    })
  })
})

.save는 몽고db의 메소드 이다

코드를 설명하자면 데이터가 제대로 들어오면 save를 하는데

만약 에러가 발생하면 json 형식으로 실패했다는 메시지와 함께 에러를 리턴하고,

제대로 성공했으면 json 형식으로 성공했다고 리턴한다

status(200) 은 성공했다는 의미이다

포스트맨으로 확인해보기 위해 서버를 키자

여기서 +를 누른 후 POST로 맞춰주고 옆에 주소에