출처 : https://nomadcoders.co/javascript-for-beginners
바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders
Javascript for Beginners
nomadcoders.co
요약 :
처음으로 JS 프로그래밍 언어를 다뤄볼 것이다.
그런 후 프로젝트를 만들고
HTML이랑 자바스크립트를 어떻게 연결할 수 있는지 이해하게 된다.
자바스크립트를 다루는 방법은
브라우저의 console을 사용하는 것이다.
자바스크립트는 브라우저에 이미 설치되어 있다. 설치할 필요 없다.
브라우저에서 마우스 우클릭 - 검사 - Console
Console에서 function을 해볼 것이다.
콘솔에서 무언갈 했을 때
브라우저에 무슨 영향을 끼치는지 확인.
alert("hi") 코드를 엔터를 눌러서 실행할 것이다.
브라우저에 영향을 미쳤다. (브라우저에서 hi라고 알림이 떴다.)
콘솔에서 자바스크립트를 아주 쉽게 다뤄봤다.
언제든 자바스크립트로 무엇을 하고 싶다거나 테스트 해보고 싶다면
콘솔에서 하면 된다. 왜냐하면 자바스크립트가 콘솔에 있기 때문.
예 : 1+1 - 엔터 -> 2
컴퓨터가 이해할 수 있는 코드여야 한다.
이해할 수 없으면 에러가 난다.
문제는 콘솔에 일일이 작성하는 것이 귀찮다는 것이다.
왜냐하면 콘솔은 긴 코드를 쓸 용도로 만들어진 것이 아니기 때문.
우리는 코드를 보고, 스크롤 하고, 복붙도 하고싶다.
하지만 콘솔에서는 하기 힘들다.
왜냐하면 콘솔에서는 한 줄씩만 작성할 수 있다.
콘솔은 자바스크립트와 상호작용하긴 좋지만
정말 긴 자바스크립트 프로그램을 작성해야 한다면 유용하진 않다.
그러려면 자바스크립트 파일을 만들어야 한다.
그러기 전에 일단 'momentum' 폴더를 만들 것이다.
그러고 나서 VSCode로 실행.
파일 만들기 -> script.js or app.js, index.html
app.js에 alert("hi") 코드 작성 후
브라우저로 끌어다가 실행. (브라우저에서 글자만 떴다.)
우리가 원하는 것은 이게 아니라 경고창을 띄우는 것이다.
브라우저로 자바스크립트 파일을 열었는데
브라우저는 파일 안의 내용을 그대로 보여주고만 있다.
우리는 브라우저가 이 자바스크립트 파일을 실행하기를 바란다.
다른 파일로 시도.
폴더에 style.css 파일 생성.
style.css 안에 아래와 같이 작성.
브라우저로 열어보면, app.js와 같은 현상이 일어난다.
우리는 파일을 실행하는 것이 아니라 그냥 열어보고 있다.
브라우저는 사실 css파일을 이런 식으로 실행하지 않는다.
또한 자바스크립트도 이런 식으로 실행하지는 않는다.
중간 접착제 같은 것이 필요하다.
그 접착제는 바로 HTML이다.
브라우저로 HTML을 열고,
HTML은 CSS와 자바스크립트를 가져온다.
HTML이 접착제라는 것을 기억하라.
VSCode로 index.html 파일을 열고
'!' + 엔터를 하면 기본값으로 설정된다.
<title> 부분에서 제목을 Momentum으로 바꿔주고
<meta> 아랫칸, <title> 윗칸에 'link'를 입력하면
이렇게 뜨는데 'link:css'를 선택한다.
rel(relationship)은 stylesheet라고 적고
href에는 style.css라고 적는다.
(이전에 style.css 파일을 만들었기 때문에 그 파일이 있다.)
저장 후 index.html 파일을 브라우저로 열면 배경색이 바뀌어 있다.
자바스크립트도 똑같이 하면 된다.
자바스크립트는 보통 <body>태그에서 가져온다.
<body></body>사이에 <script src="app.js">라고 적으면 된다.
적은 다음 </script>로 스크립트를 닫아준다.
저장한 후
브라우저에서 웹페이지를 refresh하면
hi 알림이 뜬다.
브라우저는 HTML을 실행해서
줄을 보고 style.css 파일을 실행시키는 것이다.
자바스크립트도 마찬가지.
두 가지 엔진이 돌아가고 있다.
하나는 CSS 엔진
다른 하나는 JS 엔진
두 가지 모두 브라우저에서 사용되는데
브라우저가 실행되어야 하는 파일이 있다는 것을 확인했을 때 사용된다.
우리는 대부분의 시간을
자바스크립트 쪽을 변경하는데 보낼 것이다.
제대로 된 자바스크립트 코드가 아닌 코드를 입력했을 때
웹 페이지에서는 HTML이랑 CSS가 보여지지만
콘솔에 가서 확인 해보면
자바스크립트가 에러라고 알려준다.
(검사 - 콘솔이 아닌) 검사 - Elements로 가면 HTML을 볼 수 있는데
<body>...</body> 부분을 클릭하면
우리가 작성한 CSS를 볼 수 있고
Console로 가면
자바스크립트 에러가 있는지를 볼 수 있다.
이제 우리는 각각을 어디서 볼 수 있는지 알았다.
우리는 보통 콘솔을 열어둔 채로 둘 거고,
문제를 해결하고 나면 새로고침을 할 것이다.
그러면 콘솔은 빈 창이 된다. (에러가 없다는 뜻)
콘솔을 열어두는 것에 익숙해지도록 하자.
우리는 HTML을 새로고침 하는 것이다.
왜냐하면 HTML이 CSS와 JS를 가져오기 때문.
느낀점 :
굵은 글씨 -> 중요한 것
밑줄 -> 외우면 편리한 것
HTML, CSS, JS로 어떻게 웹페이지를 표현하는지 알았다.
기본적인 틀을 알게 되었다.
HTML에 대해 생활코딩으로 공부하고 보니 또 새롭다.
'국비학원 전 강의 필사 > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글
| #2.1 Basic Data Types - <바닐라JS-크롬 앱 만들기> (0) | 2022.08.13 |
|---|---|
| #1.5 Why JS - <바닐라JS-크롬 앱 만들기> (0) | 2022.08.12 |
| #1.4 Why JS - <바닐라JS-크롬 앱 만들기> (0) | 2022.08.11 |
| #1 Introduction - <바닐라JS-크롬 앱 만들기> (0) | 2022.08.09 |
댓글