[JS] DeepDive 03. 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

• 모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있어, 자바스크립트 코어인 ECMAScript를 실행할 수 있음.
• 하지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공되는 기능은 서로 호환되지 않음. 브라우저는 웹페이지를 브라우저 화면에 렌더링하는 것이 주 목적이지만, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적이기 때문.
• 브라우저에서만 지원하는 클라이언트 사이드 Web API(Client-side APIs)
  • ex: DOM API (파싱된 HTML 요소를 선택하거나 조작)
• Node.js에서만 지원하는 Node.js Host APIs
  • ex: 파일을 생성하고 수정할 수 있는 파일 시스템 API
  • 보안상의 이유로 브라우저 환경의 자바스크립트는 파일 시스템을 제공하지 않음. 브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제/수정/생성할 수 있다면 심각한 보안 문제가 발생할 수 있기 때문.

 

실행 방법

• 웹 브라우저의 개발자 도구:
  • 브라우저에서 F12 키를 누르거나 Ctrl+Shift+I를 눌러 개발자 도구에 접근함.
  • Console 패널: 에러 확인, console.log 메서드 확인, REPL(Read Eval Print Loop: 입력 출력 반복) 환경 제공.
  • Sources 패널: 중단점 걸고 디버깅 가능.
  • Chrome DevTools Console 사용법
  • Chrome DevTools JavaScript 디버깅 사용법
• Node.js의 REPL(Read Eval Print Loop):
  • 터미널에서 node 명령어를 입력하면 REPL 환경에 진입함.
• VSCode:
  • 내장 터미널: node 파일명.js 명령어로 자바스크립트 실행.
  • Code Runner 확장 플러그인: Node.js 환경에서 자바스크립트 실행. 클라이언트 사이드 Web API 포함된 소스코드는 실행 불가.
  • Live Server 확장 플러그인: 클라이언트 사이드 Web API가 포함된 자바스크립트 코드는 브라우저에서 실행해야 함. HTML 파일을 브라우저에서 직접 여는 대신, Live Server 플러그인을 사용하면 소스코드 수정 시 자동으로 브라우저에 반영됨.

 

『모던자바스크립트 Deep Dive』 를 공부하며 정리한 기록입니다.