[개인 프로젝트 error] Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText')

에러가 나게 된 상황 

• 날씨 위젯 프로젝트를 만들던 중 날씨 api를 통해서 데이터를 받아오는 작업을 하고 있었는데 콘솔에는 데이터가 잘 나오는데 innerHTML이나 innerText를 사용해서 화면에 데이터를  띄우려고 하면  아래의 사진처럼 오류가 났다

error

---

에러 해결 & 느낀점 

// 에러코드(필요없는 부분 생략..)
const map_name = document.querySelector('.weatherInfo'); 
map_name.innerHTML = `${temperature} @ ${place}`;

// 수정코드(필요없는 부분 생략..) 
document.querySelector('.weatherInfo').innerHTML = `${temperature} @ ${place}`;

 

• 예전에 비슷한 오류가 났었는데 그때는 html 태그를 script  태그보다 위에 해놓아서 처리 순서에서 문제가 있어서 script 태그를 html 태그 밑으로 옮기면서 오류를 해결했는데 이번에도 약간의 문제가 있었던 거 같다 
• 선택자를 사용해서 바로 innerHTML 를 했어야 했는데 변수에 담아서 했던 게 문제가 된 거 같다 완벽히 이해 한건 아니지만 해결 후  TypeError: Cannot set properties of null  왜 셋팅된 프로퍼티즈가 null 인지 곰곰이 생각해보니까 선택자를 변수에 담는 건 그냥 아무런 의미가 없는 거 같다는 생각이 문득 들었다 해결 방법이 생각보다 간단 했지만 정말 동작 원리나 처리 순서 등 기초를 조금 더 공부해야겠다고 느꼈다