query data 비동기 에러

에러 상황

 

21번 줄 fetchBoard 데이터가 문제인 듯 하다.

console.log로 data.fetchBoard를 찍어 봤더니 역시나 데이터에서 오류가 있는 것 같다.

 

에러가 뜨는 부분을 주석 했더니 에러는 사라지는 것을 확인할 수 있다.

 

 

이상한건 이 상태에서 주석을 풀면 화면이 표시 된다는 것

 

이건 비동기 실행 때문에 data를 받아오기도 전에 div가 표시되면서 발생하는 에러라고 한다.

—

그래서 아래와 같이 조건문을 사용했다.

and 연산자는 왼쪽이 ture면 오른쪽을 실행하는 조건문.

 

아래 코드를 풀이하자면

“&& 연산자 왼쪽의 data가 있을 때 오른쪽을 실행시켜달라”는 뜻

이런 방식으로도 동기실행 상태로 만들어 줄 수도 있다.

 

다양한 방법으로 변형할 수도 있다.

?를 사용해서 옵셔널 체인지를 해보았다.

가장 아래는 삼항연산자를 사용했다.

 

동기 비동기 문제였는데, 디버깅하는 방법 중 하나가

크롬 개발자 도구에서 Network에 Slow3G 모드가 있다.

이것을 잘 활용하면 동기 비동기 문제를 디버깅할 때 도움이 될 것 같다.