1. 배우기 전 영상 내용
ECMAScript 5, 6 -> 모던 자바스크립트
브라우저마다 자바스크립트가 잘 돌아갈 수 있도록 해주는 엔진들이 있음 -> 대표적으로 크롬에서는 V8, 이는 node나 electron에서도 이용되고 있음
BABEL : 개발자들이 개발할 때는 최신 버전의 자바스크립트로 하고, 배포 시에는 ECMAScript 5나 6로 변환해주는 자바스크립트 트랜스컴파일러
SPA(Single Page Application)를 자바스크립트로 구현하기 위해서 만들어진 프레임 워크들이 대표적으로 리액트, 뷰, 앵귤러 등이 있다.
자바스크립트를 활용해서 node로 백엔드, react-native로 모바일, electron으로 데스크탑 어플리케이션을 만들 수 있다.
웹 어셈블리로 자바스크립트 이외의 언어들로 웹 어플리케이션을 만들 수 있게 되었다.
2. async vs defer
- 편집기와 관련된 유용한 정보
크롬 콘솔 여는 단축키
윈도우 : ctrl + shift + i
맥 : cmd + opt + i
VSCode 검색 단축키 : ctrl + p
VSCode에서 자바스크립트 코드 바로 실행할 수 있게 해주는 extension plugin : live server
- console.log로 알아보는 간단한 동작원리
API(Application Programming Interface) :
js 파일에서 console.log('Hello World')를 작성하고 웹이나 node.js로 실행했을 때 출력되는 것은
웹과 node에는 console과 관련된 APIs를 가지고 있기 때문이다. 이는 언어 자체에 담긴 요소는 아니다.
- 공식사이트
공식사이트는 ecma-international.org가 맞지만,
developer.mozilla.org 가 훨씬 설명이 잘 되어 있는 편이다. MDN이라고도 함.
- async vs defer
parsing : 브라우저가 코드를 한 줄씩 분석하는 작업을 말함, html을 css와 병합해서 DOM요소로 변환하는 과정
1) script 파일이 head 태그에 포함되어 있는 경우
<!DOCTYPE html>
<html lang="en">
<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 src="main.js"></script>
</head>
<body>
</body>
</html>브라우저 동작 과정 : parsing html -> fetching js (main.js 다운로드 받는 과정) -> executing js (js 파일을 실행) -> parsing html
fetching, executing 하는 과정이 발생하게 되면 parsing 과정이 멈추게 됨
단점 : js 파일의 크기가 엄청 크고, 인터넷이 느리다면 사용자가 웹사이트를 보는데까지 걸리는 시간이 오래 걸리게 된다.
2) body 부분에 포함되어 있는 경우
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>브라우저 동작 과정 : parsing html -> fetching js -> executing js
단점 : 사용자가 기본적인 html 요소를 빨리 볼 수는 있지만, 사이트 자체가 js에 의존적이라면 의미 있는 컨텐츠를 보기 위해서는 fetching, executing하는 시간까지 모두 기다려야 한다.
3) head + async
<!DOCTYPE html>
<html lang="en">
<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="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>async은 불리언 타입으로, 기본적으로 true로 설정되게 된다.
동작 과정
parsing html -> blocked -> parsing html
fetching js -> executing js
js 파일이 있으면 병렬적으로 처리를 하게 된다. js 파일 다운로드를 html 파싱을 진행하면서 함께하고, 다운로드가 완료되면 파싱을 멈추고 js 파일을 실행한다. 실행 완료 후 다시 나머지 html 파싱을 진행한다.
장점 : 병렬적으로 처리하기 때문에 다운로드 시간을 줄일 수 있다.
단점 : 자바스크립트 파일에서 쿼리 셀렉터를 이용해서 DOM요소를 조작해야 하는 경우에는 아직 html 요소가 정의되지 않아서 조작하는데에 문제가 발생할 수 있게 된다. 또한, 여전히 자바스크립트 파일을 실행할 때 파싱을 멈춰야 하기 때문에 사용자가 사이트를 보는데에 시간이 오래 걸린다.
4) head + defer
<!DOCTYPE html>
<html lang="en">
<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 defer src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>동작 과정
parsing html -> executing js
fetching js
html 파싱과 js 파일 다운로드를 병렬적으로 처리하고, 파싱이 다 완료된 이후에 js 파일을 실행한다.
5) 심화 내용
head + async
동작 과정 : 정의된 스크립트 파일 순서에 상관없이 다운로드가 완료된 파일 순서대로 실행하게 된다.
파일을 정의한 순서대로 사용하고 싶은 경우에는 async를 사용하게 되면 문제가 발생한다.
head + defer
동작 과정 : 파싱을 진행하는 동안 js 파일을 모두 다운로드 받고, 파싱이 완료된 후에 정의된 순서에 따라서 js 파일을 실행하게 된다.
'use strict'
ECMAScript 5 에 추가된 기능
순수 바닐라 자바스크립트를 사용할 때는 선언해주는 것이 좋음
자바스크립트는 빨리 개발된 언어이기 때문에 다른 언어에 비해서 유연한 특성이 있음
문법적으로는 비상식적인 코드지만, 웹 상에서는 아무런 문제 없이 돌아갈 수도 있기 때문에 이를 선언하고 개발하는 것이 좋음
또한, 자바스크립트 엔진이 더 효율적으로 코드를 분석하게 해준다. 성능 개선도 기대할 수 있게 된다.
출처
https://www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3
'JavaScript > 드림코딩 엘리 - 자바스크립트 기초 강의 (ES5+)' 카테고리의 다른 글
| 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) (0) | 2021.11.15 |
|---|---|
| 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (6편) (0) | 2021.11.11 |
| 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (5편) (0) | 2021.11.11 |
| 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (4편) (0) | 2021.11.11 |
| 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (3편) (0) | 2021.11.10 |
댓글