자바스크립트 개발 환경과 실행 방법

#자바스크립트 실행 환경

 

1. 브라우저

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 포함하고 있다.

둘 다 ECMAScript를 실행가능하지만 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.

다양한 웹 브라우저가 존재하지만 구글 크롬이 점유율이 1위이다. 크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도로 설치할 필요가 없다. 개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다. 

자주 사용하는 개발자 도구이 기능정리

 

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 편집 내용이 저장되진 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
Console	로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
NetWork	로딩된 웹페이지에 관련된 네트워크 요청(request)정보와 성능을 확인할 수 있다.
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

2. Node.js

클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있다. 이때 Node.js 와 npm이 필요하다.

Node.js란 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 바로 Node.js 이다.

npm(node pacakge manager)은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. 

Node.js가 제공하는 REPL(Read Eval Print Loop)을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있다. 

 

3. Visual Studio Code

브라우저의 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션을 개발하는 단계에서 사용하기에는 부족함이 많다. 이러한 점을 코드 에디터를 사용해 보완할 수 있는데 가장 인기있는 에디터가 VSCode이다.