자바스크립트를 html에 추가하는 방법은?

<script src="source.js"></script>

우리가 자바크스립트에서 console.log()를 사용할 수 있는 이유는 바로 console이라는 API가 있기 때문이다.이 API는 자바스크립트 언어 자체에 포함된 것이 아닌 브라우저에 포함되어 있는 API이다! 실제로는 window.console.log() 가 실행되는 것! 또한 브라우저에 딸려있는 개발 툴들을 잘 사용한다면 더욱 편하고 빠르게 코드 작성이 가능하다!

브라우저에는 console, preparation, application, memory등 많은 기능이 있으며 차차 알아가자. 공식문서를 보기 위해서는 developer.mozilla.org(이하 MDN) 라는 사이트를 이용하자!

JS를 포함하는 법 ( async VS defer)

우리가 html문서를 브라우저에 띄우면 브라우저는 먼저 HTML 문서를 parsing, 즉 위에서 한줄 한줄 읽어내려가며 분석한다. 읽어서 DOM으로 만드는 것!

읽다가 script태그를 만나면 해석을 멈추고 해당 주소로 가서 자바스크립트 파일을 다운로드 한 후 마저 읽어내려간다. 그래서 헤더에 script태그를 넣으면 해당 자바스크립트 소스가 크다면 읽는데 시간이 많이 걸리게 된다. 그래서 body의 제일 마지막 부분에 script를 추가하게 되는데 이렇게 한다면 파싱이 끝난 후 자바스크립트파일을 다운로드받기 떄문에 유저가 사이트를 조금 더 빨리 볼 수 있지만 사이트가 동적인 요소가 많다면 자바스크립트 파일을 불러오고(fetching) 실행하는(executing)데 시간이 걸리기 때문에 사이트의 동적인 요소를 이용하는데 문제가 생길 수도 있다.

그 다음으로는 asyn 옵션을 header에 넣는 방법이 있다

<header>
	<script asyn scr="source.js"></script>
</header>

Asynchronous 옵션을 주면 비동기적으로 자바스크립트파일을 받아온다. 즉 자바스크립트 파일을 다운받는 동안 브라우저는 계속해서 HTML Parsing에 집중하고 다운로드가 끝난 순간 파싱을 멈추고 해당 자바스크립트파일을 실행한 뒤 마저 파싱을 진행한다. 이 경우 장점은 병렬적으로 fetching이 일어나기 때문에 빠르게 실행할 수 있다. 하지만 이 경우 자바스크립트파일에서 querySelector등의 방법으로 DOM에 변화를 주는 부분이 포함되어 있다면 해당 DOM이 아직 파싱되지 않아 DOM조작 명령이 먹히지 않을 수 있다. 또한 fetching이 완료되면 파싱을 멈추기 때문에 사용자가 완성된 페이지를 보는 데에는 시간이 좀 더 걸릴 수 있다는 단점이 있다.

또한 여러개의 스크립트를 가져오는 경우 다운로드가 끝나는 순서대로 실행을 하기 때문에 위에 있는 스크립트 파일이 밑에 있는 스크립트 파일보다 먼저 실행됨을 보장할 수 없다. 스크립트 파일간에 순서가 있는 경우 문제가 될 수도 있다.

다음으로 defer 옵션을 header에 넣는 방법이 있다.

<header>
	<script defer src="source.js"></script>
</header>

이경우에는 js파일을 다운받으면서 병렬적으로 HTML parsing을 진행한다. 그리고 HTML Parsing이 끝나면 그때 자바스크립트파일을 실행한다.

또한 여러개의 스크립트를 가져오는 경우 defer는 순서대로 실행을 하기 때문에 다운로드가 끝난 뒤 문서의 순서대로 자바스크립트파일이 실행됨을 보장해준다.

‘use strict’

자바스크립트를 이용할 경우 맨 위에 'use strict' 를 써주는 것이 좋다. 특히 바닐라 자바스크립트를 사용하는 경우!

왜냐하면 자바스크립트는 10일만에 만들어졌기 때문에 상당히 유연하게 설계되었다. 유연함이란 곧 개발자가 많은 실수를 할 수 있다는 말이기도 하다. 자바스크립트에서는 선언되지 않은 변수에 값을 할당하거나, 기존에 존재하는 프로토타입을 변경한다던지 하는 행동이 가능하다. 'use strict'는 ES5에 탑재된 기능으로 해당 문구를 맨 위에 추가하면 여러 비상식적인 코드의 실행을 막아준다.

조금 더 상식적인 범위에서 코드를 짤 수 있고 브라우저의 실행 또한 약간 빨라지므로 바닐라자바스크립트를 사용한다면 ‘use strict’를 꼭 사용하도록 하자!