[HTTP, 약간의 삽질] content-type : application-json/text-html 차이

역시나 뇌피셜로 인해 잘못된 정보가 포함되어 있을 수 있으며 책임지지 않습니다.

https://stackoverflow.com/questions/22406077/what-is-the-exact-difference-between-content-type-text-json-and-application-json

What is the exact difference between content-type: text/json and application/json?

HTTP 요청 날릴 때 헤더에 application/json으로 설정해서 날리면 에러나길래 둘이 뭐가 다른지 궁금해서 찾아봄

구글에 이렇게 검색함 what is difference from application/json and text/html http header

콘솔에서 자꾸 String으로 날리라고 화내는 거임..

http_outgoing.js:722
    throw new ERR_INVALID_ARG_TYPE('first argument',
^

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer or Uint8Array. Received undefined
    at write_ (_http_outgoing.js:722:11)
    at ServerResponse.write (_http_outgoing.js:687:15)
    at ReadFileContext.callback (/Users/mac/test/demo_readfile.js:20:9)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:282:13) {
  code: 'ERR_INVALID_ARG_TYPE'
}

chunk can be a string or a buffer. If chunk is a string, the second parameter specifies how to encode it into a byte stream. callback will be called when this chunk of data is flushed.

관련 노드 공식 문서를 까봤다
https://nodejs.org/api/http.html#responsewritechunk-encoding-callback
https://nodejs.org/api/http.html#responsewriteheadstatuscode-statusmessage-headers

 

response.write(chunk[, encoding][, callback])
대충 chunk가 string이나 buffer여야 한다고 두번째 인자가 바이트스트림으로 인코딩하는 방법을 특정한다고 함
버퍼가 뭐임?
C에서 buffer는 메모리에 올라가기 전 값을 임시저장하는 공간으로 알고 있음. 
근데 이 공식문서에서 chunk의 타입이 <string> 또는 <buffer>인데 궁금하니까 보자

https://nodejs.org/api/buffer.html#class-buffer
버퍼 클래스는 이진 데이터를 직접 처리하기 위한 global 유형입니다.

대충 바이너리 데이터로 이해함... 그 자바에서 바이트코드로 컴파일 된 상태의 데이터?(뇌피셜)
무튼 이진데이터는 인코딩되는 방식이 다른데 그 중에서 utf-8을 표준으로 쓴다고 함!

Buffer | Node.js v18.10.0 Documentation

문자열 인코딩 방식에 대해서는 일단 zipzip...

 

근데 헤더에 header의 option을 application/json으로 설정했던 게 문제였음. 이걸 text/html로 고쳐주면 됌.

그런데 위 출처의 스택오버플로우에서 application/json으로 날려도 toString()으로 감싸주면 해결된다고해서 해봤는데 안됌.

http.createServer((req, res)=>{
    res.writeHead(200, { 'Content-Type': 'application/json' }); 
    const data = fs.readFileSync("./poetry.txt", "utf-8").split('\n')
    for (var i = 0; i < data.length; i++) {
      res.write(data[i]);
      res.write("<br />");
    }
    res.end()
}).listen(8080)

근데 안될법도 한게 ㅋㅋ 이미 헤더를 application/json으로 설정해놓고 req.write() 해봤자 이미... 헤더는... 세팅이 된 후임 그럼 클라에서 보낸 req 받을 때 메시지 어떤 순서로 받는지 보면 이 의문도 해결될 듯 싶음

여튼 다시 원점으로 돌아가서

눈알로는 둘 다(application/json, text/html)string인데 뭐가 다르냐 하면은...차근차근 알아보자

 

1. 애초에 저 Content-Type을 헤더에 왜 써주는 걸까?

인터넷에서 사용되는 모든 리소스에는 MIME 유형이라고도 하는 미디어 타입이 있다. 이 정보는 서버와 클라이언트 간의 트랜잭션에 필요합니다.
브라우저가 올바르게 처리할 수 있도록 브라우저에 전송된 리소스의 미디어 유형을 알아야 합니다.
서버도 마찬가지입니다. 정확한 구문 분석 및 처리를 위해 전송된 리소스 유형을 알아야 합니다.

https://www.freecodecamp.org/news/what-is-the-correct-content-type-for-json-request-header-mime-type-explained/

What is the Correct Content-Type for JSON? Request Header Mime Type Explained

https://www.iana.org/assignments/media-types/media-types.xhtml

Media Types

2. MIME 유형을 까보자

• application
• audio
• font
• example
• image
• message
• model
• multipart
• text
• and video

이 중 내가 궁금한 application/json과 text/html은 application, text에 속한다고 한다.

위의 freecodecamp에서 HTML 파일의 content-type을 css로 설정했을 때 브라우저가 HTML을 CSS처럼 취급하는 예시가 있다.

브라우저가 content-type에 따라 다르게 파싱하는 것임을 추측할 수 있는데 이는 뇌피셜이니까 검증 안됐음(대충 Critical Rendering Path 중에서 HTML에 대해 CSSOM을 그린다는 것으로 이해함)

여튼 브라우저가 content-type에 따라 렌더링을 하고, 그 content-type의 표준이 IANA에서 명시되어 있는 것임

그런데 나는 그냥 plain text를 브라우저에 쓰고 싶은 경우였으므로 text/html을 써야 채점할 때 html을 파싱하기 때문에 헤더 content-type을 text/html로 써야 정답처리가 되었다고 생각함. 

만약 서버로 데이터를 보내는 경우에는 application/json이 맞는 타입이라고 한다.

JSON은 브라우저에 의해 올바르게 해석되어야만 적절하게 사용될 수 있다. text/plain은 일반적으로 JSON에 사용되었지만 IANA에 따르면 JSON의 공식 MIME 유형은 application/json이다.
즉, 서버로 JSON을 보내거나 서버로부터 JSON을 수신할 때 클라이언트와 서버가 이해하는 표준이므로 헤더의 Content-Type을 항상 application/json으로 선언해야 한다.

3. 그런데 왜 JSON이 표준인데?라고 한다면 ...

JSON은 JS의 객체와 생긴 모양이 비슷하고(아래 json.org 참고) 객체로 변환하기가 쉽고 사람이 읽기 쉽다. 그래서 워낙에 XML이라는 방식을 썼었는데 사람이 읽기 어렵다는 단점 등등...으로 인해 JSON으로 표준화한 것이다. 

4. 그럼 왜 JSON은 직렬화되야 하는 것일까?

Flutter 공식 문서를 보자.

직렬화(serialize) -  객체에 저장된 데이터를 I/O 스트림에 쓰기(출력) 위해 연속적인(serial) 데이터로 변환하는 것
직렬화는 일반적으로 자료 구조를 보다 읽기 쉬운 형태로 변환하는 과정을 말한다.

https://www.json.org/json-ko.html

JSON

https://flutter-ko.dev/docs/development/data-and-backend/json

 

또 자료구조를 문자열로 변형시키는 것이라는 설명도 덧붙여져 있다.

OSI 7 layer 같이 네트워크를 위해서는 추상화된 여러 레이어들을 거쳐야 하는데, 물리 계층에 가까울 수록 인간이 이해하기 어려운 형태로 변환된다. 그래서 서버로 req.body를 보낼 때 필요한 형식인 json으로 직렬화시켜서 보내는 것 같다. (뇌피셜)

---

- 문자열 인코딩 방식

- 네트워크 계층을 거치며 자료구조에서 문자열로 변형되는 과정

- 브라우저가 content-type에 따라 렌더링하는 과정

등등

을 모르기 때문에 뇌피셜인 것 같으니 좀 더 알아보자