[Javascript] 자바스크립트 실행환경

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

Node.js도 자바스크립트 엔진을 내장하고 있다.

따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.

기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다.

 

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

브라우저는 HTML, CSS, JavaScript를 실행해 웹페이지를 브라우저 화면에 랜더링하는 것이 주된 목적이다.

Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.

브라우저와 Node.js 모두 ECMAScript를 실행할 수 있지만 이외에 추가로 제공하는 기능은 호환되지 않는다.

 

브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공한다.

Node.js는 DOM API를 제공하지 않는다.

 

※ 웹 크롤링

서버에서 웹사이트 컨텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져와서 이를 가공해서 필요한 데이터만 추출하는 것을 말한다. 서버 환경은 DOM API를 제공하지 않으므로 DOM 라이브러리를 사용한다.

 

Node.js에서는 파일을 생성하고 수정할 수 있는 파일 시스템을 기본으로 제공하지만 브라우저는 지원하지 않는다.

 

웹 브라우저

크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있다.

 

개발자 도구

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다.

개발자 도구는 브라우저에 기본 내장되어 있어 단축키 F12 (윈도우)로 열 수 있다.

 

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

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

 

콘솔

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

 

개발자 도구 콘솔

자바스크립트 코드 작성할 때 줄바꿈이 필요한 경우 Shift + Enter 키를 누른다.

 

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

브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.

자바스크립트 코드 내에 console.log 메서드가 호출된다면 콘솔에 실행 결과가 출력될 것이다.

 

디버깅

개발자 도구 Sources 패널에서 에러가 발생한 위치가 빨간색 밑줄로 표시되는데 마우스를 올려보면 에러 정보가 표시도니다. 에러가 발생한 코드 왼쪽 라인 번호를 클릭해 브레이크포인트를 걸고 다시 실행하면 디버깅 모드로 들어간다.

 

Node.js

브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있지만 프로젝트 규모가 커짐에 따라 프레임웤 또는 라이브러리를 사용할 필요가 있다. 이 때 Node.js와 npm이 필요하다.

 

npm

node package manager로 자바스크립트 패키지 매니저다.

Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 Command line interface를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색해서 재사용할 수도 있다.

npm에 대한 자세한 내용은 https://poiemaweb.com/nodejs-npm 참고

Node.js & npm | PoiemaWeb

Node.js 설치

http://nodejs.org 에 접속하면 두 개의 다운로드를 볼 수 있다.

Node.js

LTS는 장기적으로 안정된 지원이 보장된다.

Current 버전은 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있다.

 

실제 개발 환경이라면 LTS 버전을 설치하는 것이 좋다.

 

LTS 버전을 설치하겠다.

 

설치가 완료되면 cmd 창에 Node.js와 npm 버전을 출력해서 정상적으로 설치되었는지 확인한다.

cmd창

 

Node.js REPL

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

 

cmd 창에서 node 명령어를 입력하면 프롬프트가 변경되면서 자바스크립트 코드를 실행할 수 있다.

node 명령어

자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력하면 된다.

파일 확장자 .js는 생략해도 된다.

Ctrl + c 키를 두 번 입력하면 Node.js REPL이 종료된다.

 

비쥬얼 스튜디오 코드

비쥬얼 스튜디오 코드에 터미널이 내장되어 있다.

단축키는 Ctrl + ` 이다.

 

Code Runner 확장 플러그인

VS code에서는 확장 플러그인 저장소인 마켓플레이스를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다.

VS code의 확장 버튼을 클릭하고 Code Runner를 검색하여 Install 버튼을 클릭한다.

마켓플레이스에서 Code Runner 검색

Code Runner 확장 플러그인에서는 Ctrl + Alt + N 단축키로 자바스크립트 파일을 실행할 수 있다.

 

Code Runner 확장 플러그인은 Node.js 환경을 사용해서 자바스크립트를 실행한다.

클라이언트 사이트 Web API가 포함된 소스코드는 Code Runner 확장 플러그인을 통해 실행하지 말고 브라우저 환경에서 실행해야 한다.

 

Live Server 확장 플러그인

클라이언트 사이드 Web API가 포함된 자바스크립트 코드를 실행하려면 Node.js 환경이 아닌 브라우저에서 실행해야 한다. HTML 파일을 브라우저에서 열어도 좋지만 소스코드를 수정할 때마다 매번 새로고침을 해야한다.

Liver Server 확장 플러그인을 사용하면 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해주기 때문에 매우 편리하다.

 

마켓플레이스에서 Live Server 검색

HTML 파일을 작성하고 Go Live 버튼을 누르면 가상 서버가 가동되어 브라우저에 HTML 파일이 자동 로딩된다.

이후 소스코드를 수정하고 저장하면 브라우저에 자동으로 반영된다.