서버와 클라이언트의 연결 상관 관계 ( + body-parser module)

 

아래 코드는 클라이언트 코드의 일부이다.

서버와 연결하기 위해서 fetch를 사용했다.

잠깐 fetch에 대해서 부연설명을 하자면 fetch를 사용할 때는 두번째 parameter는 옵션으로 들어가는 부분인데
적어주지 않는다면 default method는 GET이 될 것이다.
다른 method를 활용하고 싶다면 POST를 두 번째 파라미터에 적어주어야 한다.

 

fetch("http://localhost:4000/signin", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json"
                },
                body: JSON.stringify({ 
                  email: this.state.email, 
                  password: this.state.password
                })
              })
              .then(res => res.json())
              .then(response => {
                console.log('Success:', JSON.stringify(response));
                //여기서 responses는 res.json()된 결과가 될 텐데
                //콘솔의 결과값은 아래와 같다.
                //Success: {"id":1,"email":"rnjsdhdus93@gmail.com","password":"1234","username":"권오연","mobile":"010-0000-0000","createdAt":"2020-06-24T14:52:28.154Z","updatedAt":"2020-06-24T14:52:28.154Z"}

                //그렇다면 이 response는 어디서 나오느냐. 서버 코드를 살펴보자
              })

 

 

다음은 위의 클라이언트 코드와 연결된 서버 코드의 일부이다.

  signInController: (req, res) => {

    //TODO : 로그인 및 인증 부여 로직 작성
    user //여기서 user은 DATABASE
    .findOne({
      where: {
        email: req.body.email,
        password: req.body.password
      }
    })
    .then(result => {
    	console.log(JSON.stringify(result))
        //여기서 result 는 아래와 같다.
        //{"id":1,"email":"rnjsdhdus93@gmail.com","password":"1234","username":"권오연","mobile":"010-0000-0000","createdAt":"2020-06-24T14:52:28.154Z","updatedAt":"2020-06-24T14:52:28.154Z"}

      if(result){
        req.session.userid = result.id
        res.status(200).send(result)
      } else {
        res.status(404).send('unvalid user')
      }
    })
  }

 

여기서 만약 result가 존재한다면,

res의 status code 200과 함께

result를 res.body에 send 해 주고 있다.

그런데 이 result값을 콘솔에 찍어보니 클라이언트에서 받아온 값과 동일하다는 것을 알 수 있다.

 

즉, fetch를 통해서 서버에 연결시켜주었을 때, 받아오는 값은 서버에서 res.send해주는 값과 동일하다는 것!

 

 

 

 

---

반대로 클라이언트에서 받아온 값을 서버에 넘겨주고 싶은 경우를 생각해보자.

 

서버에서 req.body라는 코드를 통해 값을 받아오고 싶다면 node.js 모듈인 body parser를 설치해야한다.

그러면 서버의 req.body는 클라이언트코드 fetch에서 두번째 파라미터에 body 값으로 적어준

{"email":"rnjsdhdus93@gmail.com","password":"1234"}

이것이 나오게 된다.

 

 

body-parser 설치 명령어는

npm install --save body-parser

 

서버의 메인 js파일에 적어주어야 하는 코드는

const bodyParser = require('body-parser');

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

app.use(bodyParser.json());

업그레이드 된 버전에서는 꼭 위와 같이 적어야 작동이 가능하므로 주의하자.