.png)
📕'Hello World!' 출력
자바스크립트에서 Hello World를 출력하기 위해선 아래와 같이 입력해야한다.
console.log('Hello World!');이 입력을 실행하는 방법은 2가지가 있다.
📖 Node.js에서 출력하기
실행할 main.js 가 있는 폴더로 이동해서
node main.js를 입력하면 저렇게 나온다.
(사실 방금 node.js를 처음 써봤다.)
📖 개발툴에서 출력하기
Visual Studio Code를 이용해서 Live Server를 열어서 확인했다.
나는 Windows 사용자라서 F12를 눌러서 개발툴을 열었다.
내 기준 이게 더 보기 편하다.
혹시 Live Server를 모르는 사람이 있다면 VSC의 Extensions에서 Live Server 검색 후 설치하기~
이렇게 Hello World!가 출력이 된 이유는 log() 때문인데,
이게 메세지를 출력하는 함수라서 출력이 되는 거다.
node.js 와 Web APIs에는 console 관련 API가 있어서 출력이 된 거고 둘 다 동일한 API를 가짐.
(API: Application Programming Interface)
Q. 그렇다면 이 API들이 JavaScript에 포함되어 있는 건가?
A. 개틀림.
API는 Browser가 제공하는 함수들이지 JS의 언어 자체에 포함된 게 아님.
📖 개발자 모드의 Console
개발툴의 console창에서는 JS를 실행할 수 있다.
즉, 동적으로 요소를 검사할 수 있다는 말이다.
이렇게 설명하면 미래의 내가 못알아먹겠으니 쉽게 풀자면
html, css처럼 개발툴에서 JS도 입력하고 실행할 수 있다.
📖 JavaScript를 공부할 때 이용하는 사이트?
- ECMA Script
- MDN: 매우 추천! JS뿐 아닌 다양한 자료가 있음.
📙 Html에서 JS 포함하기!
어떻게 하면 더 효율적으로 JS를 포함시킬 수 있을까?
📖 그냥 사용하기
<head>
...
<script src="main.js"></script>
...
</head>사용자가 Html 파일을 다운로드하면 browser는 파일을 한 줄 씩 분석한 후 CSS와 병합하여 DOM요소로 변환함.
딱봐도 단점이 보이지 않나요? (저는 안 보였어요!)
Q. 만일 JS 파일이 넘넘 크다면?
A. 사용자가 파일을 읽는데 많은 시간이 소요될 것이다.
📖 body의 맨 마지막에 script 작성
<body>
...
<script src="main.js"></script>
</body>.png)
위와 같은 순서대로 실행된다. 이렇게 하면 JS를 받기 전에 사용자는 Content를 열람할 수 있다.
우리가 고민하던 문제가 해결된 것 같으니 완벽해보인다!
하지만 이것도 좋은 방법이 아니다.
Why?
만일 JS에 굉장히 의존적인 사이트라면,
사용자가 의미있는 Content를 보기 위해서는
Fetching + executing 시간을 기다려야함.
📖 async 사용하기
<head>
...
<script async src="main.js"></script>
...
</head>async 속성값을 쓰면 뭐가 달라질까?
(async: boolean, default=true)
Parsing하다가 Script를 만나면 병렬로 작업을 수행한다.
그러다가 JS 다운이 완료되면 Parsing을 멈추고 JS를 실행한다.
장점: 총 Download 시간 감소
단점
- Html에서 우리가 원하는 요소가 아직 정의 되지 않았을 수 있음
- Parsing 동안 언제든 JS를 실행하기 위해 멈출 수 있어서 사용자의 Content 열람 시간 증가
📖 defer 사용하기
<head>
...
<script defer src="main.js"></script>
...
</head>.png)
async처럼 defer은 Parsing 중 Script를 만나면 Download 한다.
다른 점이 있다면 parsing이 모두 끝난 후
즉, 사용자에게 page를 보여준 후 JS를 실행한다.
📒 async VS defer
이렇게 보면 async와 defer의 차이를 잘 모르겠다.
순서도를 통해 async의 단점을 보여보겠어요.
<head>
...
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
...
</head>.png)
이처럼 script 작성 순서에 관계없이 지 멋대로 실행한다.
만일 JS들이 서로 의존적이라면 어쩌려고 그러는지!
b가 a한테 의존하는 친구면 b는 혼자 도착했다는 생각에 광광 울고 말 것이다.
반대로 defer은 작성 순서대로 실행해준다.
즉, defer 속성값을 사용하는 것이 가장 효율적이고 안전하다!
📗 Use Strict
JS를 작성시 상단에 'use strict'; 를 써주자.
TypeScript에선 작성하지 않아도 되지만,
내가 쓰는 게 순수 바닐라 JS라면 써주는 게 좋다.
Why?
전에 Posting한 글(JS의 역사)에서 Brendan은 JS를 매우 빠른 시간에 만들었다. 그렇다보니 JS는 매우 유연한 성질을 지녔는데, 유연하다는 건 동시에 개발자들이 많이 실수할 수 있음을 의미한다.
예를 들어
- 선언되지 않은 변수에 값을 할당한다거나
- 기존에 존재하는 프로토타입을 변경한다거나
등의 미친 행동을 할 수 있다는 건데...
이를 막기 위해서 우리는 'use strict';를 상단에 작성하여 상식적으로 JS를 이용할 수 있게 된다.
그리고 Engine이 JS를 더 효율적이고 빠르게 분석할 수 있게 해준다.
근데 사용하기 싫으면 안 해도 된다.
하지만 나는 사용할 것 같다!
📚 정리
해당 게시글은 유튜브 드림코딩 by 엘리님의 영상을 보고 공부하여 작성하였습니다.
제가 잘못이해하여 틀린 부분이 있을 수 있으니
더 자세히 알고 싶으신 분들은 하단의 링크를 참조해주세요!
