본문 바로가기
매일 해내는 개발/Develog

[Develog] 옵셔널 체이닝

by 해야지 2022. 12. 27.
반응형

 

1. 오늘의 문제점 : 새로고침시 로딩 오류

2. 해결방법 : 옵셜널 체이닝

 

DetailPage에 접속하면 기존에는 내용이 잘 나오는데 새로고침 할 경우 post.id를 찾을 수 없다는 오류가 떴다.

이 부분에 대해서 고민해봐도 답이 나오지 않아 재현님께서 튜터님을 찾아가 문의했다.

튜터님께서 이것 저것 만져보라고 하시더니 로딩문제인 것 같다고하셨고.

140번째 줄에 있는 post와 user를 console을 찍어보라고 하셨다.

튜터님께서 콜솔 결과를 보시더니 물음표를 찍어보라고 하셨고 결과는 해결!

문제는 로딩이 맞았고 물음표는 옵셔널 체이닝이라는 문법이었다.

위 사진의 콘솔 결과를 보면 초반에 빈값을 읽어오는 것을 볼 수 있다. 아직 로딩 중인 상태여서 post 값을 읽어오지 못했는데 post.id 속성을 가져오라고 하니 오류를 뱉는 거였다.

옵셔널 체이닝을 붙이게 되면 앞의 내용이 undeined나 null이면 더이상 확장을 멈추게된다.

따라서 데이터가 들어올 때까지 계속 도는거다!

나도 비슷한 오류가 있어서 똑같이 적용해봤다.

 

로그인 상태에서 새로고침을 하면 프로필 이미지가 사라지는 오류다.

이 문제도 아직 user데이터를 받아오지 못했기 때문에 발생한 로딩 오류였다.

기 작성코드는 auth데이터를 가져오려고 했는데,  파이어베이스 auth데이터는 옵셔널 체이닝을 걸어도 먹히지가 않았다.

그래서 다음과 같이 user데이터에서 photoURL을 받아오는 코드로 수정하였더니 오류가 해결되었다!

 

 

옵셔널 체이닝 '?.'

 

ko.javascript.info

 

반응형

댓글