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

자바스크립트 실행 환경

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

하지만 브라우저와 Node.js는 용도가 다르다.

브라우저는 HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만

Node.js는 브라우저 외부에서 JS 실행 환경을 제공하는 것이 주된 목적이다.

예) Node.js는 파일을 생성, 수정할 수 있는 파일 시스템을 기본 제공하지만 브라우저는 지원하지 않는다.

 

웹 브라우저

개발자 도구

웹 애플리케이션 개발에 필수적인 강력한 도구. 윈도우는 F12 또는 Ctrl+Shift+I, mac은 command+option+I로 열 수있다.

자주 사용하는 개발자 도구의 기능은 다음과 같다.

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰 확인
Console	웹페이지 에러 확인 및 소스코드에 작성한 console.log 메서드의 실행 결과 확인
Sources	자바스크립트 코드 디버깅
NetWork	웹페이지 관련 네트워크 요청 정보와 성능 확인
Application	웹 스토리지, 세션, 쿠키 확인 및 관리

 

콘솔

콘솔은 자바스크립트 코드에서 에러가 발생해 어플이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.

구현단계에서는 콘솔을 열어둔 상태에서 개발하는 것이 좋다.

 

디버깅

콘솔의 에러 정보 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면 코드를 디버깅할 수 있는 Sources 패널로 이동한다.

코드 왼쪽의 라인 번호를 클릭해 중단점을 걸고 다시 버튼을 클릭하면 디버깅 모드로 들어간다.

 

 

Node.js

간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있지만 규모가 커지면 프레임워크 또는 라이브러리를 도입하거나 여러 도구를 사용해야 한다. ( React, Babel, Webpack ... ) 이때 node.js와 npm이 필요하다.

Node.j는 http://nodejs.org 에 접속하여 다운로드 할 수 있다.