230930 Promise 객체로 image file 목록 모두 Base64 로 변환하기

사진 파일을 올린 후, 화면 미리보기 (Preview) 기능을 구현할 때 사용해야했는데,
개별적인 image 파일을 FileReader() 객체를 통해 base64로 변환하는 것은
이미 기존에 정리해둔바 있습니다. (링크) 한번 정리해둔적이 있어서 참고하면 편하더라구요.

그런데 개별적인 파일이 아닌, Array 형식의 image 파일인 경우는 onload 이벤트를 통해 비동기 형식으로 데이터를 반환하기 때문에, Promise 객체를 사용하지 않으면 안됐습니다 ...!

async preview (files) {
    const promises = []

    for (const file of files) {

        const promise = new Promise((resolve, reject) => {
            const reader = new FileReader()

            reader.readAsDataURL(file)
            reader.onload = () => resolve(reader.result)
        })          

        promises.push(await promise)
    }

    console.log(promises)
    // ['data:image/jpeg;...', 'data:image/jpeg;...', 'data:image/jpeg;...']
}

Promise.all() 메서드를 이용할수도 있겠지만, 개인적으로 콜백지옥을 너무너무너무 싫어하기 때문에 ... forof 로 구현습니다.
나중에 시간 나면 Promise.all 도 추가해야겠네요.

다만 이미지 Preview 기능 만들때 base64 로 변환하니, ... 용량이 너무 크다는 단점이 있었습니다. 내 상상력으론 다른 방법이 딱히 떠오르지 않았는데 ... 더 좋은 방법이 있다면 알려주세요 ...