Client - Server 통신 / 회원 가입

holang-i·2021년 5월 28일
0

Node & React

목록 보기
5/11
post-thumbnail

Client & Server가 통신하는 법

chrome, whale 과 같은 브라우저들을 Client, 클라이언트라고 보면 된다.

회원가입을 진행 할 때

어떤 홈페이지에서 회원가입을 진행할 때 이름, 이메일, 비밀번호 등의 정보를 입력한 뒤
--> 서버로 등록하는 과정을 거쳐야되는데 클라이언트에서 정보들을 작성해서 서버로 보내면
--> 서버는 그 정보들을 받아야 된다.

서버에서 그 정보들을 받을 때 Body-parser Dependency를 이용해서 Client에서 보내주는 자료, 정보들을 받아와야 된다.

body-parser dependency 설치

Body의 데이터를 분석(parse)해서 req.body로 출력을 해야 되기 때문에 아래의 명령어를 통해 body-parser를 설치한다.

$ npm install body-parset --save


body-parser

body-parser는 Client에서 오는 정보를 Server에서 분석해서 가져올 수 있도록 해주는 것이기 때문에 위에서 명령어를 통해 설치했고,
body-parser의 몇 가지 세팅을 해줘야 된다.

1. bodyParser.urlencoded 설정

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

위의 코드를 살펴보면, body-parser 모듈을 사용할 때 이 옵션을 왜 주는 지 알아보았다.

urlencoded({ extended: true })

extenden옵션을 true로 주게되면, 객체 형태로 전달된 data안에 또 객체, 즉 중첩된 객체가 있을 경우 그것을 허용한다는 뜻이다.
반대로 false를 주게 될 경우, 허용하지 않겠다는 의미가 된다.


2. bodyParser.json( )

application/json : json type으로 된 것을 분석해서 가져올 수 있게 해줌

app.use(bodyParser.json());

Postman

Client에서 Ruquest를 줘야하는데 현재 Client가 없기 때문에 Postman을 이용해서 request를 보낼 것이다.


Register Route 만들기

// 회원가입 router 만들기
app.post('/register', (req, res) => {
  // 회원가입할 때 필요한 정보들을 client에서 가져오면 
  // 해당 정보들을 DataBase에 넣어준다.
  // req.body로 Client가 넘기는 정보를 받아온다.
  const user = new User(req.body); // user instance 만들기 / req.body를 해줄 수 있는 이유는 body-parser가 있기 때문이다.
  // save: mongoDB에서 오는 method / user모델에 req.body의 정보들을 저장
  user.save((err, userInfo) => {
    if(err) {
      return res.json({ success: false, err });
    } else {
      res.status(200).json({ success: true});
    }
  })
});

Postman으로 제대로 router를 만들었는지 확인

따란! 아주 잘 등록되었다!!
그런데! 여기서 부족한 점이 하나 있다.
바로 password부분이 너무나도..적나라하게 보이는 문제가 있다.
이 부분을 암호화하는 작업을 추가로 진행해줘야 된다.







따라하며 배우는 노드, 리액트 시리즈를 통해 개념을 익히면서 실습하고 있습니다.
https://bit.ly/3wGxKGC

profile
🌿 주니어 프론트엔드 개발자입니다! 부족하거나 잘못된 정보가 있다면 알려주세요:)

0개의 댓글