🥲 아니, 이게 왜 안 되는거야?!?! - 비동기 프로그래밍과 Promise에 대하여

이미지를 다루는 작업을 진행하게 되었는데, 기존에 해오던 것과 달리 이번에는 여러 이미지를 배열 형태로 보내서 url를 받아와서 다시 그 데이터를 다른 데이터와 함께 create 혹은 update를 해줘야했다. 그런데, 만약에 기존에 url이 있는 상태면 pass를 하고 새로 넣은 이미지만 url을 다시 받아와서 update를 해줘야하는 것에서 문제가 생겼다. 

 

api를 호출하기 전에 console.log로 body를 찍으면 분명히 업데이트 된 이미지 url이 찍히는데, 막상 api를 호출하면 payload에 업데이트된 값이 안 찍히는 것이다!!!!!!!! 

 

 

 

반나절을 붙잡고 늘어져있는데 미칠지경... async - await를 써서 비동기처리를 해줬는데 뭐가 불만이니?! 뭐가 잘 못 된건데?! ....

 

문제를 해결하고 나서 보니 비동기 promise + 배열 map() 함수 사용에서 비롯된 오류였다 .

 

🔥 비동기 프로그래밍이란?

여러 작업을 동시에 처리하거나, 한 작업이 끝날 때까지 다른 작업을 중단하지 않고 실행하는 프로그래밍 패러다임이다. 

웹 어플리케이션에서 사용자 경험을 향상시키기 이해 중요한 개념 중 하나로 웹 페이지에서 이미지를 로드하거나, 원격 서버에서 데이터를 가져오는 동안 다른 작업을 계속 할 수 있다.

 

🔥 promise란?

자바스크립에서 비동기 작업을 다루기 위한 객체로 세가지 상태를 가진다. 

 

• Pending : 비동기 작업이 완료되지 않은 상태. 
• Fulfilled: 비동기 작업이 성공적으로 완료된 상태
• Rejected: 비동기 작업이 실패한 상태
  
  

Promise를 사용하면 비동기 작업의 결과를 처리하고, 성공 또는 실패에 따라 작업을 수행할 수 있습니다

 

 

🔥 왜 계속 payload 에 업데이트 된 값이 안 찍힌것인가?

aws s3 버킷으로 url를 생성받고, file을 보내야하는데 이 데이터값이 배열 상태에 요소로 들어가있어서 배열을 돌면서 'url' 이라는 key 값에 value가 비어있나 없나를 체크하고 file이 있나없나도 체크해야하는데, 이 배열을 돌면서 온전히 다 돌지 못 하고 응답 받지 않은 상태에서 데이터를 보내는 api를 호출해버린다. 

 

그런데 의문은 여기서 미리 호출받은 url 값이 있기때문에 api 콜하기 전에 body로 보내는 파라미터에는 값이 있는것처럼 찍혀버린다. 

하지만 사실 값이 없던 것!

 

그래서 온전히 aws s3 버킷 작업을 다 끝마친 후에 데이터를 update하는 api를 호출해야한다. 

 

나는 이미 promise를 써서 비동기로 처리를하고, 바디도 console.log에 업데이트 된 값으로 잘 출력되었기때문에 문제가 없다고 생각했다. 하지만 똑똑한 컴퓨터놈은 문제가 있다고 했다... ㅜ..

 

🔥 해결 방안

1. 이미지 작업을 하는 함수를 일단 async - await 로 비동기처리하고 업데이트된 데이터 값을 return 하게 한다 

2. 이때 return 된 값이 확실하게 있을 때만 다음 api 호출을 할 수 있게 try - catch, if문 을 함께 쓴다. 

 

예시,

const 이미지 작업 함수 =() => {
 // 배열 데이터를 돌면서 api 콜

 return 업데이트 된 값
}


const 데이터 저장 함수 = async () =>{
    try{
      const 업뎃된 데이터 = await 이미지 작업 함수();
      if(업뎃된 데이터){
      const response = await 데이터 저장 함수 api(바디)
      }
      
    }catch(err){
      console.log(err)
    }
}

 

위와 같은 방식으로 해결! if문을 한번 걸어줌

 

이전에 실패했던 코드를 공유해보자면 

const 이미지 작업 함수 =() => {
const 이미지 함수 = () =>{
// 배열 데이터를 돌면서 api 콜
}

 return promise.all(이미지함수)
}


const 데이터 저장 함수 = async () =>{
    try{
      return await 이미지 작업 함수().then(() => {
         return await 데이터 저장 함수 api(바디)
      };
      
    }catch(err){
      console.log(err)
    }
}

 

당연히 이미지 작업 함수를 모두 다 돌고 데이터 저장 함수 api를 호출할 것이라고 생각했지만 작업이 다 끝나지 않은 상태에서 호출해버린다.....