JavaScript | 01. script async와 defer

도입
- node js에는 javascript의 엔진이 있어서 브라우저 없이도 js를 실행시킬 수 있음
- JS는 Console API를 사용
- async와 defer는 script태그를 사용할 시에 사용

API : Application Programming Interface

• 웹 API 는 브라우저가 이해할 수 있는 함수/ 명령어

• JS 공식사이트 : MDN 사이트 / 다른사이트도 많지만 MDN이 좀더 잘 설명 되어있고 빨리 올라온다

  MDN : Console API

async vs defer

• async - window의 load event 전 내려받는 즉시 바로 실행
• defer - 문서의 parsing작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행

DOM(Document Object Model)

문서 객체 모델은 HTML, XML문서의 프로그래밍 interface다
TAP을 제외한 화면까지가 DOM 부분이다

<script>위치에 따른 장단점

1. heder에 위치

   단점 : 시간이 오래걸림

   

2. body에 위치

   단점 : 파싱이 끝나고 패칭(js에 대한 다운로드)이 되는데 js기능이 많이 들어가는 페이지인 경우 기다리는 시간이 너무 오래걸림

   

3. head + async

   단점
   - parsing전에 js가 동작하기 때문에 dom조작 시 위험할 수 있음
   - parsing될 때 병렬적으로 다운로드 되긴 하지만 js가 실행되는 시간을 기다려야함

   

4. head + defer
   단점없음 완벽!
   가장 좋은 옵션이다
   

5. asnyc를 여러개 사용할 때
   단점 : 순서에 의존적인 동작이라면 문제가 될 수 있음
   

6. 여러개 defer했을 때 문제없음!
   

코드

// 'use strict' 왜쓸까? 
// javascript는 flexible하게 개발되었음
// flexible === dangerous
// use strict는 ECMAScript 5에 선언되어있음 
// vanilla js를 사용할 경우에는 'use strict'를 선언해주는게 좋음
// 미친 유동성 사라짐

'use strict'

console.log('hello world')

//오류: Uncaught ReferenceError: a is not defined
//'use scrict안쓰면 오류 안뜸'
a = 1

//밑에가 정상
// let a = 5
// console.log(a)

strict모드 선언

• 'use strict'을 사용할 경우
  a를 정의하지 않았을 때 에러를 잡아낸다
  

• 'use strict'를 사용하지 않을 경우
  a를 정의하지 않아도 에러를 못잡아낸다
  

😋드림코딩by엘리영상