HTTP 프로토콜에서 데이터 전송되는 방식 - JSON.stringfy(), JSON.parse()

HTTP 프로토콜 API를 하나 만들었다고 가정합니다. 보통 이런 API 응답 형식은 JSON이죠. 그럼 네트워크에 JSON 객체가 그대로 포함된채로 전달될까요?

HTTP 프로토콜 JSON 객체 전달

 

HTTP 요청과 응답 구조

HTTP 프로토콜을 사용해 데이터를 주고 받을 때 요청와 응답 구조를 확인해봅시다.

🔎 참고자료

HTTP 프로토콜 | 토스페이먼츠 개발자센터

 

요청(Request)

요청은 다음과 같은 구성으로 이루어집니다.

• 요청 라인 (Request Line)
• 요청 헤더들 (Request Headers)
• 빈 줄
• 요청 바디 (Request Body)

POST /login HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "test@example.com",
  "password": "1234"
}

이때 해당값은 직렬화되어 전송될 때는 다음과 같은 형식으로 바뀔 것입니다. 다음은 한 줄의 문자열입니다.

'POST /login HTTP/1.1\r\nHost: example.com\r\nContent-Type: application/json\r\nAuthorization: Bearer token123\r\n\r\n{"email":"test@example.com","password":"1234"}'

 

응답(Response)

응답은 다음과 같은 구성으로 이루어집니다.

• 상태 라인 (Status Line)
• 응답 헤더들 (Response Headers)
• 빈 줄
• 응답 바디 (Response Body)

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 52

{
  "message": "Login successful",
  "token": "abc123"
}

이때 해당값은 직렬화되어 전송될 때는 다음과 같은 형식으로 바뀔 것입니다. 다음은 한 줄의 문자열입니다.

 

'HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: 52\r\n\r\n{"message": "Login successful","token": "abc123"}'

 

 

클라이언트에서 JSON 파싱하기

그럼 클라이언트에서 해당 문자열을 JSON으로 다시 파싱해야 원래 의도대로 사용할 수 있겠죠? 이때 어떻게 문자열을 JSON으로 변환시킬까요? 이때 사용되는 것이 바로 JSON.parse() 입니다. JSON.parse()는 자동으로 문자열을 JSON 객체로 파싱해주고 이 과정에서 타입은 자바스크립트가 자동으로 추론합니다.

예시)

{
  "name": "Alice",
  "age": 25,
  "isAdmin": true
}

이런 JSON 데이터를 서버에서 클라이언트에 전송하기 위해 다음과 같이 JSON.stringfy()을 통해 문자열로 직렬화합니다.

// 문자열로 직렬화된 상태
'{"name": "Alice","age": 25,"isAdmin": true}'

그리고 클라이언트는 직렬화된 응답을 받고서, 이를 JSON.parse()를 통해 다시 JSON으로 역직렬화합니다.

{
  "name": "Alice",
  "age": 25,
  "isAdmin": true
}

이때 해당 응답 JSON의 isAdmin 타입을 출력하면 어떤 값이 출력될까요? 바로 boolean이 출력됩니다. 즉, 따로 해당 값이 boolean인지 아닌지에 대한 정보를 넣지 않아줘도 자바스크립트가 자동으로 해당 값의 타입을 추론하는 것입니다.