1. JavaScript를 사용하는 이유
- JavaScript를 사용하는 이유는 정적인 웹사이트를 동적으로 만들기 위해서다. 그렇다면 정적, 동적의 차이는 무엇일까?
- 정적인 웹사이트는 링크를 이용한 페이지 이동만이 구현된 웹사이트를 의미한다.
- 동적인 웹사이트는 JavaScript를 이용하여 HTML 엘리먼트를 객체화 시킴으로써, 사용자에 의한 입력에 따라 특정 event가 발생하게 되면 지정된 DOM조작을 하여 페이지를 이동하지 않고 현재 페이지의 동적인 변화를 주는 것을 말한다. 예를들어, 사진을 클릭하면 모달창이 생성되면서 더 큰 사진으로 볼 수 있는 기능 같은 것들이 여기에 해당된다.
2. JavaScript는 어떻게 동작되는 것이며, 웹사이트에서 어떻게 읽히는가?
- JavaScript가 어떻게 동작되는가를 이해하기 위해서 웹사이트가 어떻게 코드를 읽는가에 대한 이해가 선행되어야 한다.
1) HTML 파싱(parsing)
- 웹사이트의 구조를 표현하는 HTML파일을 브라우저가 위에서부터 아래로 한줄씩 이동하면서 CSS와 병합되어 parsing과정을 거친다. 여기서 parsing이란, 브라우저가 코드를 이해할 수 있는 언어로 번역되는 것을 의미한다.
2) script 태그에 매핑된 JS파일을 읽는다.
- HTML을 parsing하는 과정에서 JS파일이 연결되어 있는 script태그를 만나면 HTML parsing을 잠시 멈추고 해당 JS파일을 다운(fetching)받은 후 실행(executing)하게 된다. JS파일의 실행이 끝난 후 다시 HTML parsing 과정을 진행한다.
- HTML을 배워봤다면 script 태그는 항상 body태그의 가장 마지막 부분에 작성하는 것이 좋다는 팁을 들은 경우가 있을 것이다. 그 이유가 바로 여기에 있다. 사용자는 HTML parsing이 모두 끝나야만 스크린에 출력되는 웹페이지를 볼 수 있다. 그러나, parsing과정 중간에 JS파일을 읽는 과정이 발생한다면 그 과정에서 걸리는 시간만큼 사용자의 스크린에 웹페이지가 출력되는 시간이 delay되기 때문이다.
- body태그의 가장 마지막 부분에 script태그를 작성하는 방식은 HTML parsing을 우선적으로 완료되기 때문에 사용자의 스크린에 웹페이지가 출력되는 속도가 가장 빠른 구조이다. 하지만, 웹사이트가 JS에 매우 의존적이라면 JS파일이 읽고 실행하는 동안에 사용자는 자신의 스크린에 보이는 웹페이지를 사용할 것이고, JS파일이 완전히 실행되기 전까지 사용자의 요청이 처리되지 않는다는 점을 주의해야 한다.
- 이처럼 웹사이트의 성격이 JS에 의존적인가 아닌가에 따라 JS파일이 읽히는 시점을 개발자가 직접 정할 수 있는데, 이 시점을 Async와 Defer로 나눌 수 있다.
3) Async
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script async src="main.js"></script>
</head>- async는 script 태그에 존재하는 옵션 중 하나로 head태그 내부에 script 태그를 작성한 후 async 옵션을 적용시킨 방식을 말한다.
- async 방식은 HTML parsing을 진행하다가 script태그를 만나면 HTML parsing과 JS파일 fetching과정을 동시에(병렬로) 진행한다. JS파일의 fetching이 완료되면, HTML parsing을 멈춘 뒤 JS파일을 executing을 완료한 후 남은 HTML을 parsing하는 순서로 진행된다.
- async 방식은 fetching시간을 절약할 수 있다는 장점을 갖는다. 그러나, HTML parsing이 완료되지 않은 상태에서 JS파일에서 필요로 하는 특정 DOM 요소가 아직 parsing되지 않아 오류가 발생할 수 있다는 위험요소가 존재한다는 단점이 있다. 더불어, 사용자가 페이지를 보는데 여전히 delat가 걸린다는 단점이 있다.
4) Defer
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script defer src="main.js"></script>
</head>- async와 마찬가지로, defer는 script 태그에 존재하는 옵션 중 하나로 head태그 내부에 script 태그를 작성한 후 defer 옵션을 적용시킨 방식이다.
- defer방식은 HTML parsing을 진행하다가 script태그를 만나면 HTML parsing과 JS파일 fetching과정을 동시에(병렬로) 진행하지만, HTML parsing을 완료한 후 fetching이 완료된 JS파일을 executing한다는 차이점을 갖는다.
- defer 방식은 fetching과정의 시간절약 및 JS파일 executing에 앞서 HTML parsing이 완료되기 때문에 가장 효율적이며 안전한 방식으로 꼽힌다.
3. JavaScript 사용 꿀팁 - 'use strict';
- JavaScript는 단기간에 만들어진 script 언어로, 엄청난 유연성(자유도)을 갖고 있다.
- 유연성이 클수록 사용문법에 대한 규제가 적기 때문에 그만큼 개발자에 의한 실수가 발생할 가능성이 커진다.
- 그러므로 JavaScript를 작성할때는 use strict라는 annotation을 사용하는 것이 좋다.
- strict를 이용하게 되면 JS엔진이 더 효율적이고 빠르게 코드를 분석할 수 있기 때문에, 약간의 성능개선도 기대할 수 있다.
- 아래의 코드처럼 딱 한줄만 선언하면 된다.
"use strict";
[정보출처]
www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
'Front-end > Vanilla JS' 카테고리의 다른 글
| JS 근본 공부 - 연산자 (0) | 2020.10.25 |
|---|---|
| JS 근본 공부 - 데이터 타입 (0) | 2020.10.24 |
| JS 근본공부 - 자바스크립트의 역사 (0) | 2020.10.23 |
| Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) (0) | 2020.10.16 |
| Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) (0) | 2020.10.12 |
댓글