Express :: body-parser_서버 라우터 및 DB 연결하기 (회원가입)

현재 사용하고 있는 구성요소는 네개다.

브라우저(client):3060 - 프론트서버(Next):3060 - 백엔드서버(express):3065 - DB(MYSQL):3306

브라우저랑 프론트서버는 같은 프로그램이다. (포트가 같으므로)

브라우저는 특별히 화면을 보여주기 위해서 구동하는 프로그램이다.

 

회원가입을 할 때의 흐름을 이 네가지 구성요소와 함께 생각해보고,

백엔드서버를 구성해보자.

 

 

 

[브라우저] 회원가입을 위해 data를 입력한 후, 회원가입 버튼을 누른다.

[프론트서버] signup request 리듀서가 실행되고, saga에서 action.data로 받아온 값이 백앤드서버로 전달된다.

즉, signUpAPI의 매개변수인 data는 signUp에서 받아온 action.data이다.

 

 

---

 

서버 기본설정

프론트에서 받아온 data를 서버로 전달하기 위해서는 서버에서 사용할 수 있도록 파싱하는 것이 필요하다.

이 때 express에 기본적으로 내장된 모듈인 body-parser라는 미들웨어를 사용한다.

이 미들웨어를 사용하면 req.body 형태로 데이터를 꺼내 사용할 수 있다.

 

app.js 

  app.use(express.json());  

프론트에서 json형식으로 data를 보냈을 때, req.body안에 넣어준다.

 

  app.use(express.urlencoded({ extended: true });  

프론트에서 Form을 submit했을 때, data가 urlencoded 방식으로 넘어온다.

그때 넘어온 data를 req.body 안에 넣어준다.

 

 

라우터 설정

그 후 회원가입과 관련된 라우터를 설정한다.

  router.post('/')  

프론트에서 post로 '/user'에 정보를 요청했으므로, 서버의 라우터도 post /user로 받는다.

 

 

email 중복체크

  await User.findOne({ where: { email: req.body.email } });  

findOne 메서드는 비동기이므로 async와 await을 사용한다.

where 이 찾아보는 거. 입력한 email(사용자가 입력한 정보가 req.body에 들어가있다)이 있는지 찾아본다.

 

만약 유저가 있다면 다음과 같이 응답한다.

  res.status(403).send('이미 사용 중인 아이디입니다.');  

 

요청/응답은 헤더(상태, 용량, 시간, 쿠키)와 바디(데이터)로 구성되어있다. 

  응답.헤더.바디  

 

상태종류는 다음과 같다.

성공: status(200)

리디렉트: status(300)

클라이언트 에러: status(400)

서버에러: status(500)

 

회원가입 성공하면 200번대,

클라이언트에서 잘못입력했으면 400번대를 응답한다.

 

유저가 없다면, DB에 정보를 입력하고, 브라우저로 성공 응답을 보내준다.

  User.create({ ... });  

  res.status(201).send('ok');  

 

-

 

  try { ... } catch (err) { next(err); } 

비동기 요청이므로 서버쪽 에러가 발생할 수 있으니 try catch를 사용해 오류를 처리한다.

express의 next를 사용하여, 에러처리미들웨어라는 곳으로 에러를 보내 에러를 처리한다.

넥스트는 서버쪽에러이기 때문에 500번대가 뜬다.

 

 

---

 

하지만 이렇게만 하면 CORS 에러가 뜬다. ^^;;;

CORS는 일종의 보안정책이다.

해커가 마음대로 서버에 접근하지 못하도록,

다른도메인에서 접근하지 못하게 브라우저에서 미리 막아둔다.

즉 CORS에러는 다른도메인으로(3060에서 3065로)보낸 요청을 브라우저가 차단하기 때문에 생긴다.

 

브라우저에서 다른 도메인으로 보낼 때에만 생기는 문제이기 때문에,

프론트서버(3060)에서 백엔드서버(3065)로 보낼때는 문제가 안생긴다.

 

다음 포스트에서 어떻게 CORS에러를 해결할 수 있는지 살펴보자.

 

 

 

 

참고
- 제로초 노드버드 강의
- https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88
(바디파서부분)