오늘은 Javascirp 파일에 콘솔을 작성하고 출력하는 과정과 브라우저에서 스크립트 파일을 불러오는 여러가지 방법들에 대한 이해를 해보겠다.
1. Hello World 출력하기
Javascript 파일에 콘솔을 작성하고 출력하는 과정, 스크립트 파일을 불러오는 여러가지 방법들에 대한 설명
main.js
console.log("Hello World");
출력 확인 방법
- node main.js
- VS code Live Server → Browser console
위 두 환경에서 모두 Hello World 가 실행되는 것을 확인할 수가 있다!
그 이유는 Node.js랑 Web Browser 모두 Console 에 관한 API가 존재하는 것!
2. Async & Def
2-1. Including in head tag
<!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>- 브라우저는 위의 코드를 한줄 한줄 씩 읽어가다가 script 태그를 발견하면 다음 줄을 읽지 않고 script 소스를 서버에서 다운받은 후에 다시 Html 태그들을 Parsing 해 나가기 시작한다
→ 인터넷이 느리고 js 파일이 크다면 사용자에게 화면이 보여지는 것에 시간이 걸리게 됨
→ Head 태그에 무작정 넣는 것은 좋지 못하다!
2-2. Including in body tag
<!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 src="main.js"></script>
</body>
장점: javascript가 다운되지 않은 상태에서도 기본적인 html을 보여줄 수 있음
단점: 만약 웹 사이트가 Javascript에 의존적이라면 , 의미있는 컨텐츠가 제공되기 위해서는 서버에서 자바스크립트 파일이 fetching되고 executing 되는 시간을 기다려야함.
2-3. <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 async src="main.js"></script>
</head>
<body></body>
</html>: web Browser가 html 태그를 읽어나가다가 script를 만나면 병렬적으로 스크립트를 처리하고, fetching 해오는 것에 성공하면 하던 일을 멈추고 javascript 파일을 실행한다. 후에 나머지 html 태그들을 parsing 하는 작업을 수행한다.
장점: body 끝에서 일어나는 것보다 다른 태그들을 읽음과 동시에 fetching을 진행하기 때문에 훨씬 시간이 절약됩니다.
단점: Javascript파일이 HTML 태그가 실행되기도 전에 executing 되어 돔 요소를 Javascript로 조작하게 된다면 아직 html 요소가 정의 되지 않은 경우에 위험할 수 있다.
JS를 실행시키는 동안 HTML을 읽어오는 시간이 delay 되기 때문에 여전히 사용자가 기다려야된다는 점이 있음
2-4. <head> + defer : ‼️ Best option: 효율 and 안전
<!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 을 모두 parsing 하면서 fetching을 실행하고 HTML이 모두 다 parsing된 후에 Javascript를 Execute 시킴
여러 스크립트 파일을 선언한 경우에 fetching을 병렬적으로 처리하고, 처리된 순서에 상관 없이 선언된 순서대로 execute 시키기 때문에 만약에 JS 파일이 순서에 의존적인 파일들이라면 defer를 사용하는 것이 좋다.
3. JS 를 사용할 때 ‘use Strict’ 를 선언한 후 개발을 진행하는 것이 좋음!: 안전성
- 유용한 사이트
- JavaScript
JavaScript | MDN
JavaScript (JS)는 경량, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많
developer.mozilla.org
👍 해당 포스트는 드림코딩 엘리의 유투브 강의를 보고 정리한 내용입니다.
'Computer Language 🗣 > JavaScript' 카테고리의 다른 글
| [JavaScript] Arrow Function, 함수의 선언과 표현 (0) | 2021.08.11 |
|---|---|
| [Javascript] 자바스크립트 연산, 반복문 (0) | 2021.08.10 |
| [Javascript] 데이터 타입 (0) | 2021.08.10 |
| [JavaScript] Javascript: 브라우저의 역사 (0) | 2021.08.10 |
| [자바스크립트(Javascript)]Object에서 특정 값만 추출하여 List 만드는 방법 (0) | 2020.11.25 |
댓글