바닐라 JS로 크롬 앱 만들기 #2 (1)
이전 강의에서 말한거처럼 JS를 사용하려면 브라우저만 있으면 된다!
사용하는 브라우저에 들어가서 F12를 누르면 콘솔창이 뜬다! 나는 크롬을 사용했다!
브라우저만으로 자바스크립트를 사용해보기 위해 function을 해볼건데
alert("hi")라고 입력 후 엔터를 치면
경고문이 뜨면서 브라우저에 영향을 끼친것을 볼 수 있다.
즉, 콘솔에서 js를 아주 쉽게 다루고 있다는 뜻이다!
브라우저에 있는 콘솔을 사용해서는 간단한 계산이나 간단한 코드를 쓰기엔 불편함이 없지만
이 콘솔은 JS와 상호작용이 좋긴 하지만 긴 JS프로그램을 만들기에는 적합하지 않다!
따라서 긴 JS프로그램을 만들기 위해서는 JS파일을 만들어야한다.
나는 자바스크립트를 공부하기 위해서 강의와 같은 VSCode를 사용하고 있다.
VSCode에서 폴더를 생성하는 방법은
이미 생성되어 있는 폴더를 여는 것이기 때문에 미리 컴퓨터에 파일을 만들어줘야한다.
강의와 같이 MOMENTUM이라는 폴더 만드는 방법
[C:] → [사용자] → [Default] → [Documents]에 가서 MOMENTUM 이라는 폴더를 생성한다.
VSCode에서 [파일]->[폴더열기]->(미리 생성해놓은) [MOMENTUM] 폴더를 열면 된다!
만들 app.js에 콘솔과 똑같이 alert("hi"); 를 입력한다.
그럼 app.js에 입력한 그대로 출력이 된다.
브라우저는 js 파일을 여는데 그닥 효과적이지 못하다.
왜냐면? 내가 원하는 결과는 처음 크롬 콘솔창에 입력했을 때처럼 경고창을 띄우는것이다.
즉, 브라우저가 이 js파일을 여는 것이 아닌 실행하는 것을 원한다는 뜻!!
css도 js와 결과는 같다!
app.js와 style.css는 브라우저로 열면 파일을 실행하는게 아니라 그냥 열어서 출력하는 것이다.
크롬 콘솔창에서처럼 경고창을 띄우기 위해서는 css와 js를 하나로 묶어줄 접착제가 필요한데 그것이 바로 html
브라우저로 html을 열어 파일을 실행시키고, html은 js와 css를 가져오는 역할을 한다!
자동으로 생성된 코드에 <link rel ="styleheet" href="style.css"> 코드를 입력해서 css파일을 추가해주고
저장하고 다시 브라우저로 html을 열어보면 css 파일에 설정했던대로 배경색이 바뀐다!
<body>
<script src="app.js"></script>
</body>