Small Step

[JS] 공부 - 엘리코딩 JS 2 본문

코딩/JS

[JS] 공부 - 엘리코딩 JS 2

Esunn 2021. 1. 6. 23:54

youtu.be/tJieVCgGzhs

이 영상을 보고 공부했습니다.

 

 

자바스크립트를 HTML에 포함하는 여러 가지 방법

 

head 태그에 넣는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "main.js></script>
</head>
<body>
    
</body>
</html>

이렇게 head 태그에 넣게 되면 한 줄 한 줄 HTML을 읽게 됨

이렇게 되면 자바스크립트 파일을 다 다운로드하고 HTML을 읽으므로 웹페이지가 늦게 로딩될 수 있다.

 

 

body 태그 마지막에 넣는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script rc = "main.js></script>
</body>
</html>

이번에는 body태그 마지막에 자바스크립트 파일을 넣는 방법

HTML을 먼저 읽고 맨 마지막에 자바스크립트파일을 일게 된다.

HTML을 먼저 읽게 되어서 웹페이지를 빨리 읽을 수 있지만 자바스크립트가 중요한 웹페이지라면 제대로 된 

기능을 수행하기까지 오래 걸리 수 있다.

 

head + async 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script asyn src = "main.js></script>
</head>
<body>
    
</body>
</html>

HTML을 다운로드하면서 병렬로 자바스크립트 파일을 다운로드한다.

한 마디로 HTML과 자바스크립트를 같이 다운로드하는 것이다.

자바스크립트 파일이 먼저 다운로드되기 때문에 HTML 요소가 없어서 기능이 잘 되지 않을 수도 있다.

 

head + defer 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src = "main.js></script>
</head>
<body>
    
</body>
</html>

defer은 HTML이 읽는 동안 필요한 자바스크립트를 다운로드하고 다 읽게 되면

자바스크립트를 실행하게 된다. async는 자바스크립트 순서에 상관없이 다운로드된 순서대로 실행하지만

defer은 순서대로 실행하기 때문에 원하는 대로 잘 작동할 수 있다.

 

defer을 사용하는 게 가장 좋다고 합니다.

 

 

자바스크립트 문서 작성 전 확인!

'use strict'; 

이것을 자바스크립트 문서 맨 위에 이것을 정의해 주자!!

자바스크립트는 매우 유연하게 만들어졌는데 선언되어있지 않는 변수에 값을 할당할 수 있다고 한다.

'use strict'; 을 선언하게 되면 이런 이상한 현상들을 없앨 수 있다.

'코딩 > JS' 카테고리의 다른 글

[JS] 공부 - 엘리코딩 JS 5 함수의 선언과 표현  (0) 2021.02.01
[JS] 공부 - 엘리코딩 JS 4 연산자와 반복문  (0) 2021.01.28
[JS] 공부 - 엘리코딩 JS 3  (0) 2021.01.15
'코딩/JS' Related Articles more
Comments