자바스크립트 사용하는 방법에는 2가지가 있다.
1. 인터넷 콘솔 화면 사용하기
(맥북 M1 기준) func + F12 를 누르면, 개발자 도구로 들어가진다.
콘솔을 클릭해서 콘솔 화면을 보자.
console.log 또는 alert 등을 입력하면 반응이 돌아오는 것을 확인할 수 있다.
콘솔에 자바스크립트가 항상 대기하고 있다는 의미이다.
2. 프레임워크 이용하기 (VScode)
콘솔에서는 한번에 사용할 수 있는 양이 매우 적다. VScode에서 파일을 만들어 사용하자.
VScode에서 단순히 파일을 만들고 alert(”hi”) 를 입력하면 아무런 일도 일어나지 않는다.
출력만 해줄뿐...!
즉, 브라우저가 아무런 일도 하지 않는다. 브라우저는 파일을 열뿐이다.
이때 필요한 파일은 html 이며, html은 브라우저와 직접 연결된다.
그래서 브라우저에 css 와 js 를 적용할 때는 html을 활용해야한다.
html 파일에 css 파일을 링크하고, html 파일을 인터넷에 실행하면 적용되는 모습을 볼 수 있다.
다음과 같이 app.js를 추가하고 실행하면, js 또한 적용되는 모습을 볼 수 있다.
정리
"브라우저 개발자 도구의 콘솔화면" 과 "VScode의 html파일"을 통해서 자바스크립트를 실행할 수 있다.
VScode 를 이용할 때는 html 파일에 js 파일을 링크해야한다.
jaekim