[error] TypeError: Cannot set properties of null (setting 'innerText')

에러를 만나게 된 상황

//코드일부(필요없는 부분 생략...)
const weather = document.querySelector(".weather");
let temp = data.main.temp;
let min = data.main.temp_min;
let max =  data.main.temp_max;
weather.innerText = `${temp}°C 최고온도${max}°C 최저온도 ${min}°C`

• 날씨 위젯 개인 프로젝트를 진행하던 중 온도와 최고온도, 최저온도를 변수에 담고 innerText를 사용해 출력하고 싶었는데  TypeError: Cannot set properties of null (setting 'innerText') 에러가 났다 

해결방법

<script src="/main.js"></script>

• script 태그를 head 태그안에 넣어놨었는데 body 태그 밑으로 옮기니까 잘 실행되었다 

오류 원인 

• DOM 요소를 선언하기 전에 JS 스크립트 태그를 배치해서 그런것 같다 
• main.js파일은 요소가 생성되기 전에 실행 되기때문에 span태그를 액세스 할 수 없었던 거 같다 

느낀 점

•  동작원리를 조금 더 공부할 필요가 있다고 느꼈다