본 내용은 모던 자바스크립트 Deep Dive. 이웅모 저. 에 출처하며 자바스크립트에 숨참고 deep dive 합니다.
모든 브라우저와 Node.js는 기본적으로 자바스크립트 엔진을 내장하고 있다. 따라서 해당 환경에서 실행 가능하다.
한 가지 주의해야 할 점은 브라우저와 Node.js는 용도가 다르다는 것이다.
브라우저: HTML,CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적
Node.js: 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적
→ 따라서 브라우저와 Node.js 모두 자바스크립트의 코어이니 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.
ex) 브라우저에서는 DOM API 제공, Node.js에서는 제공하지 않음
반대로, Node.js에서는 파일 시스템을 제공하지만 브라우저는 제공하지 않음
웹 애플리케이션의 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다. 만약 브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제하거나 수정하고 생성할 수 있다면 사용자 컴퓨터가 악성 코드에 그대로 노출된 것과 마찬가지다
이처럼 브라우저는 ECMAScript와 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web component, Web Worker 같은 클라이언트 사이드 Web API를 지원한다.
Node.js는 클라이언트 사이드 Web API를 지원하지 않고 ECMAScript와 Node.js 고유의 API를 지원한다.
자바스크립트 실행 방법
브라우저 환경에서 실행
Node.js 환경에서 실행
Vsc를 사용해 브라우저나 Node.js 환경에서 실행
브라우저에 기본 내장
개발자 도구 기능
Elements: 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
Console: 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
Sources: 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
Network: 로딩된 웹페이지에 관련된 네트워크 요청정보와 성능을 확인할 수 있다.
Application: 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.
개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많다
콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있다.
클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있다.
브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js다.
npm(node package manager)은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다.