티스토리 뷰

웹프로그래밍/js

콘솔에 출력,script async와 defer의 차이점 및 앞으로 자바스크립트의 공부 방향(드림코딩 by 엘리님 유튜브 강의)

이바다강 2022. 3. 8. 17:42

https://developer.mozilla.org/ko/ 로 모르는 건 찾아보는 게 좋음(공식사이트여서 정보도 빠르고 예시도 자세함)

 

 

1. 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>

 

이렇게 하면 <script src="main.js"></script> 이 부분은

인터넷도 느리고 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>
        <script src="main.js"></script>
    </body>
</html>

이렇게 되면 페이지 사용자가 페이지 컨텐츠를 먼저 볼수있지만 

내 웹사이트가 자바스크립트의 의존적인 아이라면 사용자가 정상적인 페이지를 보기전까지는 기다려야된다,ㅠ

 

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 asyn src="main.js"></script>
    </head>
    <body></body>
</html>

<script asyn src="main.js"></script>에 있는 asyn를 이용하면 
브라우저가 html을 다운받을때 병렬로 다운받게되다가
다운이 완료되면 parsing을 멈추고 다운받은 js파일을 실행하게 된다.
다하고 나머지 parsing을 진행하게 됨
 
바디 끝에 사용하는 거보다는 다운로드 시간을 절약할수있지만
html이 다 설치되기 전에 이미 js가 실행되기 때문에 이 부분이 위험하다
block때문에 사용자가 페이지를 보는데 시간이 걸릴수있다

3. head 안에 넣지만 defer를 이용하는 방법(best)

<!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></body>
</html>
<script defer src="main.js"></script>에 있는 defer을 이용하면 
브라우저가 html을 다운받을대 병렬로 다운받게되다가 html이 parsing이 끝나면
그때 받아놨던 js를 실행하게 됨

 

 

자바스크립트를 이용할때는 'use strict'; 를 선언하는 것이 좋다.
자바스크립트는 굉장히 유연하기 때문에... 위험하다
개발자가 많은 실수를 할수있다.

 

자바스크립트는 선언되지 않는 변수에 값을 할당하거나 기존의 프로토타입을 변경한다던지 비상식적인 것들이 가능
그래서 저거를 선언하면 비상식적인 저 상황을 오류로 잡아내줌(ECMAscript5부터 사용가능하게 됨)

 

'웹프로그래밍 > js' 카테고리의 다른 글

배열 제대로 알고 쓰자, 자바스크립트 배열 개념과 APIs 총정리(드림코딩 by 엘리님 유튜브 강의)  (0) 2022.03.10
오브젝트 넌 뭐니?(드림코딩 by 엘리님 유튜브 강의)  (0) 2022.03.09
arrow function 은 무엇인가? 함수의 선언과 표현(드림코딩 by 엘리님 유튜브 강의)  (0) 2022.03.09
코딩의 기본 operator, if, for loop 코드리뷰 팁(드림코딩 by 엘리님 유튜브 강의)  (0) 2022.03.08
데이터타입 let vs var, hoisting(드림코딩 by 엘리님 유튜브 강의)  (0) 2022.03.08