문제의 대부분은 동기/비동기 문제다.

사이드 프로젝트를 진행하던 중 문제에 마주쳤었다.

다음 부분이 문제가 되었던 부분이다.

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. 동기/비동기에 대해 제대로 이해를 못 하고 있었다.

1의 경우는 이 문제 뿐만 아니라 모든 경우에 조심해야 한다고 다시금 느끼게 되었는데, '코딩할 때 틈틈히 내가 짠 코드가 맞는지 확인하면서 커밋하는 습관을 가지도록 하자' 정도로 교훈을 가지면 될 것 같다. 그렇지 않으면 다시 처음으로 돌아가서 디버깅하는 자신을 볼 수 있다.

2의 경우는 프로젝트를 진행하면서 당장 눈앞의 결과를 만들어내기 급급해서 제대로 된 이해 없이 새로운 내용을 가져다 쓰면 생기는 문제인데, '기본이 중요하다' 라는 것을 다시금 일깨워 주는 교훈이라고 생각하면 될 것 같다.

결론

• 앞으로 코딩할 때 틈틈히 커밋할 것.
• 틈틈히 잘 모르고 넘어갔던 내용들을 다시 살펴볼 것.

나와의 약속

이번 프로젝트가 끝나고 async, await, then, promise에 대해 공부 한 바퀴 돌려서 블로그에 올리기