해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 2강을 보고 작성한 글입니다.
2강은 콘솔에 출력, script async 와 defer 의 차이점 등에 대해서 배운다.
Console API
Console API 는 web API 중 하나이다.
API(Application Programming Interface) 는 브라우저가 제공하고 브라우저가 이해할 수 있는 함수들을 말한다.
Console 은 언어 자체에 포함된 언어는 아니지만, 통상적으로 많이 쓰여서
node.js 나 web API 에서 공통적으로 포함되어 있다.
똑같은 console API 를 통해서 node.js 에서도, 브라우저 상에서도 console 창에 결과가 출력되는 것을 확인할 수 있다.
Dev Tools (개발자 도구)
Console 탭
브라우저에 포함된 dev tools 활용하면, 공부할 때 / 현업에서 도 유용하게 사용할 수 있다.
브라우저의 console 탭에서 자바스크립트를 실행할 수 있다. 간단한 기능들을 충분히 사용해볼 수 있다.
Source 탭
디버깅할 때 유용하게 사용할 수 있다. break point 주어 에러를 찾을 수 있다.
Network 탭
네트워크가 어떻게 발생하는지, 얼마나 많은 사이트들에 데이터가 오고가는지 검사할 수 있다.
자바스크립트의 공식사이트(ecma)
ecma
ecma-international.org
공식 사이트이며, 자바스크립트의 문법이 정리되어있다.
하지만, 개발자들에게 좀 난해한 사이트라고 평가된다. (비추천)
Mozilla
developer.mozilla.org
가장 많은 개발자들이 공식사이트처럼 사용하는 사이트이다. (추천)
개발자들은 주로 MDN 에서 자바스크립트를 검색하고 공부한다.
async vs defer
head 안에 script 를 포함한 경우
사용자가 html 파일을 다운로드 받았을 때, 브라우저가 한줄 한줄씩 코드를 분석한다.
한줄 한줄씩 분석하고 이해하는 것을 parsing HTML 이라고 한다. parsing 한 코드들을 CSS 와 병합해서 DOM 요소로 변환한다.
HTML 코드들을 parsing 하다가 script 태그를 발견하면, main.js 를 다운로드 받아야 함을 이해한다. 그래서 parsing HTML 을 잠시 멈추고, 필요한 자바스크립트 파일을 다운로드(fetching js) 받아서, 실행(executing js)한 다음에, 다시 parsing HTML 을 수행한다.
- (단점) js 파일의 용량이 매우 크고, 인터넷 속도가 엄청 느리다면 사용자가 우리의 웹사이트를 보는 데 많은 시간이 소요된다.
- 그래서 script 를 head 에 포함하는 방식은 좋은 방식이 아니다.
body 안의 가장 마지막에 script 를 추가한 경우
브라우저가 html을 다운받고, parsing 하면서 페이지를 준비한 다음에, script 를 만나서 fetching js(스크립트를 서버에서 받아오기) 하고, executing js 하게 된다.
page 가 js 파일을 다운받기 이전에도 준비가 되어있다.
- (장점) 사용자가 html 컨텐츠를 비교적 빠른 속도로 확인할 수 있다.
- (단점) 사용자가 사용하는 웹사이트가 js에 굉장히 의존적인 사이트라면, 사용자가 의미있는 컨텐츠를 보기 위해서는 ( fetching js + executing js ) 시간을 기다려야 한다.
( head + async ) head 안에 script 를 이용하되, script 내에 asyn 라는 속성값을 이용하는 경우
asyn 는 boolean 타입의 속성값이다. 선언하면 디폴트 값은 true 로 설정된다.
asyn 사용시 parsing HTML 하다가 병렬로 main.js 파일을 다운받아라 라고 명령만 하고 다시 parsing HTML 한다. js 파일 다운로드가 완료되면, 그때 parsing HTML 을 멈추고, 다운로드된 js 파일을 실행한다. 실행을 한 후, 나머지 html parsing 을 마무리한다.
- (장점) parsing HTML 동안, fetching js 가 병렬적으로 수행되는 거라서 다운로드 js 시간을 절약할 수 있다.
- (단점1) js 가 parsing HTML 완료 전에 실행되기 때문에, 만약 js 파일에서 querySelector 를 이용해 DOM 요소들을 조작하는 코드가 있다면, 조작하려는 시점에 우리가 원하는 HTML 요소가 아직 정의되어 있지 않다면 위험할 수 있다.
- (단점2) parsing HTML 동안 언제든지 js 실행하기 위해 멈출 수 있기 때문에 페이지를 보는 시간이 좀 더 걸릴 수 있다.
( head + defer )
head 안에 script 를 사용하고 속성값으로 defer 를 사용한다.
defer 발견시 fetching js 를 명령해놓고, 병렬적으로 parsing HTML 을 진행한다.
parsing HTML 이 끝난 후 다운로드 된 js 파일을 가지고 executing js 수행한다.
-
( head + defer ) 이 가장 좋은 옵션
-
(장점) parsing HTML 이 끝난 후, 바로 page 를 보여준다.
use strict
바닐라 자바스크립트 사용시 js 파일 가장 상단에 use strict 를 사용하는 것이 좋자바스크립트가 굉장히 유연하지만, 위험하기도 하는, 선언되지 않은 변수의 값을 할당하거나, 기존에 존재하는 프로토타입을 변경한다는지 등 비상식적인 행위가 가능하다.
use strict 는 ECMAScript 5 에 추가되어 있다.
use strict 사용시에는 비상식적인 행위가 불가능해져 보다 더 안전한 코드를 작성할 수 있다.
그리고 자바스크립트 엔진이 더 효율적으로 빠르게 스크립트를 분석할 수 있어, 성능 향상에도 기대해 볼 수 있다.
