티스토리 뷰

Frontend/JavaScript

[JavaScript | 드림코딩] script async 와 defer차이

blueprint-12 2022. 4. 3. 18:35

최신 ECMAScript인 TypeScript를 개발할 때 사용하고 사용자한테 배포할때는 BABEL(타입스크립트를 ES5, ES6의 형태로 변환된 코드로 만들어주는 자바스크립트 트랜스컴파일러 )을 이용한다.

 

현재 동향

SPA (Single Page Application) -> 하나의 페이지 안에서 필요한 데이터를 가져와 부분적으로 업데이트하는 형식 

이러한 SPA를 조금 더 쉽게 구현하기 위해서 사용되는 대표 js프레임워크가 바로 React.js Angular.js Vue.js 인 것입니다. 

 

강력한 자바스크립트 엔진V8*을 통해서 node.js(Back-end)가 등장 

*V8은 google이 개발했으며 chrome과 node.js에서 사용됩니다. 

 

JavaScript는 WebAPI와 헷갈릴 수 있는데 다르다. 

사용 에디터: vscode(비주얼스튜디오코드)

 

node가 내 PC에 깔려있다면 cmd(명령프롬프트)에서 실행할 js파일이 있는 경로로 이동해서(명령어:cd 경로) 해당 파일이 있는 곳에서 node 파일명.js를 해주면 js파일이 실행된다. 

->어떻게 가능할까? node.js에는 자바스크립트 엔진 V8이 있기 때문에 브라우저 없이도 실행이 가능한 것이다.

F12(혹은 ctrl + shift + i )를 통해 크롬 개발자도구를 연다. 

개발자도구의 상단에 보면 Elements, Console등 여러가지가 있다.

  • Console: 자바스크립트 코드를 작성해서 확인해볼 수 있음-> 여러줄의 자바스크립트 코드를 작성해야할 경우, Source 내부에 Snippet(스니펫)을 사용하면 편합니다. 
  • Sources: break포인트를 걸어서 Debugging할 때 유용 
  • Network: 네트워크가 얼마나 발생하는지 얼마나 많은 사이즈의 데이터들이 오고가는 지 검사가능

JS 공부를 할 때 참고해야하는 1순위: 공식문서 홈페이지

ecam script 공식홈페이지(ecma-international.org)가 원조긴하지만 개발자가 보기엔 난해한 감이있다. 

그렇기 때문에 MDN (developer.mozilla.org)를 많이 사용함 + w3schools도 있지만 여기는 공식사이트가 아니라 노르웨이의 한 회사가 만든 사이트이므로 MDN을 참고해서 공부하자 

 

🍕script 포함 시 async 와 defer의 차이점

1. head + script 

브라우저가 HTML파일을 다운받고 위부터 아래로 코드 한줄한줄을 파싱(이 과정에서 CSS파일과 병합해서 DOM요소로 변환)하다가 script 태그를 만나면 파싱을 멈추고(block상태) 서버로부터 자바스크립트 파일을 다운받는다. 스크립트 파일이 로드하고 실행된 이후에 다시 HTML을 파싱한다. 

  • 실행과정: parsing HTML -(head태그 안의 script태그 발견 후 blocked 상태됨) -> fetching js + executing js ->다시 parsing HTML

특징: html 요소가 화면에 표시되기 전에 script 파일을 다운받는 것이기 때문에 사용자 입장에서 빈화면을 보고 있을 수도 있음 잘 사용되지 않는 script태그 배치 방식

 

2. body + script (body 태그의 가장 끝쪽에 script태그 넣기)

  • 실행과정: parsing HTML -> page is ready -> fetching js + executing js(다운받고 실행) 

특징: js파일을 받아오기전에 완성된 페이지를 사용자에게 보여줄 수 있음 HTML 컨텐츠를 먼저보여주는 것은 좋지만 js파일에 의존적인 웹사이트라면 자바스크립트 파일이 fetching되고 실행될때까지 기다려야하는 단점이 존재

 

 

3. head + async 

  • async? - boolean 타입의 속성값, 선언하는 것만으로도 true로 설정되어있기 때문에 해당옵션을 사용할 수 있다. 
  • 실행과정: parsing HTML + fetching js 를 병렬로 처리-> executing js 를 할 때 blocked 됨 -> 다시 parsing HTML -> page is ready 
  • async 옵션으로 다수의 스크립트를 다운로드받게 되면 먼저 다운로드 받은 애부터 실행을 시작함 -> 즉, 위부터 아래로 순차적으로 실행되어야 하는 자바스크립트 파일이라면 async 옵션을 쓰면 안된다. 

특징: 병렬처리를 하기 때문에 js파일을 다운로드받는 시간을 절약할 수 있지만 자바스크립트가 HTML이 parsing되기도 전에 실행되기 때문에 오류를 초래할 수 있음( e.g.)html DOM요소를 사용해서 querySelector를 했는데 아직 정의되어있지 않기때문에 오류반환할 수도 있다는 말) 또, 자바스크립트를 실행할 때 언제든지 parsing HTML을 멈추기 때문에 사용자는 화면이 로드되기까지 더 기다려야한다. 

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script async src="something.js"></script> 
</head>

 

4. head + defer

  • 실행과정: parsing HTML + fetching js 병렬처리 -> page is ready -> executing js
  • defer의 경우, 다수의 스크립트를 다운로드받게 되면 순차적으로 js파일을 실행시킴
  • 가장 효율적이고 안전한 방식  

head태그에서 script를 만나면 js파일을 서버로부터 다운로드 받아놓자 라고 명령만 시켜두고 HTML parsing이 완료(page is ready)될때까지 기다렸다가 executing js를 한다. 

<head>
<!--위와 동일 생략-->
<script defer src="something.js"></script> 
</head>

 

🍕자바스크립트 파일 작성 시 맨 상단에 use strict 사용하기

- 'use strict' 엄격모드 지원 <- ECMAScript 5에 추가된 내용기존의 느슨한 모드(문법적으로)에서 엄격 모드로 전환함으로써 아래와 같은 효과를 얻습니다.

  1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
  2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.
  3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.

-> 간단하게 말하자면 선언되지않은 변수에 값을 할당을 하거나 했을 때(기존에 용인되던 문법), 오류를 반환하여 자바스크립트의 문법적 유연성이 가져다주는 위험성을 방지해줍니다. 

 

※주의: 상충되지않는 스크립트끼리의 맹목적인 연결은 불가능합니다. 스크립트끼리의 결합은 이상적이지 않지만 만약에 꼭 그래야만한다면 함수를 기준으로 엄격모드를 사용해야 한다. 

 

-자바스크립트의 맨 위 상단에 'use strict';  라고  정의해준다.(전체적용), 함수 본문 첫줄에 작성해준다. (함수적용) 외에 모듈에도 적용할 수 있습니다.  // typeScript의 경우, 'use strict' 라고 써줄 필요없음! 

'Frontend > JavaScript' 카테고리의 다른 글

[JavaScript | 드림코딩] 클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리  (0) 2022.04.06
[JavaScript | 드림코딩] 함수의 표현과 선언(표현식, 선언문, 화살표 함수 등)  (0) 2022.04.06
[코딩애플] 실전 자바스크립트  (0) 2022.04.01
[생활코딩][웹브라우저JS] - JSON(JSON과 Ajax)  (0) 2022.02.22
[생활코딩][웹브라우저JS] - 네트워크 통신(Ajax)  (0) 2022.02.20
댓글