1. 새로운 언어를 배울 때는 먼저 "Hello World!"를 출력해보자!
혹자는 새로운 언어를 배울 때, 복사 붙여넣기를 하며 프로그램을 개발하면 된다고 할지도 모른다. 그러나, 그 언어로 취직을 준비하거나 전문성을 길러보고 싶은 이들에게는 좋지 않은 방법이다. 현타가 오거나 문제에 막히는 일이 빈번할 것이다. 그렇다고 문법만을 공부하는 것 또한 좋지 못하다. 큰 그림을 바라보면서 전반적인 것을 이해하자. 이번 편에서는 JavaScript의 동작원리에 대해 알아보자.
2. Preparation(환경설정)
node.js를 이용하면 간편하게 JavaScript를 쓸 수 있지만, 우리는 앞으로 Web API를 배우기 위해 다른 방법을 사용한다. Web API란, 브라우저가 이해하고 실행할 수 있는 함수들이다. 이제, HTML과 JS를 연결하여 실행시켜보자.
<main.js>
console.log('Hello World!');
<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>
Visual Studio Code에서 각각의 js 코드와 html 코드를 작성하고, 이를 Live Server에서 실행시켜보자. Live Server는 VScode의 확장팩이니 설치해야 한다. Live Server를 활성화한 후, 브라우저에서 개발자 모드의 console 창을 열면, JS 코드가 잘 작동된 것을 알 수 있다. 이것은 Web Api가 console에 관련된 Api를 가지고 있기 때문이다. 이 Api는 node.js와 인터페이스가 동일하다.
2-1. JS Web site
JavaScript의 공식사이트는 ecma-international.org이다. 문법이 잘 정리되어 있지만, 개발자가 보기에는 난해하다. 그래서 실제로 많은 웹개발자들이 찾는 곳은 developer.mozilla.org(MDN Web docs)이다. 공부하기에 적합하고, 최신정보가 빠르게 올라오니 많이 추천된다.
3. async와 defer의 차이점
<!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> // script가 head 안에 그냥 들어있음
</head>
<body></body>
</html>위 코드를 그대로 쓰면 어떤 순서로 사용자에게 보여질까? HTML 코드를 한 줄씩 parsing하다가 script를 만나면, js 파일을 다운로드(fetching js)받고 실행(executing js)할 때까지 html 코드를 읽는 것을 멈추게 된다. 이후 js 파일을 실행한 후, 남은 HTML 코드를 읽는다. 결국 사용자들이 웹사이트를 볼 때까지 오랜 시간이 소요된다. 다른 방식으로는 body 안에 script를 작성하는 것이다. 그렇게하면, HTML 코드를 모두 읽고 페이지가 준비된 다음에 js 파일을 서버에서 받아오고 실행하게 된다. 그러나 웹사이트가 JS에 의존적이라면, 사용자가 의미있는 콘텐츠를 즐기는데 더 시간이 소요된다.
이제 async에 대해 알아보자.
...
<script async src="main.js"></script>
...async를 설정하면, HTML 코드를 parsing함과 동시에 서버에서 js 파일을 다운받을 수 있다. 다운이 완료되면, parsing을 멈추고 js 파일을 실행하고나서 parsing을 재개한다. 이는 parsing과 fetching을 병렬로 처리하기에 속도가 빠르다는 장점이 있지만, js 코드를 실행하는 동안 html 코드의 parsing이 끝나지 않아 위험할 수 있고 아직 여전히 parsing이 멈춘다는 단점도 존재한다.
이제 defer에 대해 알아보자.
...
<script defer src="main.js"></script>
...defer 옵션은 HTML 코드를 parsing하면서 js 파일을 다운받고, parsing이 끝나면 js 파일을 실행하게 해준다. 그래서 defer이 가장 좋은 옵션이다.
4. 'use strict';
JavaScript를 사용할 때는 코드의 제일 앞에 'use strict';를 작성하자.
'use strict';
console.log('Hello World');
JS는 매우 flexible한 언어이지만, 이는 dangerous하다는 뜻이기도 하다. 선언되지 않은 변수를 쓸 수 있다던지, 기존의 prototype을 변경한다던지 할 수 있으니까. 순수 바닐라 자바 스크립트를 쓸 때는 꼭 쓰는게 좋다. 또한, 이 strict 모드를 쓰면 JS엔진이 좀 더 효율적으로 코드를 분석하여 성능 개선을 기대할 수 있다.
'IT > WILT' 카테고리의 다른 글
| [JavaScript] 5. 함수의 선언과 표현, Arrow Function (0) | 2022.02.22 |
|---|---|
| [JavaScript] 4. 코딩의 기본 operator (0) | 2022.02.20 |
| [JavaScript] 3. Data Type, let VS var, hoisting (0) | 2022.02.19 |
| [JavaScript] 1. 자바스크립트의 역사와 현재, 그리고 미래 (0) | 2022.02.17 |
| WILT를 시작하며 (0) | 2022.02.17 |
