type Error의 이유 + await async의 중요성

유튜브 클론 코딩을 하면서 강의가 주제가 아닌 내 스스로 추가를 하는 작업을 하는 중이었다.

그런데 어떤 방법을 동원해도 type Error: Cannot find index of undefined 라는 에러를 해결할 수 없었다.

밑에는 해결 전 첨부사진을 저장하지 못해 해결한 것을 캡처한 것이다.

정말 내가 아는 모든 방법을 다 써보고 구글에 Error를 그대로 쳐봤지만 내 코드에는 아무 문제가 없는 것 같았다.

마지막으로 해본 방법은 스택오버플로우에서 comment와 user가 undefined 또는 null이기 때문에 발생한 현상일 가능성이 높다고 하길래 바로 콘솔로그로 찍어보았다.
하지만 findById로 내가 원한 comment와 user를 너무나도 잘 불러왔다.

더이상 문제해결시간이 길어지는 것을 두고볼 수 없었다.
이 에러에만 거의 하루를 박았지만 나는 해결할 수 없었다.

노마드 컴퍼니 슬랙 커뮤니티 고수 선배님 Flynn님께 이 문제에 대해 질문해보았다.

먼저, 내주신 해결방법은 if문을 통해 comment를 잘 불러오는지 확인해보라는 말씀이셨다.
혹시나..? 하는 마음에 comment를 if문에 넣어봤는데 잘 동작한다.
하지만 여기서 내가 실수한 부분을 알게되었다.
if문에 comment.heart를 찍어보니 나오지 않았다.
.... 이 무슨?

comment.heart뿐만 아니라 user.heartComments역시 읽어오지 못했다.
comment / user는 잘 읽어오는데 그 안에 프로퍼티는 못읽어오다니..?

캡처를 잘 보길 바랍니다.
async를 썻지만 await는 아무곳에도 써주지 않았다.
바로 비동기 언어 JS 덕분에 Comment와 User를 읽어올 때까지 기다리지 않고 동작한 것이다.
await를 통해 comment와 user를 불러오니 지금까지 뭐한건가 싶을정도로 허무하게 잘 동작했다.
저번 챌린지에서도 await를 쓰지않아 이런현상이 발생했었는데 질문한 내가 너무 부끄러워졌다. ㅠㅠ

이제는 다행히 heart 버튼은 프론트에서도 작동이 잘된다.
type error가 나면 if를 통해 먼저 값이랑 타입부터 잘 맞는지 확인을 해야하는 듯 하다.
이래서 사람들이 TypeScript를 사용하는 듯 싶다..