자바스크립트가 적용이 안되요.

[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://use.typekit.net/frx5mqp.css">
<title>Weather</title>
</head>
<body class="sunny">
<section class="poster background sunny" style="background: linear-gradient(90deg, rgba(224, 224, 224, 0.72) -7.6%, #D9D9D9 27.12%, rgba(226, 226, 226, 0.96) 32.55%, rgba(255, 255, 255, 0.82) 49.92%, rgba(191, 191, 191, 0.62) 79.46%, rgba(223, 223, 223, 0.31) 104.34%, rgba(190, 190, 190, 0.00) 113.67%);">
<div class="sun-circle">
<div class="sunny-sun">
<svg width="528" height="519" viewBox="0 0 528 519" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M286.829 287.338L439.324 453.847M76.8288 55.338L229.324 221.847M301.967 256.151L527.749 254.527M48.4299 427.536L225.204 287.069M300.43 225.536L477.204 85.0692M256.485 292.987L260.015 518.747M1 253.527L226.784 254.864M254.485 1L256.879 226.775" stroke="#BE0505" stroke-width="5"/>
</svg>
</div>
</div>
</section>
<section class="title">
<h1>맑음</h1>
<h2>Sunny</h2>
</section>
<section class="contents">
<div>
<p class="latitude">37°33'58.87"N</p>
<p class="longitude">126°58'40.63"E</p>
</div>
<div class="calendar">
<div class="month">03</div>
<div>月</div>
<div class="day">10</div>
<div>日</div>
</div>
<div>
<p class="location">Gangnam-gu, Seoul</p>
<p class="time">14:00 03/10/2023</p>
</div>
</section>
<section class="poster forward"></section>
<script src="./js/index.js"></script>
</body>
</html>

document.querySelector(".sun-circle").onclick = function(){
document.querySelector(".sun-circle").style.background="FF0000";
};


처음에 console.log("document.querySelector(".sun-circle")"); 했을때는 
sun circle div요소가 나왔는데,위에 문법을 쓰니깐 적용이 안되고, document is not defined라고
에러 문구가 뜹니다. 찾아보니 node때문에 그렇다는데..무슨말인지 잘 이해가 안되고 왜 적용이 안되는지 
모르겠습니다ㅜㅜ vscode써서 작업하는데 라이브 서버로 미리보기 해도 console.log 안에 넣어 
실행할때는 되는데. onclick코드 쓰면  미리보기의 console칸에 아무것도 안나와요ㅜㅜ...
node js에서 원래 실행이 안되는 거면, node를 지우고 vscode를 실행해야 하나요...?
js코드 넣고 실행하면, vscode 에서 아래와 같이 에러메세지가 뜹니다.

ReferenceError: document is not defined
 at Object.<anonymous> (/Users/Downloads/코딩 연습/Example02/js/index.js:1:1)
 at Module._compile (node:internal/modules/cjs/loader:1376:14)
 at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
 at Module.load (node:internal/modules/cjs/loader:1207:32)
 at Module._load (node:internal/modules/cjs/loader:1023:12)
 at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
 at node:internal/main/run_main_module:28:49
Node.js v21.1.0
[Done] exited with code=1 in 0.369 seconds

안녕하세요 Lili 님, 인프런 AI 인턴이에요.

저희가 확인한 결과, 제공해주신 코드를 보면 웹 브라우저에서 실행되는 JavaScript 코드입니다. 그러나, 위 코드는 Node.js에서 실행되는 코드가 아니기 때문에 document 객체를 사용할 수 없는 것입니다.

Node.js는 서버 측 JavaScript 실행을 위한 환경이며, document 객체는 브라우저에서만 사용할 수 있는 객체입니다. 따라서, 해당 코드를 실행하기 위해서는 브라우저에서 실행해야 합니다.

VSCode의 라이브 서버를 통해 미리보기를 하실 때, document.querySelector와 같이 브라우저에만 존재하는 기능은 정상적으로 동작하지 않을 수 있습니다. 이는 라이브 서버가 코드를 브라우저에서 실행하는 것이 아니라 Node.js에서 실행하는 것이기 때문입니다.

따라서, 정상적으로 JavaScript 코드를 실행하려면 해당 코드를 HTML 파일에 포함시키고, 브라우저에서 HTML 파일을 실행하셔야 합니다. 그러면 onclick 이벤트도 정상적으로 동작할 것입니다.

참고로, Node.js와 웹 브라우저에서의 JavaScript 실행 환경은 약간 차이가 있기 때문에, Node.js에서 실행할 경우에는 브라우저만의 기능을 사용할 수 없다는 점을 유의해야 합니다.

더 궁금한 사항이 있으시면 언제든지 물어보세요!

인프런 커뮤니티 질문&답변