자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
무작정 프로그램을 짜는 것도 괜찮긴 하지만 실제 취직을 하거나 현업에서 그런 방식을 이용하면 막히는 상황들이 발생할 것이다....^^..😭😭
큰 그림을 바라보면서 전반적인 것을 이해하되 자바스크립트 편에서는 조금 더 꼼꼼하게 동작원리들을 살펴보자!
Hello World!
node.js 와 웹 api 둘다 console에 관련된 api가 있다.
api application, programming, interface
웹 api는 자바스크립트 언어 자체에 포함된 것이 아니다 . 브라우저가 제공하는 브라우저가 이해할 수 있는 함수이다.
브라우저에 딸려 나오는 Dev Tools를 잘 활용해보자
https://developer.mozilla.org/en-US/docs/Web/JavaScript#Tutorials
w3s보다 모질라를 활용하자! 최신정보도 많고 예제도 많다. (정식)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>main.js 사이즈가 크면 사용자가 웹사이트를 보는데 많은 시간이 소요된다. 스크립트를 head에 넣는 것은 좋은 방법이 아니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>body 안에 가장 끝 부분에 많이 넣기도 한다 . 브라우저가 html을 다운받아서 쭈욱 파싱해서 페이지가 준비가 된 다음에 script를 만나서 스크립트를 feaching 하고 실행한다.
단점은 사용자가 기본적인 html 컨텐츠를 빨리 보는 장점이 있지만 만약 js에 의존적인 아이라면 사용자가 의미있는 컨텐츠를 보기 위해서는 이 자바스크립트를 이용해서 서버에 있는 데이터를 받아온다던지 아니면 돔 요소를 더 예쁘게 꾸며준다던지 그런 식으로 동작하는 페이지라면.. .. 기다려야 하는 단점이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script asyn src="main.js"></script>
</body>
</html>asyn 는 불리언 단위의 속성값이기 때문에 선언하는 것만으로도 ture로 사용되어진다. body 끝에 사용하는 것보다는 fetching 이 parsing하는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다.
하지만 이 javascript가 html이 파싱 되기 전에 실행되기 때문에 만약 js 파일에서 쿼리셀렉터를 통해 dom 요소를 조작한다고 하면 조작하려고 하는 시점에 html이, 우리가 원하는 요소가 아직 정의되지 않을 수가 있다. 그 부분이 조금 위험할 수 있다.
haed+defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script defer src="main.js"></script>
</body>
</html>defer 라는 옵션을 정의하는 방법.
html 을 파싱하는 동안 필요한 js를 fetching(다운받아)놓고 html 파싱을 먼저 해서 사용자에게 페이지를 보여준 다음에 바로 이어서 js를 실행하기 때문이다.
asyn와 defer의 차이점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<script defer src="a.js"></script>
<script defer src="b.js"></script>
<script defer src="c.js"></script>
</head>
<body>
</body>
</html>정의된 스크립트 순서에 상관없이 다운로드가 된 아이를 먼저 실행하기 때문에 만약 내가 사용하는 자바스크립트가 순서에 의존적인 것이라면 b 스크립트를 실행하는 데 있어서 a가 먼저 선행이 되어야 한다면 asyn 옵션을 사용하면 문제가 생길 수도 있다.
반대로 defer 같은 경우는 파싱하는 동안 필요한 자바스크립트를 다 다운받아 놓은 다음에 그 다음에 순서대로 실행한다.
'use strict';라는 것을 정의해주는 게 좋다. 왜?
브랜든이 자바스크립트 언어를 만들 때 굉장히 빠르게 만들었다.
이건 굉장히 ...😅😅😅😅
선언되지 않는 변수의 값을 ..사용하는 일비재하게 발생하는데 위의 선언을 해줌으로써 방지할 수 있다. 조금 더 상식적인 범위 내에서 이용 가능하도록 한다. 스크립트 엔진이 조금 더 빠르고 효율적으로 분석할 수 있기 때문에 조금 더 나은 성능 개선 부분까지 기대할 수 있다.
-이 글은 유투버 드림코딩 by 엘리 의
자바스크립트 기초 강의 (ES5+): 같이 노트를 작성하며 배워요 📒를 바탕으로 정리한 내용입니다.-
