1. 브라우저에서 실행
HTML 파일을 실행하는 가장 간단한 방법은 브라우저에서 여는 것이다.
필자도 해당 방법을 사용중이다.
방법:
HTML 파일을 우클릭하고 **"Open with Live Server"**를 선택한다.
- Live Server는 VSCode 확장 프로그램으로, 실시간 미리보기를 제공한다.
- Live Server가 설치되지 않았다면, Extensions Marketplace에서 설치 가능하다.
장점:
- 빠르고 간단하며, 브라우저에서 실행되는 실제 결과를 확인할 수 있다.
2. 내장된 Node.js를 사용
VSCode에서 Node.js를 사용하여 JavaScript 코드를 실행할 수 있다.
다만, Node.js는 브라우저 환경이 아니라서 DOM 관련 코드 (document, window 등)는 실행되지 않는다.
방법:
- HTML 파일에서 <script> 부분만 추출하여 별도의 .js 파일로 저장한다. 예: script.js.
- 터미널을 열고 다음 명령어를 실행한다.
node script.js장점:
- 브라우저를 열 필요가 없다.
- 빠르게 테스트 가능하지만 DOM 관련 코드는 실행되지 않음.
3. 브라우저 환경에서 디버깅
DOM 관련 코드가 포함된 경우 브라우저에서 디버깅을 해야한다.
방법:
- HTML 파일을 브라우저에서 연다 (파일을 브라우저에 끌어다 놓아도 실행됨)
- **F12 (개발자 도구)** > Console 탭에서 JavaScript 실행 결과를 확인하거나 직접 코드를 실행할 수 있다.
- 브라우저에서 코드의 오류를 확인하거나 동작을 테스트한다.