1. Hello Javascript!
1.1 node.js 에서 확인
// heloo javascript
console.log('Hello Javascript!');
위의 코드를 main.js로 저장하고 node.js를 이용하여 실행해봅니다.
실행은 소스파일이 있는 경로에서 실행해야 합니다.
node.js 는 Javascript 엔진이 있어서 브라우저 없이 Javascript를 실행할 수 있습니다. node.js가 설치되어 있지 않다면 홈페이지에 접속하여 node.js를 설치합니다.
https://dev-handbook.tistory.com/61
[nodejs] node.js 다운로드 및 설치
간단하게 Javascript 공부를 위해서 시작하다 보니 실습환경으로 node.js를 요구하고 있어서 급하게 다운로드 및 설치를 하게 되었습니다. 떡 본 김에 포스팅 하나 합니다. 1. node.js 다운로드 처음 node
dev-handbook.tistory.com
1.2 브라우저(크롬) 환경에서 확인
브라우저 환경에서는 개발자 도구를 사용하여 확인할 수 있습니다.
먼저 script로 js파일을 포함하는 index.html을 작성하고, VSCode의 LiveServer를 실행해서 크롬 브라우저에 띄웁니다. 그다음 [Ctrl + Shift + i]로 개발자 도구를 띄우면, 콘솔 화면에 메시지가 출력된 것을 확인할 수 있습니다.
<!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>
JavaScript의 Console API를 사용하여 메시지 출력
2. Preparation
2.1 Web API (Application Program Interface)
- Javascript가 아니라 브라우저에서 제공하는 함수들
- mdn web docs에서 확인할 수 있다.
- https://developer.mozilla.org/ko/docs/Web/API
2.2 브라우저 개발자 도구
브라우저에서 제공하는 개발자 도구를 활용하면 개발에 큰 도움을 받을 수 있습니다.
- 요소 : HTML의 DOM구조를 자세히 살펴볼 수 있음
- 콘솔 : 간단한 소스를 입력하여 실행해 볼 수 있음
- 소스 : 소스 확인 및 디버깅 환경을 제공
- 네트워크 : 통신 내역을 살펴볼 수 있음.
- 기타 다양한 기능을 제공
1.3 JavaScript 레퍼런스 홈페이지
ECAMSCript 홈페이지
https://www.ecma-international.org/
- 가장 최신 정보를 살펴볼 수 있겠지만 보기 편리한 홈페이지는 아님
mozilla developer 홈페이지 추천
https://developer.mozilla.org/ko/
- 공식 사이트처럼 이용할 수 있으며 보다 보기 편리하고 예제도 충실한 홈페이지
3. async vs defer
html이 브라우저에서 해석하고 관련 파일들을 다운로드해서 페이지를 보여주는 순서에 대한 이해가 필요합니다.
3.1 <script>를 <head>에 포함하는 경우
브라우저는 HTML을 한 줄씩 parsing 하고 실행
<script> 태그를 만나면, 실행을 멈추고 js파일을 다운로드한 다음 실행, 이 시간 동안은 HTML 해석이 중단된다.
js 파일이 크다면 실행 중 다운로드 오버헤드로 페이지 표시가 다운로드 시간 동안 중단될 수 있다.
3.2 <script> 태그가 <body> 태그 마지막에 포함하는 경우
페이지가 모두 출력된 다음 js를 실행
사용자는 페이지를 빨리 볼 수 있지만, js가 동적인 목적이 더 중요하다면 js를 다운로드하고 실행할 수 있을 때까지 페이지를 제대로 사용할 수 없다.
3.3 <head> 영역에 두고 async 옵션을 사용하는 경우
asyn 옵션은 <script> 태그에 삽입하면 사용할 수 있다.
순차적으로 해석하는 것이 아니라 <script> 태그를 만나면 js를 먼저 다운로드하고, js를 실행하는 동안만 HTML 해석이 중지된다. html을 모두 다운로드한 다음 js를 실행하는 것이 아니므로 DOM을 다루는 js가 실행된다면 오류가 발생할 수 있다.
js 파일이 여러 개가 존재하는 경우, js는 다운로드한 순서대로 실행이 되므로, 만약 실행 순서에 의존하는 코드가 있다면 에러가 발생할 수 있다.
3.4 <head> 영역에 두고 defer 옵션을 사용하는 경우
HTML문을 순서대로 실행하며 js파일도 비동기적으로 다운을 시작한다.
HTML을 모두 해석하고 나면 js파일을 실행하므로 js 파일 실행에도 아무런 문제가 없다.
다수의 js 파일이 존재하는 경우에도 모든 파일을 다운로드하고 나서, HTML 파싱이 완료된 다음 script문을 기재한 순서대로 js를 실행하므로 가장 안정적으로 동작하는 옵션이라고 할 수 있다.
4. Use Strict 정의
순수 바닐라 자바스크립트를 실행하는 경우 'use strict' 옵션을 사용하는 것이 좋다.
초기의 자바스크립트는 유연한 언어여서 편리하지만, 변수를 선언하지 않고 사용하거나, 실행 중 의도하지 않게 데이터 타입이 변경될 수 있는 위험이 존재하고 있다.
ECMAScript 5에 새로 추가된 옵션인 'use strict'를 사용하게 되면 변수를 선언하지 않고 사용하는 등의 위험한 사용방법을 제한하여 사용할 수 있다. 또한 자바스크립트 실행이 조금 더 빨라지므로 가급적 사용하는 것이 좋다.
// hello javascript
// ECMAScript 5에서 추가됨
'use strict';
console.log('Hello Javascript!');
'Dev. Handbook > Javascript' 카테고리의 다른 글
| [Javascript] ES5+ 기초강의 6 - class vs object, 객체지향언어 (0) | 2022.07.01 |
|---|---|
| [Javascript] ES5+ 기초강의 5 - Arrow Function? 함수의 선언과 표현 (0) | 2022.06.26 |
| [Javascript] ES5+ 기초강의 4 - 연산자, 조건문, 반복문, 코드 리뷰 팁 (0) | 2022.06.21 |
| [Javascript] ES5+ 기초강의 3 - 데이터 타입, let vs var, hoisting (0) | 2022.06.20 |
| [Javascript] ES5+ 기초강의 1 - 자바스크립트의 역사와 현재 그리고 미래 (0) | 2022.06.13 |
댓글