SOCO
콘솔에 출력, script async와 defer의 차이점 본문
[기초 용어]
1. API
API는 Application Programming Interface의 약자임.
이 중 웹 API는 자바스크립트 언어 자체에 포함된 것이 아니라
브라우저가 제공하는, 브라우저가 이해할 수 있는 함수를 말함.
2. console.log
console APIs, 그중에 log라는 함수를 이용해서
우리가 원하는 메세지를 console창에 출력할 수 있음
node.js를 이용해서 (웹 브라우저 없이) console창에 출력되는 걸 볼 수 있음.
그것은 node.js와 웹 APIs 모두 console에 관한 API가 있는 것임
API의 interface가 둘 다 동일함
console은 언어 자체에 포함되어 있는 아이는 아니지만 통상적으로 많이 쓰이는 아이라서
node.js와 웹의 APIs에 공통적으로 포함되어 있어서
똑같은 console AIP를 이용하여 node.js에서도 출력할 수 있고 브라우저의 콘솔창에서도 출력할 수 있음
3. 개발툴
브라우저에서 딸려나오는 개발 툴을 활용하면 좋음
element탭에서는 HTML,CSS 확인 가능
console탭에서는 코드에서 작성한 메시지확인 및 자바스크립트 실행이 가능함
요소를 검사하고 붙여넣고 지우고 할 수 있음
source탭은 디버깅할 때 유용함
network탭은 네트워크가 어떻게 발생하고 얼마나 많은 사이즈의 데이터가 오고가는지 검사할 수 있음
[HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 효율적일까?]
1. head안에 <script src>
브라우저가 HTML을 parshing(한줄씩 읽음)하다가
script 태그가 보이면 js파일을 다운받음
그래서 parshing하는 것을 잠시 멈추고
필요한 js파일을 서버에서 다운받아서(fetching) 이것을 실행(executing)한 다음
다시 parshing을 시작함
PARSHING HTML ->BLOCKED(FETCHING JS & EXECUTING JS)-> PARSHING HTML
이렇게 하면 사용자가 웹사이트를 보는데까지 시간이 많이 걸림
2. <body> 끝부분에 <script src>
PARSHING HTML PAGE -> FETCHING JS & EXECUTING JS
이 경우 사용자가 HTML의 내용을 빨리 본다는 장점은 있지만
웹사이트가 자바스크립트에 의존적인 경우
(예를 들면, js를 이용해서 서버에 있는 데이터를 받아오거나
DOM요소를 더 이쁘게 꾸며주는 식으로 동작하는 웹사이트라면)
사용자가 의미있는 콘텐츠를 보기위해서는 역시 기다리는 시간이 발생함
3. <head>에 <script async src>
async는 불리언 타입의 속성값이므로 선언하는 것만으로도 true로 설정되어서 async옵셥을 사용할 수 있음
이 경우 HTML을 parshing 하다가 async를 보면 병렬적으로 js파일을 다운로드받음
parshing과 fetching을 병렬적으로 하다가,
js파일 다운로드가 완료가 되면 팔싱을 멈추고 js파일을 실행(executing)하게 됨
js파일 실행이 끝나면 HTML파일의 남은 부분을 parshing하게 됨
이렇게 되면 시간을 절약할 수 있지만,
js가 HTML이 모두 parshing되기도 전에 실행 되는 문제가 발생함.
만약 js파일에서 querySelector을 이용하여 DOM요소를 조작하려고 하는 경우
조작하려는 시점에서(실행되는 시점에서) HTML의 요소가 아직 정의되지 않았을 수 있음
또한 js를 실행하기 위해 HTML parshing이 멈출수 있으므로 사용자가 페이지를 보는데 시간이 걸릴 수 있음.
게다가 async의 경우 정의된 스크립트순서에 상관없이 다운로드가 끝난 순서대로 js파일을 실행하므로
순서에 의존적인 코드라면 문제가 발생할 수 있음
4. <head> 안에 <script defer src>
parshing을 하다가 defer이 있으면 parshing과 fetching을 병렬적으로 수행함
HTML을 끝까지 parshing한 다음 parshing이 끝나면 js를 실행(executing)하게 됨
defer은 HTML을 parshing하는 동안 필요한 js를 다 다운받아놓고
HTML parshing이 끝나면 사용자에게 페이지를 먼저 보여주고 이어서 js를 실행함
defer은 js를 정의된 순서대로 실행함
HEAD안에 defer옵션을 이용해서 쓰는 것이 효율적임
[자바스크립트 'use strict', 타임스크립트]
자바스크립트 파일을 쓸때는
'use strict'라는 것을 정의해주면 좋음
자바스크립트에서는 'use strict';를 정의해야하는 이유는
js는 유연한 언어라는 장점이 있지만
이로 인해 개발자가 많은 실수를 할 수도 있게 됨
(예를 들면, 선언되지 않은 변수에 값을 할당하는 문제 등)
use strict을 선언하면 비상직적인 코드의 오류를 잡아낼 수 있음
타임스크립트를 쓸 때는 별도로 정의할 필요가 없음
=> 자바스크립트 배우고 나면 타임스크립트 배울 것!
'프론트 > java script 기초지식' 카테고리의 다른 글
| opertator, if, for loop (0) | 2021.06.11 |
|---|---|
| 변수, 상수, scope, 데이터타입 등 (0) | 2021.06.11 |
| 자바스크립트 기본 _드림코딩 앨리 (0) | 2021.06.10 |
| ==와 != vs ===와 !== (0) | 2021.06.10 |
| 자바스크립트로 html에 글쓰기 (0) | 2021.06.06 |