File vs FileList (FormData에 문자열 배열을 추가하면 FileList가 된다?)

File 객체는 Blob을 상속한 것이라 한다. 즉 Blob의 한 종류이다. 

따라서 Blob의 속성인 type, size를 가지며 그 외에 name, lastModified, lastModifiedDate 등의 속성을 갖는다

 

File과 FileList 는 어떻게 다른걸까? 

<input type="file"/>

위 input element에서 multiple 속성을 명시적으로 추가하지 않더라도,

그리고 파일 한개만 선택을 해도 길이가 1 인 FileList 가 생성이 되기 때문에

파일에 접근하기 위해서는 FileList[0] 으로 접근해야 한다. 

이때 FileList[0] 의 타입은 File 이다.

 

FileList.[index]로 파일에 접근할 수 있다

즉 FileList 는 length 속성을 갖는다. 

 

또한 FileList 는 배열 이 아니라 유사 배열 객체이다. 

따라서 배열 메서드를 바로 사용할 수 없고 Array.from() 또는 스프레드 연산자 (...) 로 배열로 변환해야 한다.

---

WorkRoot 프로젝트를 하며 겪은 FileList 관련된 트러블이 한 가지 있다. 

 

문자열 배열 (string [] ) 을 포함하는 FormData를 전송했을때 

내부적으로 브라우저가 해석한 FileList 객체로 변환되었던 것 이다.

const aaa = ["string", "string"];
const formData = new FormDate();
formData.append(aaa)

대략 이런 코드였다. 

 

FormData는 본질적으로 멀티파트 형식(multipart/form-data)으로 데이터를 전송하기 때문에 

브라우저는 배열 형태의 데이터가 파일과 유사한 구조로 전달될 가능성이 있다고 판단해 이를 FileList로 해석할 수 있다고 한다. 

문자열 배열이 아닌 단순 문자열 데이터를 추가할때는 문자열 그대로 추가가 되었다.

 

다만 이것은 내가 Content-Type : multipart/form-data 으로 잘못 지정한 것이었고, 

스웨거에서 요구하는 대로 Content-Type : application/json 으로 수정하자 데이터를 문자열 배열로 잘 전달할 수 있었다 ㅎㅎㅎ

---

또 한가지, 

FormData를 확인하기 위해 console.log로 출력해도 계속 빈 배열만 출력이 되었다. 

 

지피티 문의 결과 아래와 같다. 

`FormData`는 일반적으로 `console.log`로 출력해도 내부 내용을 볼 수 없습니다. 

`FormData`의 내용을 디버깅하려면, `forEach`로 키-값을 출력하세요:

for (const [key, value] of submitData.entries()) {   
console.log(key, value); }

---

😂✅ Lesson Learn

기본적인 자바스크립트의 File 에 대한 내용이고 분명 학습했을 텐데 

이번 포스팅의 내용은 최종 프로젝트를 하는 동안 내가 제대로 몰라서 헤맸고, 그래서 비로소 '알게' 된 내용들이다.

역시 부딪히면서 배우는게 많지만, 한편 한번 학습할때 제대로 익히는 것이 중요하다는 것도 느낀다.

하지만 망각을 통해서 학습을 한다고 하니 마냥 부적적으로 생각하지는 말자