[모던 자바스크립트 Deep Dive] 03장 자바스크립트 개발 환경과 실행 방법

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다.

 

3.1 자바스크립트 실행 환경

---

자바스크립트를 브라우저 환경에서 실행하는 방법과 Node.js 환경, 그리고 VSCode를 활용해 브라우저나 Node.js 에서 실행하는 방법을 살펴봅시다.

 

3.2 웹 브라우저 

---

여기서는 크롬 브라우저를 사용하도록 합니다.

 

3.2.1. 개발자 도구 

개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다. 

- Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있음

- Console : 로딩된 웹 페이지의 에러를 확인하거나 console.log 메서드의 실행 결과 등을 확인할 수 있음

- Sources : 로딩된 웹 페이지의 js 코드를 디버깅 할 수 있음

- Network : 로딩된 웹 페이지에 관련된 네트워크 요청 정보와 성능 확인 가능

- Application : 웹 스토리지, 세션, 쿠키 확인하고 관리 가능 

 

3.2.2 콘솔

개발자 도구의 콘솔은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳입니다.

 

3.2.3. 브라우저에서 자바스크립트 실행 

패스

 

3.2.4 디버깅

자세한 내용은 구굴의 Tools for Web Developers 콘솔 사용, Tools for Web Developers: Chrome DevTools 참고하면 됩니다.

 

3.3. Node.js

---

프로젝트의 규모가 커짐에 따라 React, Angular 와 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있습니다. 이때 Node.js와 npm이 필요합니다. 

 

3.3.1 Node.js와 npm 소개 

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경입니다. 즉 브라우저에서만 동작하던 js를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js입니다. npm (node package manager)은 js 패키지 매니저입니다. Node.js에서 사용할 수 있는 모듈을 패키지화해서 모아둔 저장소 역할과 CLI를 제공합니다.

 

3.3.2 Node.js 설치

패스 

 

3.3.3 Node.js REPL

 

3.4 비쥬얼 스튜디오 코드 

---

패스