[JavaScript/드림코딩] 콘솔 출력, script async와 defer 차이점

본 포스트는
드림코딩님의 자바스크립트 기초 강의 (ES5+)를
수강 후 정리한 노트입니다.

---

콘솔 출력

console.log('Hello World!');

위와 같은 JS파일을 작성 후 main.js라는 이름으로 파일을 저장한다.

만약 PC에 Node.js가 설치되어 있다면, 방금 작성한 JS파일을 화면에 출력시킬 수 있다.

 

콘솔을 실행한 다음 main.js 파일을 저장한 경로로 이동 후 아래와 같은 명령어를 입력하면 위에서 작성한 'Hello World!'가 콘솔에 출력되는 것을 확인할 수 있다.

node main.js

 

 

아래 사이트에서 각 운영체제에 맞는 Node.js를 다운로드할 수 있다.

클릭 시 Node.js(한국) 다운로드 사이트로 이동할 수 있다.

---

script async VS defer

script

• head 태그 안
• body 태그 안
  • 사용자가 기본적인 HTML 컨텐츠를 빠르게 볼 수 있으나, 웹이 JS에 의존적이라면 정상적인 페이지를 보기 전까지 기다리는 시간이 걸린다.
• head 태그 안 async 속성
• head 태그 안 defer 속성

 

async

• boolean 타입으로, 기본값이 true다.
• 선언하는 것만으로도 사용할 수 있다.
• body에 script를 사용하는 것보다는 다운 시간을 절약할 수 있으나, HTML이 parsing되기 전에 실행된다.
• 사용자가 페이지를 보기까지 여전히 시간이 걸릴 수 있다.

 

defer

• parsing하다 script 명령만 시켜놓고 HTML을 parsing한 다음 다운로드된 JS를 실행한다.
• 가장 좋은 옵션이다.

---

strict

'use strict';

• strict 모드로 개발할 수 있게 해준다.
• 실행하는데 있어 조금 더 나은 성능 개선이 가능하다.

---

참고

• Console Standard
• Console API
• ecma
• MDN Web Docs