Visual Studio Code 를 통해 HelloWorld 출력
1. Hello world를 화면에 출력
2. 자바스크립트 preparation(환경설정)
3. script를 html에 포함 시 어떤 방식으로 포함해야 가장 효율적인지?(async와 defer의 차이점??)
node.js에는 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트가 실행 가능하다.
Console APIs에서 그중에 log라는 함수를 이용해서 내가 원하는 메세지를 Console창에 출력하는 것이 확인 가능하다.
*** 여기서 API란?
Application Programming Interface 의 약자로 Web APIs는 자바스크립트 언어자체가 포함되어 있는것이 아니라
브라우저가 제공하는 즉 브라우저가 이해가능한 함수들을 의미한다.
즉 Console은 자바스크립트 언어 자체에 포함된 요소는 아니지만
통상적으로 많이 쓰이는 요소라서 node.js와 Web API에 공통적으로 포함되어 있어서
똑같은 Console API를 이용해서 node.js 에서도 출력가능 하고, 브라우저 상의 console tab에도 출력가능한 것을 확인할 수 있다.
어떤 언어든지 공식사이트에서 확인하고 공부하는 것이 가장 중요하다.
자바스크립트의 첫 번째 공식사이트 : https://www.ecma-international.org/
Home - Ecma International
Ecma International is an industry association dedicated to the standardization of information and communication systems Ecma is driven by industry members to meet their needs, providing a healthy competitive landscape based on differentiation of products a
www.ecma-international.org
** 자바스크립트의 두 번째 공식사이트 : https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
async VS defer
HTML에서 JavaScript를 포함할때 어떻게 포함하는 것이 더 효율적일까?
<head> tag안에 <script> tag를 포함하게 되면 사용자가 HTML 파일을 다운로드 받았을 때
브라우저가 한줄한줄씩 분석한다.
이렇게 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환하게 된다.
이렇게 쭉 HTML을 parsing 하다가 <script> tag가 보이면 main.js 다운받으라고 이해하게 된다.
그렇게 되서 HTML을 parsing 하는것을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아서 이것을 실행한담에 parsing 하는 부분으로 넘어간다.
이렇게하면 단점이 만약 js 파일이 크고 인터넷도 느리다면 사용자가 웹사이트를 보는데 많은 시간이 소요된다.
따라서 <script>를 <head>에 포함시키는 것은 좋은것이 아니다.
그 다음에 많이 작성하는 것이
<body> 안에 그것도 가장 끝부분에 <script>를 추가하는 것이다.
이렇게 하게되면 브라우저가 HTML을 다운받아서 쭉 parsing 해서 페이지가 준비가 된 다음에 <script> 를 만나서 서버에서 받아오고 실행하게 된다.
그래서 페이지가 사용자들에게 js를 받기전에도 준비가 되어있어서 page content를 볼수있다.
여기서의 단점은 사용자가 기본적인 HTML의 content를 빨리본다는 장점은 있지만
만약에 웹사이트가 자바스크립트에 굉장히 의존적인 페이지라면 사용자가 의미있는 content를 보기위해서는 사용자가 정상적인 페이지를 보기위한 대기시간이 길어진다.
<head>안에 <script>를 이용하되 asyn 라는 attr(속성값)을 사용하는 것이다.
asyn는 boolean 타입의 attr 이기 때문에 이렇게 선언하는것 만으로도 true로 설정되어서 async 옵션을 사용할수 있는데
이것을 사용하게 되면 브라우저가 HTML을 다운받아서 parsing을 하다가 async가 있으면
main.js를 다운받자 명령만 해놓고
다시 parsing을 하다가 main.js가 다운이 완료가 되면 그때 parsing 하는것을 멈추고
다운로드된 js를 실행하게 된다.
이렇게 다운로드된 js를 실행하고 나서 나머지 HTML을 실행하게 된다.
이 async의 장단점은 js 받는시간을 <body> 끝에 놓는 것 보다는 시간이 절약되지만
자바스크립트가 HTML이 parsing 되기 전에 실행되기 때문에
자바스크립트에서 DOM요소를 조작해야 된다면 조작할려는 시점에 HTML의 원하는 요소가 아직 정의되지 않을수있다.
HTML을 parsing 하는 동안에 언제든지 자바스립트를 실행하기 위해서 멈출수 있기 때문에
사용자가 페이지를 보는데 시간이 더 걸린다.
<head> 안에 <script>를 작성하고 defer 라는 attr을 작성한다.
HTML을 parsing 하다가 defer이 있으면 main.js를 다운받자는 명령만 해놓고 나머지 HTML을 끝까지 parsing 하게 된다.
그리고 마지막에 parsing이 끝난다음에 다운로드된 js를 실행하게 된다.
따라서 defer이 가장 좋은 옵션이다.
HTML을 parsing 하는동안 필요한 js를 다 다운받아 놓고 HTML을 parsing 먼저 해서 사용자에게 페이지를 보여준 다음에 바로 이어서 자바스크립트를 실행한다.
async 옵션으로 다수의 script를 다운받게 되면 먼저 다운로드된 것들을 실행하게 된다.
즉 정의된 script 순서랑은 상관없이 다운로드 된 script를 먼저 실행하기 때문에 만약 내가 작성한 자바스크립트가 순서에 의존적인 것이 라면 문제가 될 수 있다.
반대로 defer 같은 경우에는 parsing 하는 동안 필요한 자바스크립트를 다 다운 받아놓은 다음에
순서대로 실행하기 때문에 우리가 원하는 대로 스크립트가 실행 될 것이라고 예상 가능하다.
여러가지를 생각했을 때 <head> 안에 defer 옵션을 이용해서 쓰는것이 제일 효율적이고 안전하다고 볼 수 있다.
'use strict';
자바스크립트 이용 시 제일 윗부분에 'use strict' 를 정의해 주는 것이 좋다.
순수 바닐라 자바스크립트 이용 시 꼭 정의하는 것이 좋다.
(TypeScript를 쓸때는 전혀 선언할 필요 없다.)
Why??
자바스크립트는 굉장히 빨리 만들어진 언어이기 때문에 유연하게 만들어졌다.
즉 개발자가 많은 실수를 할 수 있다는 의미이다.
자바스크립트 에서는 선언되지 않은 변수의 값을 할당한다 든지, 이런 비상식적인 것들을 작성하게 되는데
'use strict'(added in ECMAScript 5) 를 작성하게 되면 그런 비상식적인 것을 쓸수없게 된다.
즉 srict 모드로 개발하는 것을 추천한다.
이 모드 사용시 조금 더 상식적인 범위 안에서 자바스크립트를 이용가능 하다.
또한 자바스크립트 엔진이 조금 더 효율적으로 더 빠르게 분석 가능하기 때문에 실행하는데 있어서 조금 더 나은 성능 개선 까지 기대 할 수 있다.
Dev Tools
elements tab을 활용해서 HTML에서 작성한 요소들을 확인하고 검사하는 기능을 했다면
console tab은 코드에서 작성한 메세지를 확인할 수 도 있지만 자바스크립트도 실행 가능하다.
즉 동적으로 요소들을 검사하고 간단한 기능들이 실행 가능하다.
source tab은 나중에 디버깅할때 굉장히 유용하게 사용가능 하다.
나중에 break point를 걸어서 디버깅할때 유용하게 쓰인다.
Network tab에 가면 네트워크가 어떻게 발생하는지 얼마나 많이 사이즈의 데이터가 오고가는지 검사도 가능하다.
'드림코딩_by엘리 > 유투브강의_JavaScript' 카테고리의 다른 글
| 드림코딩 by 엘리_ 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 (0) | 2021.09.10 |
|---|---|
| 드림코딩 by 엘리_ Arrow Function은 무엇인가? 함수의 선언과 표현 (0) | 2021.09.06 |
| 드림코딩 by 엘리_ 코딩의 기본 operator, if, for loop (0) | 2021.08.30 |
| 드림코딩 by 엘리_데이터타입 (0) | 2021.07.21 |
| 드림코딩 by 엘리_자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js) (0) | 2021.07.18 |