안녕하세요. 요즘 풀스택으로 간단하게 프로젝트 하나를 개발하고 있는데요. 뭔가 문제가 발생하여 포스팅으로 작성합니다. 항상 js 부분에서 promise는 지금까지도 잘 이해가 안되는 것 같아요. 일단 이번 포스팅으로 해결한 방법을 작성하고 이후에 promise에 대하여 심도있게 공부한 후에 포스팅하겠습니다.
Map에서 Promise 풀기
let editContents = await Promise.all($(".edit-content-section").map(async function () {
console.log($(this).attr('type'))
if ($(this).attr('type') == 'file') {
const fileSendUrl = "/profile/content/file/upload";
let fileSendData = $(this)[0].files[0];
const resultFileData = await postFileCRUD(fileSendUrl, fileSendData);
return resultFileData["url"];
} else {
return this.value;
}
}).get());
일단 제 대략적인 코드는 특정 클래스 input array를 map으로 푸는데 그 중 file이 있으면 업로드를 해야합니다. 업로드는 클라우드 서버를 활용하였는데 문제는 클라우드 서버에 업로드 후 url 정보를 받아올려면 동기를 걸어주어야 합니다.
하는수없이 map 함수에 async을 걸어주고 업로드 부분에 await을 걸어주었습니다. 이 후 데이터는 잘 받아오지만 Promise fullfilled, Promise pending 상태에 걸려 딜레마에 빠졌습니다. 저같은 경우 get으로 return한 value들을 취합하여 최종적으로 value array 형태를 가지는 것이 목적이였습니다.
먼저 저는 업로드하는 부분만 동기적으로 실행이 필요하기 때문에 Promise.all 함수를 써서 병렬적으로 처리한 후 Promise<pending> 상태를 얻었는데요. 이를 풀기 위해 다시 상위 함수에 async을 걸고 해당 부분을 await 처리하였습니다.
제가 작성하고도 복잡하네요. promise에 대해서 확실히 공부해야 할 듯 합니다.