Portfolio

🔥 문제

오늘 에디와 얘기를 하다가, 업로드에서의 문제점을 알아냈다.

현재 내가 보내는 request key의 Content-Type 또한 지정해줬어야 했다는 것.

결국 어제 했던 작업은 역시 내가 틀린 거였더라. 역시 포스트맨을 꼼꼼히 봐야겠다.

각설하고, 그렇다면 어떻게 FormData 객체의 내부 값들의 타입을 지정할 수 있을까?

⭐ 해결 방법

찾아본 결과 new Blob이라는 객체가 존재했다.

실제로, formData에서는 다음 Blob의 값을 허용한다.


interface FormData {
    append(name: string, value: string | Blob, fileName?: string): void;
    delete(name: string): void;
    get(name: string): FormDataEntryValue | null;
    getAll(name: string): FormDataEntryValue[];
    has(name: string): boolean;
    set(name: string, value: string | Blob, fileName?: string): void;
    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;
}

그렇다면 다시 한 번 살펴보자. Blob이라는 객체는 도대체 무엇을 하는 애일까?

Blob이란?

MDN 공식 문서에서는 다음과 같이 Blob이란 친구를 설명한다.

파일류의 불변하는 미가공 데이터를 나타냄

텍스트와 이진 데이터의 형식으로 읽음

ReadableStream으로 변환 후 해당 데이터를 처리 가능

네이티브 형태가 아닌 데이터도 표현 가능

파일 인터페이스 역시 Blob 인터페이스를 상속함.

모든 블롭 기능 상속 가능.

아하, 그렇다면 Blob이라는 객체는 꽤나 모든 파일들의 모체가 되는 인터페이스를 가진 객체라고 봐도 무방하겠구나! 싶었다.

따라서 이를 사용하려면 어떻게 해야할까?

매우 간단하다. 다음과 같은 형식으로 쓰자.


const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

실제 적용

그래서 실제로 한 번 적용해봤다.

결과는 어떻게 동작할까?

결과

👏🏻 참고자료

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

https://developer.mozilla.org/ko/docs/Web/API/Blob

new Blob에 대해 알아보자.

🔥 문제

⭐ 해결 방법

Blob이란?

실제 적용

결과

👏🏻 참고자료