JS 2. 환경설정

다시 코딩앙마 강의에서 좀더 많은 부분을 배울 수 있는 드림코딩 강의로 돌아와
자바스크립트의 개념들을 정리해보려한다! JS1의 경우 자바스크립트의 역사 부분이기 때문에 포스팅을 생략하겠다!
자바스크립트의 역사는 대략적으로 단기간에 언어를 만들어서 JS는 다른 언어보다 유연하기에 에러가 나도 동작하는 경우가 있는데
ES6에서 오류를 잡기 위한 부분을 추가적으로 정의하였고, let const는 이의 대표적인 부분이라고 생각하면된다.

😄사전준비

VScode에 Liver server 툴 설치

Vs Code >마우스 오른쪽버튼>Open with Live server
(실시간으로 편집할수 있고 개발자도구 형식이다.)

---

🌳토막상식

Node js, 웹 API 동일하게 console에 관련된 API있음. API들의 interface 둘다 동일.

API는 Application Programming Interface의 약자로
웹 api는 자바스크립트 언어자체에 포함된 것 이 아니라 브라우저가 제공하는, 브라우저가 이해할수 있는 함수들.

콘솔은 언어자체에 포함된 것 x,통상적으로 많이 쓰인다.
이러한 콘솔은 node.js와 웹 api에 공통적으로 포함되어있어

똑같은 console api를 이용해서 node.js에서도 출력할 수 있고 브라우저 상에서도 console창에서도 출력되는 것을 확인할 수 있다

---

✍ JS로 HelloWorld를 실행해보자!

1) console.log('HelloWorld!')라는 main.js파일을 만든다.

2) index.html파일을 새로 만들어 <script>태그를 이용해 main.js파일과 연결시켜준다!

3) Vs code>js파일을 연결한 html파일 실행창에서 마우스 오른쪽 버튼을 눌러
Open with Live Sever 를 실행한다.

4) 실행하고 보면 아무것도 뜨지 않는데(html파일의 body부분에 아무것도 입력하지 않았기 때문) Ctrl+shift+i(윈도우 기준) 혹은 개발자 도구(F12)를 이용하여 개발자 도구 창을 불러와준다.
맥사용자는 Cmd+Option + i

5) Console 탭으로 이동하면 아까 main.js에서 입력했던 결과인 HelloWorld가 정상출력됬음을 확인할 수 있다
(Elements탭은 html에서 작성한 문서의 확인과 검사가 가능함.)

• Console탭 안에서는 코드에서 작성했던 메시지 확인, JS실행도 가능.->동적으로 요소검사 ,붙여놓고 지우기 가능
  따라서 수정하고 지우기가 자유자제로 가능하다.

---

그렇다면 몇가지만 시도해보자!

🤎 Dev Tool

1) main.js파일과 동일하게 console.log로 이름 출력하기

HelloWorld! 결과와 동일하게
Kanon이라는 결과값이 뜨는걸 확인 할 수 있다.

2) alert를 이용하여 알림창 띄우기

alert('Hello');를 입력하였더니 Hello 팝업창이 뜨는걸 확인할 수 있다.

---

이번에는 hello를 쳐보았더니 정의되어있지 않다 라고 에러 메세지가 뜬다
그래서 var을 통해
var hello;를 써줌으로써 hello를 정의시키고
hello=10; 이렇게 연결시키면
hello를 입력했을시에 10이 되는것이다!

⏩ console탭을 이용하여 간단한 javascript는 동작이 가능하다는 것을 확인할 수 있다.

---

Source 탭: 나중에 디버깅할 때 유용하게 쓰일 수 있음
작성한 코드가 확인 가능하다.

breakpoint를 걸어서 디버깅할 때도 유용하게 쓰인다.(해당줄의 코드를 클릭하면 생성된다! )

Network 탭

네트워크가 어떻게 발생하는지, 얼마나 많은 사이즈들의 데이터가 오고가는지 검사할 수 있다.

그밖에 다른기능은 JS를 배워가면서 익혀보도록 하겠다 :)

---

🌐 자바스크립트 공식사이트:

1. ecma-internation.org
   문법에 관련된것 잘 정의되어있음 하지만 개발자가 보기에 난해함.

2. develop.moailla.org
   Mdn javasript 참조!!

3. www.w3schools.com
   공식사이트는 아니나 참고하기 좋음. 하지만 mdn이 설명 더 잘되어있고 예제가 더많다.
   최신정보도 mdn이 더 빠르게 올라옴!

결론: 많은 개발자들이 공식사이트처럼 이용하는 mdn을 공부하는것을 강추한다!

---

🤎 async vs defer

Html에서 JS파일을 포함할때 어떻게 포함하는 것이 더 효율적인지 짚고 넘어가보자!

1. Head안에 포함되는 경우

어떤 순서대로 사용자에게 페이지가 보여지게될까?

• head안에 script를 포함하게되면 사용자가 html파일을 다운로드 받았을때 브라우저가 코드를 한줄한줄씩 분석한다.

• 한줄한줄씩(parsing) 분석,이해한것을 css와 병합해서 DOM요소로 변환하게 된다.
  (어떻게 자세히 DOM 요소로변환하게 되는지 과정은 다음에!)

• html을 parsing하다가 script태그가 보이면 main.js를 다운받아야된다고 이해하게된다.

• 그래서 html을 parsing하는 것을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행한 다음에(fetching js, executing js)
  다시 parsing하는 부분으로 넘어가게된다.

단점: js파일의 사이즈가 크고, 인터넷 느릴때, 사용자가 웹사이트를 보는데까지 많은 시간 소요댐.
결론: script를 head에 포함하는 것은 좋은 것이 아님.

---

2. Body 안 끝부분에 추가

• 이렇게하면 브라우저가 html을 다운받아서 쭉 parsing해서 페이지가 준비가 된다음
  script를 만나서 script를 서버에서 받아오고 실행하게됨.

• 그래서 페이지가 사용자들에게 js를 받기 전에도 이미 준비가되어서 사용자가 page content를 볼 수 있다.

장점: 사용자가 기본적인 html콘텐츠를 빨리 본다
단점: 웹사이트가 js에 의존적일 경우 사용자가 정상적 페이지를 보기 전까지 서버에서 자바스크립트를 받아오는 시간과 실행하는 시간을 기다려야하는
큰 단점이 있다.

Ex. 사용자가 의미있는 컨텐츠를 보기 위해서는 자스를 이용해서
서버에 있는 데이터를 받아온다던지, DOM요소를 이쁘게 꾸며준다던지 그런식으로 동작하는 웹사이트

---

3. head안에 script를 이용하되 async 속성값을 쓰는것.

• async는 boolean타입의 속성값이기 때문에 선언하는 것만으로도 true라고 설정이되어 async 옵션을 사용할수 있다.

• async를 사용하게 되면 브라우저가 html을 다운받아서 parsing하다가 async를 보면
  병렬로 이 main.js파일을 다운로드 받자라고 명령만 해놓고 다시 parsing을 하다가
  Main.js가 다운로드가 완료되면 그때 parsing하던것을 멈추고 다운로드된 js 파일을 실행하게됨.
  이렇게 실행을 다하고나서 나머지 html파일을 parsing하게된다.

장점: body끝에 사용하는것보다는 fetching이 parsing하는것보다 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할수 있다.
단점:

• js가 html이 parsing되기도 전에 실행되기 때문에 만약 js파일에서 queryselector를 이용해서 돔요소를 조작한다 그러면 조작하려고 하는 시점에 html이 우리가 원하는 요소가 아직 정의되어있지 않을 수 있다. (그부분이 좀 위험할 수 ㅇ)
• 또 하나는 html을 parsing하는 동안 언제든지 js를 실행하기위해 멈출 수 있기 때문에 사용자가 페이지를 보는데 시간이 여전히 조금더 걸릴수 있는 단점이 있다.

---

4.head+defer

• 똑같이 head안에 script를 쓰고 이번에는 defer이라고 정의하게 되면 이렇게 parsing을 하다가 defer을 보면 main.js를 다운받자 하고 명령만 시켜놓고 나머지 html을 끝까지 parsing하게된다.

• 그리고 마지막에 parsing이 난후 다운로드 되어진 js를 실행하게된다.

defer이 가장 좋은 옵션이다!
이렇게 html을 parsing하는 동안 필요한 js파일을 다 다운받아놓고 html parsing을 먼저해서 사용자에게 페이지를 보여준 다음에 바로 이어서 자바스크립트를 실행하기 때문이다.

---

🤎 + async와 defer의 차이점

조금 더 async와 defer의 차이점을 살펴보자.

✍ async의 경우

• async옵션으로 다수의 script파일을 받게되면 먼저 다운로드 되는 아이들을 실행하게됨. (fetching b.js),(executing b.js)

• 그래서 b가 먼저되면 b를 실행하고 a가 다운로드 되면 a를 하고 그다음에 c를 실행하는 순서로 실행이되는데 즉 정의된 script순서에는 상관없이 다운로드가 먼저 된 것을 실행하기 때문에

• 만약 우리의 자스가 순서에 의존적인 것이라면 b 스크립트를 실행하는 것에 있어서 a가 먼저 선행이 되야한다면
  이렇게 async 옵션을 이용하게 되면 문제가 있을 수 ㅇ

✍ 반대로 defer의 경우

이렇게 parsing하는 동안 필요한 js를 다 다운로드 받아놓은 다음에 순서대로 실행하기 때문에 우리가 정의한 순서가 지켜져 우리가 원하는 대로 스크립트가 실행이 될 거라는 것을 예상할수 있다.

결론: head안에 defer옵션을 사용하는것이 제일 효율적이고 안전하다

---

🤎 Use strict!

Js는 단기간에 만들어졌기 떄문에 유연한 언어인데 유연하다는것은 때로는 개발자들이 많은 실수 할만큼 위험 할 수 있다.

ex.기존 존재하는 프로토 타입 변경,선언되지않는 변수의 값 할당 등 비상식적인것들

Use strict은 ECMAScript5에 추가되어있기 때문에
Use strict를 선언하게되면 더 이상 비상식적인것들을 쓸수 없게된다!

따라서 Use strict를 선언해주고 시작할것.
선언을 안해주면 에러없지만 선언을 해주면 에러가 뜨는데
Let a;를 선언하고 나면 에러가 안뜬다. (타입스크립트는 선언안해도 되지만 바닐라자바스크립트는 선언해야한다.)

앞으로 바닐라 js로 개발할때는 파일 제일 위에 use strict를 써서 strict 모드로 개발하는 것을 추천함.

Strict모드로 개발-> 좀 더 상식적인 범 안에서 js를 이용가능하게 해줌,
Js엔진 효율적으로 빠르게 분석할 수 있어 실행하는데 더 나은 성능개선까지 기대할 수 있다.