JavaScript 기초 1

JavaScript 를 공부하기 전, 꼭 짚고 넘어가야 할 지식에 대한 정리 !!

• Web API 란?

  Web Application Programming Interface 의 약자로, 브라우저가 이해하는 함수라는 의미

• 브라우저가 HTML 페이지를 다운받아서 실행하는 순서

  위에서 부터 한 줄 씩 분석해서, HTML 과 CSS 를 병합해서 parsing 한 후, 브라우저에 정보를 보내고, 브라우저는 해당 정보를 렌더링 한다.

• head 안에 스크립트가 포함되었을 때의 실행 순서

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

HTML 코드를 한 줄씩 읽어서 parsing 하다가, script 가 보이면 HTML parsing 을 멈추고, script 를 다운로드 한 후 실행한다. 그 후 다시 HTML 을 parsing 하여 브라우저에 정보를 전달한다.

위와 같은 코드는 js 파일이 큰 반면, 인터넷 속도가 느리다면 사용자가 HTML 페이지를 보기까지 시간이 걸리게 된다. 이 경우, body tag 의 가장 마지막에 script 를 넣는 방법이 있다.

HTML 이 전부 parsing 된 후 script 를 다운로드-실행 하기 때문에, 사용자가 HTML 컨텐츠를 빨리 볼 수 있는 장점이 있다.

하지만, 해당 HTML 페이지가 js 에 의존적이라면 (js 에서 조건별로 표시되는 내용이 다르다거나..) 정상적인 페이지 로드가 되지 않을 수 있다. 또한 js 를 실행하는 시간까지 기다려야 한다.

• async 를 활용했을 때

<script async src="../test.js"></script>

HTML 코드가 parsing 될 때, 스크립트 다운로드와 실행을 동시에 한다.
브라우저가 HTML 을 다운로드하고 parsing 하다가, async 가 보이면 parsing 을 멈추고, script 를 다운로드 한다.

다운로드가 끝나면 script 를 실행하고, 나머지 HTML 을 parsing 한다.

parsing HTML > fetching js, executing js > parsing HTML

이 경우, 다수의 스크립트가 있을 경우, 스크립트를 선언한 순서에 상관없이 다운로드가 끝난 스크립트를 실행한다.

장점 : 빠르다
단점 : 스크립트 선언에 의존적이라면 문제가 발생할 수 있다. HTML parsing 이 끝나기 전에 스크립트를 실행하기 때문에, 스크립트에 의존적인 HTML 이라면 정상적으로 작동하지 않을 수 있다.

• defer 를 활용했을 때

<script src="../test.js" defer></script>

HTML 이 parsing 될 때 스크립트를 다운로드만 시켜놓고, 실행은 HTML parsing 이 끝난 후에 한다.

defer 를 사용하지 않으면 기본적으로 설정 값은 true 이고, 사용한다면 false 이다.

참고자료-외부 JavaScript 불러오기 (async, defer)

... 작성 중

• 바닐라 스크립트로 코드를 짤 때..

  코드의 가장 위에 use strict; 를 선언한다.

이렇게 하면 선언되지 않은 변수에 값을 할당하거나, 타입에 상관없이 변수에 값을 담는 등의 처리에 에러가 발생하게 된다. JavaScript 의 유연함은 사라지지만 보다 안전한다.