[javascript] 드림코딩 자바스크립트 1.콘솔에 출력 script async와 defer의 차이점 및 앞으로 자바스크립트 공부 방향

728x90

최근에 프론트엔드 개발직군에 짦은 기간을 일하고 다시 프론트엔드 개발자로써 성장하기위한 준비를 하고 있는 과정에서 Javscript 입문편을 정리해보고자 한다. 수많은 오픈소스와 유튜브 강의가 있지만 그 중에서 가장 편의성있고

심도있게 배울 수 있는 DreamCoding을 정리해보고자 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 한줄 한줄씩 이해하면서 Dom으로 변환해줌 -->
    <!--  단점 : 사용자가 웹사이트를 보는데 많은 시간이 소요하는데 이런식으로 script를 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>
    <!-- 
        
        이런식이면 page가 브라우저가 html을 다운받고 parsing해서 준비가 된다음 
        그 다음 script를 만나서 patching하고 받아와 실행 
        그래서 페이지가 다운받기전에도 준비가되서 사용자가 페이지를 볼 수 있다.
        
        단점: 사용자가 기본적인 html을 볼수 있다는 장점이 있지만 
        의존적인 페이지라면 Javscript를 받아와 꾸며주는 웹사이트라면 
        사용자가 정상적인 페이지를 보기전까지 실행하는 시간을 봐야하는 단점 
    -->
  <!-- <script src="main.js"></script> -->
    <!-- 
    async옵션을 사용하면 브라우저가 html을 다운 받아 parsing하다 병렬로 다운로드 받자라고 명령만하고 
    진행하다 다운로드 완료되면 parsing을 멈추고 js를 실행 
    
    body끝에 사용하는 것보다 paching이 parsing하는 도중 병렬적으로 이동하기 떄문에
    다운 받는 시간 절약 하지만 javscript가 html이 parsing되기전에 실행되서 

    html을 parsing하는 동안 언제든지 멈출수 있어 사용자가 페이지를 보는데 단점이 있다.
    -->
  <!-- <script async src="main.js"></script> -->

  <!-- defer옵션을 정의하면 parsing하다 defer있을때 다운로드만 받자고 명령시키고 나머지html을 parsing하고 
    다운로드된 js를 실행 
  
    가장 좋은 방식 필요한 html을 parsing하는동안 필요한 js를 다운 받고 
    html parsing하고 페이지를 보여주고 바로 이어서 js를 실행 

  
   -->
  <!-- <script defer src="main.js"></script> -->


  <!-- async 옵션으로 다수의 script를 받으면 먼저 다운로드 된 아이를 실행  -->
  <!--  즉 정의된 순서상관없이 다운로드 된 아이만 실행해 만약 js에 순서에 의존적이라면 
     async옵션을 이용하면 문제가 될 수 있다.
   -->
  <!-- <script async src="a.js"></script> -->
  <!-- <script async src="b.js"></script> -->
  <!-- <script async src="c.js"></script> -->
    
  <!-- 반면 defer같은 경우 parsing하는 동안 필요한 js를 받아놓은 다음 순서대로 실행해 
    우리가 원하는대로 script가 실행  
 -->
  <!-- <script defer src="a".js"></script> -->
  <!-- <script defer src="b.js"></script> -->
  <!-- <script defer src="c.js"></script> -->
  <!-- dssdsdd -->

</body>
</html>

기본 Vscode에서 세팅한 html 이다.

<head>
    <!-- 한줄 한줄씩 이해하면서 Dom으로 변환해줌 -->
    <!--  단점 : 사용자가 웹사이트를 보는데 많은 시간이 소요하는데 이런식으로 script를 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>

가장 중요한 부분들만 설명해보자면 html에 들어가는 head 요소이다. head요소에는 우리가 불러올 js파일을 이곳에서 불러올수 있는데 js파일은 script태그로 불러올 수 있다. <script> 태그를 간단하게 설명해보자면

Javascript와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용한다.<script> 요소는 스크립트

코드를 요소 내부에 직접 명시하거나, src속성을 사용해 스크립트파일을 참조할 수 있다.

// 순수 바닐라 js를 사용할때 사용 
// Javscript is very flexible
// flexble == dangers 
// 유용하다는 것은 실수할 수 있다는 뜻도 된다.
// added ECMAScript5

'use strict';

// node main.js == Hello world 화면에 출력
// node.js와 web apis둘다 console 에 관련된 api 존재
// 그리고 둘다 api interface가 동일
console.log('Hello world!!');


// api (Application Programing Interface)
// web api javescript언어에 포함된 api가 아닌 브라우저가 읽을 수 있는 함수 

// console은 언어자체 포함된 아이 x 통상적으로 쓰는에라 nodejs api에 포함되
// 똑같은 console로 nodejs를 호출 


// 'use-script' 없이 선언하면 문제 x 
// 선언시 o
let a;

a = 6;

밑에 코드를 보기전에 우리가 불러온 main.js파일을 보면

// 순수 바닐라 js를 사용할때 사용 
// Javscript is very flexible
// flexble == dangers 
// 유용하다는 것은 실수할 수 있다는 뜻도 된다.
// added ECMAScript5

'use strict';

js를 사용할때 이렇게 'use strict';를 사용하는데 이 코드는 순수 Vanila.js를 사용할때 사용한다.

Javscript는 때로는 굉장히 유용한데 이뜻은 dangers(위험)하다는 뜻과도 같다. 즉 유용하다는 것은 실수할 수도 있다라는 뜻!

// node main.js == Hello world 화면에 출력
// node.js와 web apis둘다 console 에 관련된 api 존재
// 그리고 둘다 api interface가 동일
console.log('Hello world!!');

자 우리가 직접 구현하고자 하는 첫번째는 html로 구성된 서버에 console.log로 'Hellow world'라는 문자을 삽입하고 싶다면 바로 console.log를 사용하면 된다.

console.log()라는 뜻은 html.css를 동적으로 만들어 주는 기능을 담당하고 있다.console.log()를 하면 () 안에 있는것이

출려된다.

    <!-- 
        
        이런식이면 page가 브라우저가 html을 다운받고 parsing해서 준비가 된다음 
        그 다음 script를 만나서 patching하고 받아와 실행 
        그래서 페이지가 다운받기전에도 준비가되서 사용자가 페이지를 볼 수 있다.
        
        단점: 사용자가 기본적인 html을 볼수 있다는 장점이 있지만 
        의존적인 페이지라면 Javscript를 받아와 꾸며주는 웹사이트라면 
        사용자가 정상적인 페이지를 보기전까지 실행하는 시간을 봐야하는 단점 
    -->
  <!-- <script src="main.js"></script> -->

그럼 js를 불러와주는 script의 방식은 어떤 방식인가 기본적은 방식은 이렇게 script안에 src(경로)에 불러와줄 js파일을

명시하는 방법이다. 이런 방법을 사용하면 page에 브라우저가 html을 다운받으면서 parsing(파싱)을 하면서 준비가 된 다음, 그 다음에 위에 script 태그를 만나면서 pacting하면서 받아와 실행이 된다.

장점으로는 사용자가 기본적은 html을 볼 수 있다는 장점이 있지만 의존적인 페이지라면 Javscript를 받아와 꾸며주는

웹사이트라고 할때 사용자가 정상적인 페이지를 보기전까지 실행하는 시간을 봐야한다는 단점이 있다.

  <!-- 
    async옵션을 사용하면 브라우저가 html을 다운 받아 parsing하다 병렬로 다운로드 받자라고 명령만하고 
    진행하다 다운로드 완료되면 parsing을 멈추고 js를 실행 
    
    body끝에 사용하는 것보다 paching이 parsing하는 도중 병렬적으로 이동하기 떄문에
    다운 받는 시간 절약 하지만 javscript가 html이 parsing되기전에 실행되서 

    html을 parsing하는 동안 언제든지 멈출수 있어 사용자가 페이지를 보는데 단점이 있다.
    -->
  <!-- <script async src="main.js"></script> -->

두번째 방법 script 태그안에 async를 사용하는 방법이 있다. async 옵션을 사용한다면 브라우저가 html을 다운 받으면서 parsing을 하다 병렬(나란히 벌여서 세운다는 뜻)로 다운 받자라고 명령만 한뒤 계속 진행하다

다운로드가 완료되었을때 parsing을 멈추면서 js를 실행해준다. body태그 끝에 사용하는 것 보다 pacting이 parsing하는

도중 병렬적으로 이동하기 때문에 다운받는 시간을 절약되나 javscript가 html이 parsing되기 전에 실행 되기 때문에

html을 parsing하는 동안 언제든지 멈출 수 있어 사용자가 페이지를 보는데 단점이 있다.

  <!-- defer옵션을 정의하면 parsing하다 defer있을때 다운로드만 받자고 명령시키고 나머지html을 parsing하고 
    다운로드된 js를 실행 
  
    가장 좋은 방식 필요한 html을 parsing하는동안 필요한 js를 다운 받고 
    html parsing하고 페이지를 보여주고 바로 이어서 js를 실행 

  
   -->
  <!-- <script defer src="main.js"></script> -->

이런 단점을 보안 할수 있는 방법은 바로 defer이라는 옵션을 사용하는 방법이다. defer을 사용하면 페이지가 parsing하다 defer을 만날때 다운로드만 받자 하고 명령시키고 나머지 html들을 parsing한뒤 다운로드된 js를 실행하게 된다.

이 방법이 가장 좋은 방식인데 필요한 html을 parsing하는 동안에는 필요한 js를 다운 받으면서 html을 parsing하고

페이지를 보여준뒤 바로 이어서 js를 실행하면서 parsing하는동안 언제든지 멈출 수 있는 단점을 보완할 수 있다.

  <!-- async 옵션으로 다수의 script를 받으면 먼저 다운로드 된 아이를 실행  -->
  <!--  즉 정의된 순서상관없이 다운로드 된 아이만 실행해 만약 js에 순서에 의존적이라면 
     async옵션을 이용하면 문제가 될 수 있다.
   -->
  <!-- <script async src="a.js"></script> -->
  <!-- <script async src="b.js"></script> -->
  <!-- <script async src="c.js"></script> -->

async로 정의된 여러가지 script태그가 있을 경우 다수의 script를 받게되면서 순서대로 먼저 다운로드된 아이를 실행해준다. 즉 내가 정의된 script 순서에 상관없이 먼저 다운로드가 된 아이만 실행해 js에 순서에 의존한다면 async의 방식은

문제가 될 수 있다.

  <!-- 반면 defer같은 경우 parsing하는 동안 필요한 js를 받아놓은 다음 순서대로 실행해 
    우리가 원하는대로 script가 실행  
 -->
  <!-- <script defer src="a".js"></script> -->
  <!-- <script defer src="b.js"></script> -->
  <!-- <script defer src="c.js"></script> -->
  <!-- dssdsdd -->

반대로 defer라는 옵션을 사용하는 경우 parsing하는 동안 필요한 js를 받아놓은 다음 순서대로 실행하면서

우리가 원하는 script가 실행된다.

'프론트 엔드 > Javascript' 카테고리의 다른 글

[javascript] 드림코딩 자바스크립트 2.데이터 타입, data types, let vs var, hoisting (0)	2021.12.23
[Javascript] Promise란 ? (0)	2021.10.13
[javascript] 함수형 프로그래밍 과 자바스크립트와 객체지향 (0)	2021.10.12

[javascript] 드림코딩 자바스크립트 1.콘솔에 출력 script async와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문

'프론트 엔드 > Javascript' 카테고리의 다른 글

티스토리툴바