서버 기초 Express / 요청과 응답 데이터 JSON 직렬화, 역직렬화

 

💾 서버 기초 Express / 요청과 응답 데이터 JSON 직렬화, 역직렬화

📂 바디 얻는 방법의 종류 (express.json( ))
📂 JSON과 직렬화, 역직렬화
📂 Fetch와 JSON
📂 mini node server 과제
📂 res.json( )
📂 mini node server에서 데이터가 오고가는 과정 (요약)

📂 바디 얻는 방법의 종류 (express.json( ))

---

📎 Node.js / Buffer

Node.js 만 사용해서 post 요청 시, HTTP body를 받아오는 과정이 좀 복잡하다.
네트워크 상의 chunk를 합치고, buffer를 문자열로 변환하는 작업이 필요하다.

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // body 변수에는 문자열 형태로 payload가 담겨져 있습니다.
});

📎 Express / bodyparser.json()

위의 작업은 express 미들웨어 express.json으로 간단하게 바꿀 수 있다.
하지만, express.json() 이전에 사용했던 body-parser 먼저 보자.
npm으로 bodyparser를 설치해서 사용할 수 있다.

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

// 생략
app.post('/users', jsonParser, function (req, res) {

})

요렇게. (내가) 주의할 점은, 그냥 bodyparser가 아니라, .json() 메서드를 붙여서 사용하고 있다.
bodyParser.json()은 application/json 방식의 Content-Type 데이터를 받아온다.
request를 위해 body를 json 타입의 데이터로 바꿔주는 것이다.

📎 Express / express.json()

bodyparser.json()은 npm으로 설치해서 쓸 수 있었지만,
Express v4.16.0 부터는 body-parser를 따로 설치 하지 않고, Express 내장 미들웨어인 express.json()을 사용한다.

const jsonParser = express.json();

// 생략
app.post('/api/users', jsonParser, function (req, res) {

})

jsonparser에 express.json() 미들웨어를 할당해서 사용하고 있다.우리는 이제, node.js에서 request .on으로 데이터가 들어오면 chunk를 가지고 Buffer에 모아서 그걸 스트링으로 바꿔 바디로 보내고.. 등등 할 필요 없이 express.json() 미들웨어를 사용하면 간단하게 요청의 바디를 json 데이터 타입으로 받아올 수 있다.

추가로, express.json()의 옵션 중, strict를 사용할 수 있다. 보통 json 형태로 변환하는 데이터는 객체 혹은 배열이다. json으로 받는 바디의 데이터가 객체, 바디인지 확인하는 옵션이다. default가 true이고, 객체 혹은 배열만 바디로 받아 json으로 변환해준다.
false로 바꾸면 모든 데이터를 다 받을 수 있다. 우리 과제에서 받아와야 하는 바디는 그냥 스트링이라서 strict를 false로 줘야한다.

const jsonParser = express.json({ strict: false });

여기까진 납득했다. 오케이.
그런데 과제를 하면서 한 가지 의문이 계속 나를 괴롭혔다.

왜 요청을 보낼 때는 express.json()을 통해 json형식으로 body를 직렬화 해서 보내주고,
받아올 때는 왜 다시 역직렬화를 하지 않는 걸까

나는 이 생각에 시달리다가 궁금증이 풀리지 않아 너무 힘들었다.
그러던 중 동기분이 감사하게도 실마리를 풀어주셨다. 감동받고 눈물을 흘렸다(정말).

먼저 json 직렬화와 역직렬화를 잠깐 이야기 하고 코드를 보자.

📂 JSON과 직렬화, 역직렬화

---

📎 JSON

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 데이터 포맷이다. 자바스크립트에 종속되지 않는 언어 독립형 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있다. JSON의 키는 반드시 큰따옴표로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표로 묶어야 한다. 밑의 예시처럼.

{
   "name": "hee",
    "age": 99,
    "alive": true,
    "hobby": ["셜록이와 산책"]
}

 

📎 serializing, JSON.stringify( )

클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야한다. 이를 직렬화(serializing)라고 한다. JSON 직렬화 말고도, 바이너리, XML 직렬화가 있다. JSON은 JS말고 다른 언어에서도 이용할 수 있어서 다양한 소프트웨어 간 데이터를 주고 받을 때 유용하게 사용할 수 있다. JSON.stringify()은 객체 뿐 아니라 배열고 JSON 포맷의 문자열로 변환시킨다.

📎 deserializing, JSON.parse( )

서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맨의 문자열을 객체화해야 한다. 이를 역직렬화라고 한다. 이때 사용하는 메서드가 JSON.parse()이다.

 

	자바스크립트 객체	JSON
키	키는 따옴표 없이 쓸 수 있음 { key : "property" }	반드시 쌍따옴표를 붙여야 함 '{"key":"property"}'
문자열 값	작은따옴표도 사용 가능 { "key" : 'property' }	반드시 큰따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백	사용 불가능 {"key":"property"}	사용 가능 '{ "key" : 'property' }'
키-값 쌍 사이 공백	사용 가능 { "key":'property', num:1 }	사용 불가능 '{"key":"property","num":1}'

 

📂 Fetch와 JSON

---

그리고 또 주의할 점, Fetch!
HTTP 요청을 전송하는 클라이언트 사이드 API인 fetch에서도 당연히 JSON을 사용한다. fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.
그런데 fetch 함수로 요청한 결과는 (당연하게도) 내가 원하는 값만 쏙 나오는 게 아니다.
fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

// fetch 요청을 보내고 데이터를 사용하는 코드

post(path, body) {
    fetch(`http://localhost:4999/${path}`, {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => {
        console.log(res);
        console.log(res.json());
        res.json();
      })
      .then((json) => {
        this.render(json);
      });
  }

위의 코드, 요청 input에 '소문자 z' 입력 시 콘솔창

response 객체에 body: (...) 이 보인다. 바디 안에는 readablestream 이 있다.
그리고 PromiseResult에는 내가 보낸 소문자 'z'에 대한 응답인 대문자 'Z'가 들어가 있고, 풀필드 상태이다.

(사실 이 부분이 아직 이해가 안간다. 프로미스 안의 리스폰스도 아니고, 리스폰스가 먼저 나오는 이유가 뭘까? 아마 readablestream에 대해 공부하면 궁금증이 풀릴 듯하다)
그럼 이 상태에서 본격적으로 과제 코드를 보자.

📂 mini node server 과제

---

//basic-server.js
//리팩토링하며 추가한 부분
const express = require("express");
const app = express();
const jsonParser = express.json({ strict: false });
const cors = require("cors");
//
const http = require("http");
const PORT = 4999;
const ip = "localhost";

app.use(cors());

app.get("/", (req, res) => {
  // get을 해주지 않으면 서버에 'cannot GET /'이 뜬다.
  res.send("Hello World!");
});

app.post("/lower", jsonParser, function (req, res) {
  res.json(req.body.toLowerCase());
});

app.post("/upper", jsonParser, function (req, res) {
  res.json(req.body.toUpperCase());
});

app.listen(PORT, () => {
  console.log(`Example app listening on port ${PORT}`);
});

익스프레스 미들웨어를 사용하고 있다.
특정 엔드포인트로 들어온 요청의 바디를 받고, 그 바디의 스트링을 toLowerCase/toUpperCase 해서 응답으로 돌려준다.
여기서 응답은 그냥 send로 주면 안된다. .json()을 통해, 브라우저로 json데이터로 바꿔 보내준다.

(요청) 바디를 받을 때 express.json() 으로 string -> json
(응답) 바디를 보낼 때 .json()으로 string -> json

그럼, 브라우저는 json 형식의 데이터를 어떻게 사용할까?



이 코드의 fetch .then으로 응답 객체가 들어온다.

// App.js
class App {
  init() {
    document
      .querySelector("#to-upper-case")
      .addEventListener("click", this.toUpperCase.bind(this));
    document
      .querySelector("#to-lower-case")
      .addEventListener("click", this.toLowerCase.bind(this));
  }
  post(path, body) {
    fetch(`http://localhost:4999/${path}`, {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then(
        (res) => res.json()
      )
      .then((json) => {
        this.render(json);
      });
  }
  toLowerCase() {
    const text = document.querySelector(".input-text").value;
    this.post("lower", text);
  }
  toUpperCase() {
    const text = document.querySelector(".input-text").value;
    this.post("upper", text);
  }
  render(response) {
    const resultWrapper = document.querySelector("#response-wrapper");
    document.querySelector(".input-text").value = "";
    resultWrapper.innerHTML = response;
  }
}

const app = new App();
app.init();

나는 App.js 파일의 존재 자체를 잊고 있었다.
이 파일의 fetch로 요청을 보내고 받아오는 건데...!
중요한 부분만 자세히 보자.

 post(path, body) {
    fetch(`http://localhost:4999/${path}`, {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then(res => res.json()
      )
      .then((res) => {
       this.render(res);
      });
  }

fetch로 요청(앞서 본 request)을 보내고 그 결과는 응답 객체로, then으로 받아올 수 있다.
then에 담긴 res는 readablestream을 포함한 응답 객체이다. 그리고, 이 res에 .json() 메서드를 해준다.
res.json()을 해주면 응답 객체의 바디만 읽어 json에서 자바스크립트 데이터로 바꿔준다(역직렬화).
그럼, 자바스크립트에서 읽을 수 있는 데이터가 된 res는 resnder 함수 안으로 들어가 브라우저에 뿌려진다!




다시 요청을 받아 보내고, 응답을 돌려보내 then으로 사용하는 코드를 보자.

const jsonParser = express.json({ strict: false });

app.post("/lower", jsonParser, function (req, res) {
  res.json(req.body.toLowerCase()); // 여기서 res.json()은 직렬화 메서드
});

 .then(res => res.json() //여기서 res.json은 역직렬화 메서드
      )
      .then((res) => {
       this.render(res);
       });

주의해야할 점은, then에서 res에 해준 .json은 직렬화가 아니라, 역직렬화 메서드다.
아까는 직렬화라고 하더니 역직렬화라니.

📂 res.json( )

---

이번 과제에서 나온 json()메서드는 두 종류가 있다.

• Express의 res.json() : 직렬화
• fetch의 응답을 사용하는 .json(): 역직렬화

 

📎 Express의 res.json() : 직렬화

res.json([body])
Sends a JSON response. This method sends a response (with the correct content-type) that is the parameter converted to a JSON string using JSON.stringify().
The parameter can be any JSON type, including object, array, string, Boolean, number, or null, and you can also use it to convert other values to JSON.
https://expressjs.com/ko/api.html#res.json

res.json(null)
res.json({ user: 'tobi' })
res.status(500).json({ error: 'message' })

📎 fetch의 응답을 사용하는 .json(): 역직렬화

프로미스가 래핑하고 있는 MIME 타입이 application/json인 HTTP 응답 몸체를 취득하려면 Response.prototype.json 메서드를 사용한다.
Response.prototype.json 메서드는 response 객체에서 HTTP 응답 몸체를 취득하여 역직렬화 한다
라고 함.
모던자바스크립트 딥다이브 865페이지

MDN Response.json() (https://developer.mozilla.org/en-US/docs/Web/API/Response/json)
Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.
이 메서드가 json()으로 명명되었음에도 불구하고 결과는 JSON이 아니라 JSON을 입력으로 받아들이고 이를 구문 분석하여 자바스크립트 객체를 생성하는 결과이다.
MDN

똑같이 생겼는데 쓰임이 정반대여서 힘들었다. 하지만 생김새만 다르고 쓰는 방법, 상황도 다르니 이제 헷갈릴 일은 없을 것이다.

📂 mini node server에서 데이터가 오고가는 과정

---

fetch는 프로미스를 리턴한다.
fetch가 리턴한 프로미스는 response 객체를 래핑하고 있다.
우리는 response 객체가 가진 응답 몸체가 필요하다.
response 객체의 응답 몸체는 MIME 타입이 application/json이다.
fetch에 사용하는 response.json() 메서드로 응답 몸체를 취득할 수 있다.
response.json()은 응답 객체의 헤더, 바디를 다 가져와서 바디만 읽고 역직렬화 한다.
다시 말해 fetch로 가져온 프로미스를 response.json()으로 바디를 역직렬화 한다.
프로미스와 역직렬화된 자바스크립트 객체를 리턴함!
이 역직렬화 된 데이터가 App.js의 render() 함수로 들어가서 브라우저에 렌더링 된다.
------------------------------------------------------------------------------------------------------------------------
서버에 req 보낼 때 express.json() 으로 바디를 json으로 파싱한다.
서버는 바디를 받아서 원하는 응답을 줘야하는데,
응답 역시 서버를 지나 브라우저로 보내지기 때문에(정확히는 페치를 통해 받는 프로미스 형태이다)
json 형태로 보내야한다.
브라우저에서는 프로미스 안에 있는 응답 몸체를 받아 사용해야한다.
여기서, 받아온 응답을 response.json() 메서드를 사용해 역직렬화된 응답 몸체 (바디만) 사용할 수 있다.
이 바디(역직렬화, JS 데이터인 스트링 상태)를 render 함수 안에 넣으면 브라우저가 화면에 출력시킨다.

Reference

---

SY
모던자바스크립트 딥다이브
코드스테이츠
MDN
Express
https://cmang9.tistory.com/97
https://velog.io/@wonyuuu/JavaScript-JSON.parse-JSON.stringify