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

자바스크립트 실행 환경

1. 모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있다. 하지만 용도가 다르다
2. 브라우저
   • 웹 페이지를 화면에 렌더링하는 것이 주된 목적
   • ECMAScript + DOM API, Alert API 등
3. Node.js
   • 브라우저 외부에서 자바스크립트 실행 환경 제공
   • ECMAScript + 파일 생성 수정할 수 있는 파일 시스템 등
4. ECMAScript 외에 용도에 따라 다른 기능이 제공되는 것을 확인할 수 있음

   

   브라우저 vs Node.js

웹 브라우저

크롬 브라우저

Google Chrome - Download the Fast, Secure Browser from Google

크롬 브라우저는 V8 자바 스크립트 엔진을 사용한다

개발자 도구

크롬 브라우저에서 기본 내장

단축키

• 윈도우: F12 or Ctrl + Shift + I
• 맥: command + option + I

기능

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

콘솔

• console.log(): 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수
• 자바스크립트 코드를 직접 입력하여 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용 가능

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

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

디버깅

크롬 개발자 도구 활용 참고

Chrome DevTools - Chrome for Developers

 Node.js

프레임워크나 라이브러리, 도구 등을 사용할 때, Node.js나 npm이 필요

Node.js와 npm 소개

• Node.js: 브라우저 이외의 환경에서 동작할 수 있는 자바스크립트 실행환경
• npm(node package manager)
  • 자바스크립트 패키지 매니저
  • 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 관리를 위한 CLI(Command Line Interface) 제공
  • npm 관련 내용 정리

Node.js & npm | PoiemaWeb

Node.js 설치

설치 사이트

Node.js

버전 확인을 위해서는 아래 코드 실행

node -v
npm -v

Node.js REPL

터미널에서 아래 커맨드로 REPL 사용 가능

node

 

REPL 관련 정보

REPL | Node.js v21.1.0 Documentation

비주얼 스튜디오 코드 VSCode

마이크로소프트에서 개발한 코드 에디터

비주얼 스튜디오 코드 설치

다운로드 링크

Visual Studio Code - Code Editing. Redefined

내장 터미널

index.js 파일을 생성하고 아래 코드 실행할 경우 해당 자바스크립트 파일 실행 가능

node index

Code Runner 확장 플러그인

extension 중 하나인 code runner를 실행할 경우, 현재 표시 중인 자바스크립트 파일을 실행할 수 있음

기본 단축키: Ctrl + Alt + N

Live Server 확장 플러그인

extension 중 하나인 live server를 실행할 경우, 가상 서버를 기동하여 브라우저에 HTML를 랜더링 해줌