3.1 자바스크립트 실행 환경
-
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크린트 엔진을 내장하고 있다.
-
브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다.
-
따라서, 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.
-
한가지 주의 점은 브라우저와 Node.js 용도는 다르다는 것이다.
- 브라우저 : HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적, 클라이언트 사이드 Web API 지원
- Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적, ECMAScript와 Node.js 고유의 API 지원
웹 크롤링:
서버에서 웹사이트의 컨텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 다음, 이를 가공해서 필요한 데이터만 추출하는 경우가 있다.
이를 웹 크롤링(web crawling)이라고 한다.
서버 환경은 DOM API를 제공하지 않으므로 cheerio같은 DOM 라이브러리를 사용해 HTML 문서를 가공하기도 한다.
3.2 웹 브라우저
-
다양한 웹 브라우저가 있지만 주로 크롬을 사용한다.
-
크롬은 ECMAScript 사양을 준수하는 것은 물론, 시장 점유율도 65%로 가장 높다.
-
크롬 브라우저의 V8 자바스크립트 엔진은 Node.js 에서도 사용하고 있다.
3.2.1 개발자 도구
-
크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수 적인 강력한 도구다.
-
개발자 도구는 다음의 단축키로 열 수 있다.
| 운영체제 | 단축키 |
|---|---|
| 윈도우 | F12 or Ctrl + Shift + I |
| macOS | command + option + I |
- 개발자 도구의 기능은 다음과 같다.
| 패널 | 설명 |
|---|---|
| Elements | 로딩된 웹 페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹 페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인하여 유용한 힌트를 얻을 수 있다. |
| Console | 로딩된 웹 페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다. |
| Sources | 로딩된 웹 페이지의 자바스크립트 코드를 디버깅할 수 있다. |
| Network | 로딩된 웹 페이지에 관련한 네트워크 요청(request) 정보와 성능을 확인할 수 있다. |
| Application | 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다. |
3.2.2 콘솔
-
자바스크립트 코드에서 에러가 발생하면 가장 우선적으로 살펴봐야 할 곳이다.
-
에러가 발생한 경우 외에도 유용하다. 구현 단계에서 디버깅을 실행하는 것보다 간현하게 실행 결과를 확인하면서 개발을 진행할 수 있다.
-
콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop : 입력 수행 출력 반복) 환경으로 사용할 수도 있다.
3.2.3 브라우저에서 자바스크립트 실행
-
브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 샐행하고 코드 내에 console.log 메서드가 호출되었다면 콘솔에 실행결과가 출력될 것이다.
-
HTML에 포함된 자바스크립트를 브라우저에서 실행하는 방법
-
에러나는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
// 에러를 발생시키는 코드 : 선택자는 'counter-x'가 아니라 'counter'를 지정해야 됨
const $counter = document.getElementById('counter-x');
const $increase = document.getElementById('increase');
const $decrease = document.getElementById('decrease');
let num = 0;
const render = function () { $counter.innerHTML = num; };
$increase.onclick = function () {
num++;
console.log('increase 버튼 클릭', num);
render();
};
$decrease.onclick = function () {
num--;
console.log('decrease 버튼 클릭', num);
render();
};
</script>
</body>
</html>- 버튼 클릭 시 에러 발생
3.2.4 디버깅
-
에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면 다음과 같이 자바스크립트 코드를 디버깅할 수 있는 Sources 패널로 이동할 것이다.
-
원인의 이유를 알아내서 에러가 발생한 원인을 제거해보자.
-
에러가 발생한 코드 왼쪽의 라인번호를 클릭해 브레티크 포인트를 걸고(1️⃣) 다시 버튼을 클릭하면(2️⃣) 다음과 같이 디버깅 모드로 들어간다.
-
$counter 변수의 잘못 지정한 아이디를 수정하여 에러를 제거한다.
-
이처럼 디버깅은 먼저 에러 메세지를 확인하고 에러가 발생한 원인을 제거하는 것이다.
3.3 Node.js
3.3.1 Node.js와 npm 소개
라이언 달이 발표한 node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임환경이다
💡 런타임 환경 (Runtime Environment)
소프트웨어 프로그램이 실행되는 환경. 이 환경은 프로그램이 실행될 때 필요한 라이브러리, 모듈, 도구 등을 포함하며, 프로그램이 동작하는 데 필요한 모든 요소를 제공한다.
npm은 자바스크립트 패키지 매니져다 node.js에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할과 패키지 설치 관리를 위한 CLI를 제공한다
CLI란?
- "Command-Line Interface"의 약어로, 명령줄 인터페이스를 나타낸다.
- CLI는 텍스트 기반의 사용자 인터페이스로, 사용자는 명령어를 텍스트로 입력하여 프로그램을 실행하고 제어할 수 있다.
- 흔히 볼 수 있는 그래픽 사용자 인터페이스(GUI)와는 달리, CLI는 텍스트 입력을 통해 프로그램에 명령을 내리고 상호 작용을 한다.
- 사용자는 명령어와 옵션을 사용하여 프로그램을 실행하고, 결과 및 메시지는 텍스트로 반환된다.
3.3.2 Node.js 설치
- Node.js를 설치: Node.js의 웹사이트(http://nodejs.org)
- LTS(Long Term Supported) 버전은 장기적으로 안정된 지원이 보장된다.
- Current 버전은 최신 기능을 제공하지만 업데이트가 발생하고 있는 버전으로 안정적이지 않을 수 있다.
따라서 LTS 버전을 다운로드하도록 하자.
- 버전 확인
- npm은 Node.js에 포함되어 있어 Node.js 설치 시 자동 설치됨
node -v
npm -v- 최신 버전 업데이트
npm install -g npm@latest