사이드 프로젝트를 진행하던 중 문제에 마주쳤었다.
다음 부분이 문제가 되었던 부분이다.
const set_id = await saveSets(data)
set_id.map(async(i,j)=>{
const props = {
session_id: title_id,
set_id:set_id,
workout_id:workoutid
}
Session_Set.create(props)
})
위의 코드는 set_id
에 배열 형태로 set
의 id
를 저장하고, set_id
의 개수만큼 map()
을 돌면서 db에 저장하는 코드이다.
문제가 되었던 부분은 saveSets(data)
는 제대로 리턴이 되는데, set_id
에 그 값이 저장되기 전에 그 아랫줄 코드가 실행되어 set_id
는 undefined
가 되는 것이었다.
결론부터 말하자면,
saveSets()
에서 promise를 리턴하고,.then()
으로 아래 코드를 실행하면 된다.
바보들을 위한 promise 강의 참고
나는 바보다!
해결한 코드
saveSets()
함수는 promise를 리턴하도록 수정했다.
그러나 이 문제를 찾는데 오래 걸렸던 이유는 두 가지가 있다.
1의 경우는 이 문제 뿐만 아니라 모든 경우에 조심해야 한다고 다시금 느끼게 되었는데, '코딩할 때 틈틈히 내가 짠 코드가 맞는지 확인하면서 커밋하는 습관을 가지도록 하자' 정도로 교훈을 가지면 될 것 같다. 그렇지 않으면 다시 처음으로 돌아가서 디버깅하는 자신을 볼 수 있다.
2의 경우는 프로젝트를 진행하면서 당장 눈앞의 결과를 만들어내기 급급해서 제대로 된 이해 없이 새로운 내용을 가져다 쓰면 생기는 문제인데, '기본이 중요하다' 라는 것을 다시금 일깨워 주는 교훈이라고 생각하면 될 것 같다.
이번 프로젝트가 끝나고 async
, await
, then
, promise
에 대해 공부 한 바퀴 돌려서 블로그에 올리기
프론트 개발시에 삽질한 기억때문에 비동기 처리에 대한 이해가 너무나도 중요하다는 게 공감되네요ㅜ