TypeScirpt에서 FormData 값(values) 확인하기

문제 발견

클라이언트에서 입력한 이미지 파일을 서버로 전송하기 위해서는 FormData로 깜산뒤에 보내야한다.

FormData의 값을 추가(append)를 하고 값을 확인하려고 console.log를 출력시켜 보았지만 출력되지 않는다.

이후 Array구조로 되어있을 것을 예상하고 반복문(for, for in)문을 사용하였지만 값이 뜨지 않는 것은 마찬가지이다.

 

const [images, setImages] = useState<Array<Blob>>([]);

const imageFormDataHandler = () => {
    const formData = new FormData();
    for (let i in images) {
      formData.append("images", images[i]);
    }
    console.log(formData); // ??
  };

 

for (let j in formData) {
	console.log(formData[j]); // ??
}

 

for (let k = 0; k >= formData.length; k++) {
    console.log(formData[k]); // ??
}

문제 분석 및 원인

원인은 formData의 값(values)들을 보려면 values라는 메소드를 사용하여 조회하여야 한다.

따라서 formData.values()를 사용하여 출력해야 하며 이 메소드가 반환하는 객체는 Iteration protocols이다.

값을 조회하려면 for문도 for in도 아닌 for of문을 사용하여 조회하여야 한다. Iterration 객체의 특성이다.

문제 해결

for of문을 사용하여 FormData.values()를 출력시키려면 Typescirpt에서는 따로 설정을 해야한다.

downlevelIteration을 true로 변경 해줘야 for of문이 사용이 가능하다.

 

TypeScript 공식문서에서 downlevelIteration를 사용하는 이유를 요약하자면 ES5 버전 자바스크립트로 변환하는 환경에서 for/of나 Array Spread 연산자를 사용하면 변환하는 코드가 너무 방대해지기 때문에 downlevelIteration 옵션을 설정할 수 있도록 하고 기본 값은 false로 설정하여 가장 기본적인 Array 타입만을 사용하게 해서 변환되는 코드량을 줄이기 위한 것이다.

// (tsconfig.json)

{
  "compilerOptions": {
  	"target" : "es5",
    "downlevelIteration": true,
  },
}

 

const imageFormDataHandler = () => {
    const formData = new FormData();
    for (let i in images) {
      formData.append("images", images[i]);
    }

    for (let values of formData.values()) {
      console.log(values); // 이미지 객체의 정보
    }
  };

 

이렇게 해서 formData의 value를 확인할 수 있다.