Node & React basic #3

Jay·2023년 5월 10일
0

Node & React basic

목록 보기
3/21
post-thumbnail

Body parser & postman

우리는 지금 여기에서 서버를 만들고 있는데,

클라이언트가 넘겨주는 정보를 받을 수 있는 구조가 필요하다.

그 역할을 하는 것이 Body-parser dependency이다.
body-parser는 클라이언트에서 넘어오는 정보를 서버가 분석해서 가져올 수 있게 한다.
npm i body-parser --save로 이를 install해주고

또 현재 우리에게는 정보를 보내줄 client 구조가 없기 때문에 이 기능을 대신해줄 postman이 필요하다.
postman
들어가서 가입을 하고 download the app.

이제 우리는 Register Route를 만들어야 한다.
기존에 있던

이것도 Route라고 할 수는 있다.

이제는 회원 가입을 위한 Route를 만들자.

Route만들기

const bodyParser = require('body-parser')
const {User} = require("./models/User") // export했던 User가져옴

// 클라이언트에서 오는 정보를 서버에서 분석해서 가져올 때
// application/x-www-form-urlencoded 형식 가져옴
app.use(bodyParser.urlencoded({extended: true}));

// application/json 형식 가져옴
app.use(bodyParser.json());

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

정보들을 User database에 넣기 위해서 req.body를 인자로 보내준 것인데,
body안에는 json형식으로 데이터가 들어가게 된다.
이는 bodyParser덕분에 가능한 것이다.

app.post안에 아래 코드도 넣어준다. .save는 mongoDB에서 제공하는 메서드로 데이터베이스에 데이터를 삽입하게 해준다.

user.save((err, userInfo) => {
	if (err) return res.json({success: false, err});
  	return res.status(200).json({ // 익숙하지? 200은 OK임..
    	success: true,
    })
})

그럼 여기까지 회원가입 로직은 짜졌으니 실제 회원가입을 해봅시다(두근두근)

postman으로 해보자!

postman > my workspace에서 post요청으로 해본다.
위에서 app.post로, endpoint는 /register로 요청했으니 포트번호도 포함해서 잘 확인해주기

json내용은 User.js의 필요 내용 중 일부만 넣은 것이다. (required 옵션을 안 넣었기 때문에 일단 일부만 해보기)

그리고 postman에서 send를 누르면..!

띠용

vsc 터미널에서

이렇게 떠서 검색했더니 몽구스5부터 콜백펑션이 안된다고 한다.
어떤 공유정신이 투철한 분이 해결방법을 올려두심

app.post("/register", async (req, res) => {
  // 회원가입시 필요한 정보를 client에서 가져오면
  // 이를 데이터베이스에 넣어주어야 함.
  const user = new User(req.body);

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

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

(legacy에서는 async 사용하지 않았음)
(내 생각에 async를 사용하는 이유는 .save가 이뤄질 때까지 기다려야 하기 때문)

그리고 Send!

그러면 이제 이렇게 예쁘게 잘 뜬다.

강의가 조금 된 강의여서 버전이 안맞는 일이 많을 것 같은데..
이래서 뭐든 빨리 배워야 한다..

profile
ㄱ이 아닌 개발자가 되고 싶은 사람

0개의 댓글