자바스크립트 기초 강의 (드림코딩 by 엘리)
2강. script async 와 defer의 차이점
1. 참조 사이트
developer.mozilla.org 공식 (설명이 더 자세함)
2. 콘솔에 출력
console.log(“hello”)
3. async, defer 차이
————————————————————————-
<head>
<script src=”main.js”></script>
</head>
- parsing HTML
- blocked
- fetching js
- executing js
- parsing HTML
단점 : js 파일 용량이 크다면 화면 표시까지 오래 걸릴 수 있음
——————————————————————–
<body>
…
<script src=”main.js”></script> // body 태그 마지막에 위치
</body>
- parsing HTML
- fetching js
- executing js
단점 : 자바스크립트에 많이 의존적인 사이트라면 의미있는 정보가 표시되기까지 오래걸릴 수 있음.
————————————————————————————-
<script async src=”main.js”></script>
async 는 boolean 값 (true)
- parsing HTML
- fetching js (병렬로 js 파일을 다운 받음)
- blocked (js 파일을 다운 받으면 parsing 을 멈춤)
- executing js
- parsing HTML
장점 : 다운받는 시간을 절약
단점 : 자바스크립트 실행 시점에 HTML 요소가 존재하지 않아서 위험할 수 있음
자바스크립트 실행 동안에 HTML 파싱이 중단되므로 느릴 수 있다
—————————————————————————————
<script defer src=”main.js”></script>
가장 좋은 옵션
- parsing HTML
- fetching js (병렬도 다운)
- executing js (HTML 파싱 끝난 후 js 실행)
parsing 끝난 후 화면 표시 후 자바스크립트를 실행하므로 가장 좋은 옵션
<script async src=”a.js”></script>
<script async src=”b.js”></script>
<script async src=”c.js”></script>
- js 파일이 다운 받은 순서대로 실행 (b -> a -> c)
- js 파일이 서로 의존적이라면 문제가 될 수 있음
——————————————————————————-
<script defer src=”a.js”></script>
<script defer src=”b.js”></script>
<script defer src=”c.js”></script>
- 자바스크립트 파일을 모두 다운 받은 다음에 순서대로 실행 (a -> b -> c)
가장 효율적이고 안전하다
—————————————————————————–
‘use strict’
- ECMAScript 5 에 추가됨
- 선언되지 않은 변수를 사용할 수 없다.
3강. 데이터 타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)
// Use strict
// added in ES 5
// use this for Vanilla Javascript
‘use strict’
// 2. Variable
// let (add in ES6)
// Block scope
let globalName = ‘global name’; // Global scope (어플의 시작부터 끝까지 존재)
{
let name = ‘hello’
console.log(name);
}
// var (don’t evdr use this!)
// var hoisting (move declaration from bottom to top)
// 어디에 선언했는지에 상관없이 항상 선언을 맨 위로 올려줌
// hoisting : 끌어올려주다.
// has no block scope (블럭을 무시한다.
age = 4;
var age; // 선언이 맨 위로 끌어올려진다. (hoisting)
// 3. Constants
// favor immutable data type always for a few reasons;
// – security
// – thread safety
// – reduce human mistakes
const daysInWeek = 7;
const maxNumber = 5;
// Mutable : let
// Immutable : const
// 4. Variable types
// primitive, single item: number, string, boolean, null, undefined, symbol
// object, box container
// function, first-class function
const count = 17; // integer
const size = 17.1; // decimal number
// number – special numeric values: infinity, -infinity, NaN
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = ‘not a number’ / 2;
// bigInt (fairly new, dont’t do it yet)
const bigInt = 111111111111111111111111n; // n을 붙임 (over -2*53 ~ 2*53)
typeof bigInt; // bigint
Number.MAX_SAFE_INTEGER;
// string
const char = ‘c’;
const hello = ‘hello’;
const world = char + hello;
const helloBob = `hi $(hello)` // template literals (string)
// boolean
// false: 0, null, undefined, NaN, ”
// true: any other value
const canRead = true;
const test = 3 < 1;
// null (너는 텅텅 비어있는 empty 값이야)
let nothing = null;
// undefined (선언은 되었지만 값이 없다.)
let x;
let y = undefined;
// symbol, create unique indentifiers for objects
// id라는 값이 이미 있을 수 있으므로 심볼로 설정한다.
const symbol1 = Symbol(‘id’);
const symbol2 = Symbol(‘id’);
console.log(symbol1 === symbol2); // false
const gSymbol1 = Symbol.for(‘id’);
const gSymbol2 = Symbol.for(‘id’);
console.log(symbol1 === symbol2); // true
console.log(`value: ${symbol1.description}`);
// 5. Dynamic typing: dynamically tped language
let text = ‘hello’;
text.charAt(0); // h
text = 1;
text = ‘7’ + 5; // 75 (string)
text = ‘8’ / ‘2’ // 4 (number)
// object, real-life object, data structure
const ellie = { name: ‘hello’, age: 20}
ellie.age = 21;
https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2