자바스크립트 실행 환경
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저환경 또는 Node.js 환경에서
실행할 수 있다.
그런데 한가지 주의해야할점은 브라우저와 Node.js 는 용도가 다르다는 것이다. 브라우저는 HTML, CSS, 자바스크립트를 실행해
웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js 는 브라우저외부에서 자바스크립트 실행 환경을 제공하는 것이
주된 목적이다.
브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집한인 DOM API를 기본적으로 제공한다.
하지만 브라우저 외부에서 자바스크립트 개발환경을 제공하는 것이 주 목적인 Node.js 는 DOM API를 제공하지않는다.
브라우저 외부 환경에서는 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문이다.
반대로 Node.js 에서는 파일을 생성하고 수정할수 있는 파일 시스템을 기본 제공하지만 브라우저는 이를 지원하지 않는다.
웹애플리케이션의 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다. 만약 브라우저를 통해 다운로드 되어
실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제하고 수정할수 있다면 이는 사용자 컴퓨터가
악성코드에 그래도 노출된것과 마찬가지다. 따라서 보안상의 이유로 브라우저 환경의 자바스크립트는 파일 시스템을 제공하지 않는다.
이처럼 브라우저는 ECMAScript 와 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimation, Frame, SVG, Web stroage, Web Comonent, Web Worker 와 같은 클라이언트 사이트 Web API를 지원한다. Node.js는 클라이언트 사이드
Web API를 지원하지 않고 ECMAScript 와 Node.js 고유의 API를 지원한다.
개발자 도구
크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다.
개발자 도구는 웹개발에 유용한 다양한 기능을 제공한다
Elements
로딩된 웹페이지의 DOM과 CSS 를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지않는다
Console
로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
Source
로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
Network
로딩된 웹페이지에 관련된 네트워크 요청정보와 성능을 확인할 수 있다.
Application
웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.
Node.js
브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트 규모가 커짐에 따라
React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, EsLint 등 여러가지 도구를
사용할 필요가 있다. 이때 Node.js 와 npm이 필요하다.
브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬수 있는 자바스크립트 실행환경인 Node.js와
Node.js에서 사용할 수있는 모듈들을 패키지화해서 모아둔 저장소 역활과 패키지 설치 및 관리를 위한 CLI를 제공하는 npm( 자바스크립트 패키지 매니저) 가 있다.