FormData 파일 전송 방법: Blob 그리고 JSON.stringify()

이전에 게시한 에러 분석글 Content type 'application/octet-stream' not supported에 대해 조금 더 파헤쳐보고자 작성해본 글이다.

 

저번 글의 요약으로는 객체 형태의 데이터를 FormData에 그대로 추가했고

"Content type 'application/octet-stream' not supported" 라는 서버 에러가 발생했다.

 

서버에서 기대한 데이터의 content type은 application/json이었는데, application/octet-stream 타입으로 전송이 되었고 이를 지원하지 않아 발생한 문제. 다행히 JSON 데이터를 알맞게 변환하여 깔끔하게 해결했다.

 

나는 사실 기존에 Blob 객체로 감싼 파일을 전송했었는데 JSON.stringify()만을 써도 된다는 걸 알고 조금 당황했다.

내가 처음 파일 전송에 대한 글을 찾아봤을 때 저런 방식을 가장 먼저 발견했었고 서버에서도 무리없이 받아들였을 것이다.

그렇게 나는 지금까지 같은 방법을 써오고 있었던 것 같다.... :)

 

아무튼 이 기회에 둘의 차이점을 알아보자고 생각했다.

---

 

JSON.stringify()

const formData = new FormData();
formData.append("data",
    JSON.stringify({data: data})
);

JSON 객체를 문자열로 변환해 FormData에 추가하면, 해당 데이터는 단순한 텍스트 형태로 전송된다.

그렇게 되면 서버에서 String 타입으로 받게 되어 쉽게 파싱하여 사용할 수 있다.

 

Blob

const formData = new FormData();
formData.append("data", 
    new Blob([JSON.stringify(data)], {type: "application/json"})
);

Blob 객체로 JSON 데이터를 전송하면 데이터가 파일처럼 전송된다.

 

차이점을 알아보자면 데이터의 전송 형태가 텍스트인지 파일 데이터인지 나눠지고,

서버에서도 데이터를 처리하는 방식이 바뀌게 된다.

JSON.stringify()는 문자열이기 때문에 단순히 파싱만 하면 되는데 Blob 객체의 경우 파일 수신 방식을 사용해야 처리할 수 있다고 한다.

 

그렇다면 간단한 데이터의 경우 JSON.stringify()로 전송하고

복잡한 데이터나 대용량의 데이터의 경우 Blob 객체로 보내면 되겠다.

 

---

Blob 객체가 대용량의 JSON 데이터를 전송하기 좋은 까닭은?

물론 파싱이라는 처리과정이 들어가면 대용량의 경우 속도가 늦어질 수밖에 없는 매우 당연한 이유겠지만.... 뭔가 다른 게 있을까 싶어서 따로 알아봤다.

 

 JSON.stringify()로 문자열을 생성하게 되면 모든 데이터를 메모리에 올려야해서 큰 데이터를 처리하려고 할 때 메모리 사용량도 똑같이 크게 늘어난다.

그러나 Blob은 Byte Stream으로 처리돼서 메모리 부담이 훨씬 줄어든다. 거기다가 파일이기 때문에 스트리밍이 가능해 브라우저에서 데이터를 서버로 조금씩 보내게 되고, 자연스럽게 대용량 파일 처리가 효율적으로 진행된다.

 

서버쪽뿐만 아니라 브라우저와 네트워크 자체가 전송을 돕는다는 점은 매우 흥미로웠다.

파일이라고 생각하면 당연한 부분인데 객체를 JSON 데이터로 보낸다고 생각하니 또 다르게 생각했었나보다.

 

다음 포스팅은 이 에러를 일으켰던 application/octet-stream에 대해서 자세히 파고들어 봐야겠다.