JavaScript 공부 [1. 자바스크립트의 시작]

Min Hyung Kim·2021년 7월 24일

JavaScript Study!

목록 보기

1/13

Hello World! 출력하기

main.js

console.log(Hello World)!

node js 설치 후 cmd로 실행

index.html의 head에 script 태그를 선언하고 src에 main.js를 넣은 후 실행하여 개발툴 콘솔 확인

Preparation

자바스크립트 공식사이트
ecma-international.org : 문법은 잘 정리되어있으나 초보자가 이해하기 어렵다
developer.mozilla.org : 설명이 쉽고 예시가 많이 있다

페이지가 사용자에게 보여지는 순서

index.html 페이지가 사용자에게 보여지는 순서를 각 예시를 통해 확인해보자

<!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>

사용자가 html 파일을 다운받았을때, 브라우저가 한줄 한줄 분석한다(parsing).
분석중 script 태그 발견!
분석을 멈추고, 필요한 자바스크립트 파일을 서버에서 다운로드(fetching) 후 실행(executing)
다시 분석 시작

단점: "main.js" 파일 크기가 매우 크거나 인터넷이 느릴 경우 많은 시간이 소요된다! 지양할것!

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

브라우저가 끝까지 분석 완료함.
script 태그 발견!
필요한 자바스크립트 파일(fetching js, executing js)을 서버에서 다운로드 후 실행

장점: 사용자가 기본적인 html 컨텐츠를 빠르게 볼 수 있다.
단점: 웹사이트가 자바스크립트에 굉장히 의존적이면(서버에 있는 데이터를 받아온다던지, DOM요소를 꾸며준다던지...) 이 역시 필요한 자바스크립트 파일을 서버에서 다운로드받고 실행하는 시간을 기다려한다!

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

사용자가 html 파일을 다운받았을때, 브라우저가 한줄 한줄 분석한다(parsing).
분석중 script 태그 발견!
async(true)가 있기 때문에, "병렬"로 필요한 자바스크립트 파일을 서버에서 다운로드(fetching)하도록 명령을 내린다.
이와 상관없이 분석을 하다가, 다운로드가 끝나면, 실행한(executing) 후 다시 분석을 시작한다.

장점: 다운로드 받는 시간을 절약할 수 있다.
단점: 실행되는 자바스크립트 내용이 복잡할경우(쿼리를 실행한다거나...) 원하는 요소가 아직 정의되어있지 않을 수 있다!(분석이 덜되었기 때문에)
실행하는동안 멈춰있기 때문에, 사용자가 페이지를 보는데 시간이 여전히 걸릴 수도 있음!

<!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>

사용자가 html 파일을 다운받았을때, 브라우저가 한줄 한줄 분석한다(parsing).
분석중 script 태그 발견!
defer(true)가 있기 때문에, "병렬"로 필요한 자바스크립트 파일을 서버에서 다운로드(fetching)하도록 명령을 내린다.
끝까지 페이지를 분석한다.
분석이 완료되면, 그제서야 실행해야하는 자바스크립트를 실행한다(executing)

장점: 사용자가 보아야 하는 페이지를 모두 볼 수 있고, 바로 그 이후에 자바스크립트를 실행한다.

async vs defer

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script async src="a.js"></script>
    <script async src="b.js"></script>
    <script async src="c.js"></script>
</head>

정의된 스크립트의 순서와 상관없이, 먼저 다운로드가 완료된 스크립트가 실행된다.
따라서 개발자의 자바스크립트가 순서에 의존적이라면, a가 아니라 b나 c가 먼저 실행될 수 있다!

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script defer src="a.js"></script>
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
</head>