[js] fetch의 .json()과 Express의 .json()의 차이

똑같이 생겼는데 사실은 다른 메서드, 서버측의 .json()과 클라이언트 측의 .json()

 

프론트엔드와 백엔드가 데이터를 주고 받는 코드를 작성중에, 양측에서 .json() 메서드가 쓰이는데 사실은 서로 다른 메서드임을 알게 됐다.

 

아래의 두 코드에서 등장하는 .json()은 서로 다른 메서드이다.

예를 들어, 아래와 같은 백엔드(서버 측) 코드가 있다.

// 서버 측에서 JSON 응답 보내기
app.get("/myinfo", (req, res) => {
  const userData = { userID: "user123", name: "John" };
  res.json(userData); // 서버에서 클라이언트로 JSON 데이터 응답
});

여기서 쓰인 res.json()은 Express 라이브러리의 메서드로, js객체인 userData를 JSON 형식으로 직렬화하고 있다.

{ userID: "user123", name: "John" }  이 내용을   { "userID": "user123", "name": "John" } 이렇게 JSON화 시키는 것이다.

 

 

아래는 프론트엔드(클라이언트 측) 코드이다.

// 클라이언트 측에서 JSON 응답 받기
fetch("/myinfo")
  .then((response) => response.json()) // JSON 응답을 JavaScript 객체로 파싱
  .then((data) => {
    console.log(data); // JavaScript 객체 출력
  });

여기서 쓰인 response.json()은 fetch 라이브러리의 메서드로, JSON형태를 다시 js객체로 파싱(구문분석)한다. 위의 .json()과는 반대의 일을 한다.

즉

{ "userID": "user123", "name": "John" }   이 내용이    { userID: "user123", name: "John" }  이렇게 된다.

 

네트워크 통신을 위해 직렬화했던 내용을 복원시킨다고 보면 될듯.

 

 

클라이언트 측에서 사용하는 fetch()의 .json()

클릭하면 위 웹페이지로 이동합니다.

 

서버 측에서 사용하는 Express의 .json()

클릭하면 위 웹페이지로 이동합니다.

 

 

그냥 보면 같은 .json() 메서드같지만 소속도 다르고 동작도 다르다. 이 엄청난 발견을 기록하기 위해 코드짜다 말고 블로그로 달려왔다. 아 뿌듯해. -ㅅ-

 

검색해보기 전에는 그냥 같은 메서드인데, 데이터 형태를 보고 판단해서 자동으로 직렬화/파싱을 상황에 따라 알아서 해주는 건가? 했는데 사실은 서로 다른 놈들이라니. 

 

기술문서들에 들어가서 읽어보면 fetch의 .json()은 복원된 js객체 그대로가 아닌, Promise객체를 반환한다. 왜인고 하니 fetch로 받아오는 데이터는 네트워크를 타고 우리에게 날아오는데 시간이 걸린다. 데이터가 크거나 통신 속도가 느리다면 전송에 시간이 다소 걸릴 수 있는 것이다. 그래서 Pending(대기), Fulfilled(이행), Rejected(실패)의 상태값을 가지는 Promise로 반환한다. 데이터가 다 받아지지도 않았는데 다음단계로 달려가버리지 않도록.

참고 : https://moneytech.kr/42

fetch()의 response.json()은 왜 Promise를 리턴하는 걸까?

Express의 .json()은 Promise객체가 아닌 JSON문자열 혹은 undefined를 반환한다.

 

 

개인적인 생각이지만 위의 두 메서드보다는 좀 더 명시적으로 작성하기 위해 JSON.stringify()나 JSON.parse()를 사용하는 게 더 가독성이 낫지 않을까? 하는 생각이 든다.