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

in 모던자바스크립트




자바스크립트 실행 환경

  • 모든 브라우저와 Node.js는 js를 해석하고 실행할 수 있는 Js 엔진을 내장하고 있다.
  • 하지만 둘의 용도가 다르다.
  • 브라우저 : html, css, js를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적
  • Node.js : 브라우저 외부에서 js 실행 환경을 제공하는 것이 주된 목적
  • 따라서, 브라우저, node 모두 js의 코어인 ECMAScript는 실행할 수 있지만 브라우저와 node에 별도로 추가되어 제공하는 기능은 호환 X
  • ex ) 브라우저의 DOM API : 파싱된 Html요소를 선태가거나 조작하는 기능의 집합
  • ex ) 브라우저의 클라이언트 사이드 Web API
  • ex ) node : 파일을 생성하고 수정할 수 있는 파일 시스템
  • 이 때문에 vsCode에서 클라이언트 사이트 Web API를 다루기 위해서는 live Server를 사용해야 한다.



웹 브라우저

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

  • 브라우저는 html 파일을 로드하면 script 태그에 포함된 js 코드를 실행한다.



디버깅

  • 개발자도구 > 콘솔에서 에러 정보를 확힌 후 에러 발생 위치 링크 클릭을 통해 js 코드를 디버깅할 수 있는 Sources 패널로 이동
  • 오류난 빨간 밑줄 확인 후, 브레이크포인트 걸고 디버깅



Node.js

Node.js와 npm 소개

  • 브라우저에서만 동작하던 Js를 브라우저 이외의 환경에서 동작시킬 수 있는 js 실행 환경
  • npm : node pakage manager 로서, node.js에서 사용할 수 있는 모듈을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI 제공