react nodeBird 2-3 (회원가입, CORS 적용하기)

회원가입 프론트엔드, 백엔드 완성하기

routes/user.js

  이제 회원가입에 대한 백엔드 서버에 구성을 해줍니다. 시퀄라이즈의 create 메소드를 통해 

   req.body에 들어있는 email, nickname, password 데이터를 받아옵니다.

sagas/user.js(post, put. patch만 백엔드로 데이터전송이 가능하다)

  또한, 데이터가 어떤 흐름으로 전송되는지를 먼저 알아야됩니다.

  회원가입 폼에서 email, nickname, password 객체 데이터를 가지고 submit을 하게 되면, saga의 signUp의 SIGN_UP_REQUEST가 실행되고, signUp의 action데이터(email, nickname, password의 데이터들이 객체로 들어있음) signUpAPI의 data로 백엔드 서버로 데이터가 전송됩니다. 프론트서버에서 전송받은 데이터를 req.body로 백엔드서버에서 받게됩니다.

back/app.js

하지만, 데이터를 그냥 받을 수 없기 때문에 express.json(), express.urlencoded()를 포함시켜줘야 합니다.

• express.json() : 데이터가 json 형식으로 넘어왔을 때 데이터를 req.body에 넣어줌
• express.urlencoded() : Form Submit 했을 시 urlencoded 형식으로 데이터가 넘어오기 때문에 그 데이터를 처리

비밀번호 암호화를 위해 bcrypt를 사용.

  비밀번호같은 데이터는 데이터를 그대로 전송하게되면 보안에 위협이 되므로 bcrypt라는 라이브러리를 이용합니다. hash메소드를 통해 감싸주고, 뒤에 숫자를 붙여줍니다. 보통 10~13의 숫자를 쓰게되는데, 숫자가 높을수록 보안이 강해집니다. 아래 공식문서를 통해 시퀄라이즈와 bcrypt의 더 많은 정보를 확인해볼 수 있습니다.

https://sequelize.org/master/manual/

Manual | Sequelize

https://www.npmjs.com/package/bcrypt

bcrypt

 

아이디 중복체크를 해주자.

  아이디(이메일)이 중복으로 가입이 되게 해줘서는 안되기 때문에 const { User } = require('../models)로 User를 사용할 수 있게 가져오고, 시퀄라이즈의 find함수중 findOne으로 email이 있는지 체크 후 있다면 에러코드가 나오게 코드를 작성해줍니다. 

  if문에서 return을 안해주게되면, 아래의 res.send와 2개가 전송이 되서 can't set header already sent 에러가 발생하게되므로 주의해야합니다.

  요청(req)과 응답(res)은 아래와 같이 구성되어 있습니다.

• 헤더 : 상태(status), 용량(storage), 타임, 쿠키
• 바디 : 데이터

  또한, res.statsus(201).send('ok'); 같은 숫자코드를 볼 수 있는데, 이것을 HTTP 상태코드라 불립니다. 

• 2XX : 클라이언트의 요청을 성공 했다는 의미
• 3XX : 리다이렉션. 완전한 처리를 위해 추가적인 동작이 필요한 경우, 주로 서버의 주소, url 웹문서가 그쪽으로 이동되었으니 그 주소로 다시 시도해보라는 의미
• 4XX : 클라이언트 에러. 없는 페이지 요청. 클라이언트에서 요청이 잘못된경우
• 5XX : 서버에러. 서버의 부하, DB처리 오류 등

  next(error); 이 항목에서 에러가 발생했다면, 5XX에러로 서버에러입니다. 

CORS 처리하기

 

CORS 에러

CORS 에러문

  브라우저(포트 3060)에서 백엔드(포트 3065)로 데이터 요청을 보내면 아래와 같이 CORS 에러가 발생합니다. 이는 브라우저에서 다른 도메인(포트가 다름)으로 요청을 보내면 브라우저에서 차단하는 것을 말합니다. 

  처리방법은 아래 방법이 있습니다.

• 프록시 방식으로 처리하는 방법(서버와 서버간 요청은 CORS에러가 발생하지 않음)
• res.setHeader('ACCESS-Control-Allow-Origin', '*') 해주기
• 미들웨어로 처리하기

    보통 미들웨어로 많이 사용하며, npm i cors명령어로 사용하면 됩니다. 

back/app.js

  app.use를 통해 cors를 사용하기만 하면 되고, origin 인자에 조건을 추가해주면 됩니다.

• origin: 'http://nodebird.com', 노드버드에서만 데이터를 처리하는 것. 이래야 해커의 위협에서 보호할 수 있음
• origin: '*', 어떤 곳에서 데이터를 처리할 수 있게함. 일단 서비스를 만드는 중이므로 이렇게 진행함

CORS 에러 해결

회원가입폼도 백엔드에서 코드 작성이 끝나면, MySQL workbench에서 데이터가 제대로 가입이 되었는지 볼 수 있습니다. 

회원가입 동작확인

DB에 데이터가 제대로 들어갔는지를 볼 수 있다.

  DB에 데이터가 제대로 들어가있는지 볼 수 있고, 비밀번호가 암호화(Hash화)되어 있는것도 볼 수 있습니다. createdAt, updatedAt이라는 항목이 있는데, 이것은 시퀄라이즈에서 데이터 생성일, 수정일을 알아서 관리해주는 것이라 크게 상관하지 않으셔도 됩니다.