FrontEnd

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

유민기 2025. 2. 22. 05:27

브라우저 / Node.js / Web API / 개발자 도구 / 디버깅 / npm / VSC / 확장 플러그인

3.1 자바스크립트 실행 환경

브라우저와 Node.js

모든 브라우저 및 Node.js는 자바스크립트 엔진이 내장
따라서 JS는 브라우저 환경 또는 Node.js 환경에서 실행 가능하며
기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다.

But, Node.js와 브라우저의 용도는 서로 다르다.

브라우저의 목적

HTML, CSS, JS를 실행해 웹 페이지를 브라우저 화면에 렌더링

Node.js의 목적

브라우저 외부에서 JS 실행 환경을 제공하는 것

⇒ 따라서 브라우저와 Node.js 모두 JS의 코어인 ES를 실행할 수 있지만, 둘 사이에서 ES 이외에 추가로 제공하는 기능은 호환되지 않는다.

두 환경의 차이

  DOM API 파일 시스템
브라우저 기본 제공 지원 X
Node.js 제공 X 기본 제공

브라우저 외부 환경에서 쓰이는 Node.js는 DOM을 직접 접근할 필요가 없기에 DOM API 제공 X

반대로 브라우저는 사용자의 로컬 파일을 변경하는 등의 보안 이슈를 방지하기 위해 파일 시스템 제공 X

(다만 Web API 중 FileReader 객체를 사용하면 사용자가 지정한 파일 read 가능)

정리

브라우저는 ECMAScript와 클라이언트 사이드 Web API를 지원

Node.js는 ECMAScript와 Node.js 고유의 API를 지원

브라우저와노드관계

*웹 크롤링: 서버에서 웹 사이트 콘텐츠 수집을 위해 웹사이트에서 HTML 문서를 가져온 후, 이를 가공해 필요 데이터만 추출하는 것을 의미한다. 서버 환경은 DOM API를 제공하지 않기에 cheerio와 같은 DOM 라이브러리를 사용해 HTML 문서를 가공하기도 한다.

3.2 웹 브라우저

구글의 크롬 브라우저는 ECMAScript 사양을 준수하며 시장 점유율도 가장 높다.
크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있다.

개발자 도구

크롬 브라우저가 제공하는 DevTools! ⇒ 웹 애플리케이션 개발에 필수적 + 강력한 도구

브라우저에 기본 내장되어있어 별도 설치 필요 X

개발자 도구 open 단축키

macOS: command + option + I

윈도우: Ctrl + Shift + I

개발자 도구의 기능

아래의 요소들은 패널이라고 칭한다.

  1. Elements
    • 로딩된 웹 페이지의 DOM과 CSS를 편집해 렌더링된 뷰 확인 가능 (but 편집 내용 저장 X)
    • 웹페이지가 의도대로 렌더링되지 않았을 때 이 패널을 확인해 유용한 힌트 얻기 가능
  2. Console
    • 로딩된 웹페이지의 에러를 확인하거나, JS 소스코드에 작성한 console.log()의 실행 결과 확인 가능
  3. Sources
    • 로딩된 웹페이지의 JS 코드를 디버깅 가능
  4. Network
    • 로딩된 웹페이지에 관련된 네트워크 요청 정보, 성능 확인 가능
  5. Application
    • 웹 스토리지, 세션, 쿠키 확인 및 관리 가능

콘솔

JS 코드에서 에러 발생으로 애플리케이션이 정상 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳!

또한 구현 단계 중 실행 결과를 디버깅 보다 간편하게 console.log()로 확인 가능

콘솔은 REPL 환경으로 사용도 가능 → JS 코드를 직접 입력하고 결과가 확인 가능한 형태.

개발자도구를 따로 분리하기도 가능

콘솔의 대표 역할

  1. 자바스크립트 코드를 직접 실행 가능
  2. Shift key를 이용해 여러 줄의 코드 내에서 줄바꿈도 가능
  3. 코드 실행 중 발생한 에러 내용 출력
  4. 코드 실행 중 존재하는 console.log() 결과 출력

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

HTML 파일에 포함된 JS를 브라우저에서 실행하는 방법

HTML 파일 내부 script 태그에 자바스크립트 코드를 작성하면 브라우저에서 실행 가능하다.

디버깅

에러 발생 시 개발자 도구의 Sources 패널에서 에러 발생 지점에 브레이크 포인트를 걸고, 디버깅 모드로 진입하여 해결 가능

⇒ 디버깅은 먼저 에러 메세지 확인 후 에러가 발생한 원인을 제거하는 것! 에러 메세지 확인이 매우 중요❗️

3.3 Node.js

브라우저에서 동작하는 간단한 웹 애플리케이션(클라이언트 사이드)는 브라우저만으로도 개발 가능

but 프로젝트 규모가 커지며 다양한 *프레임워크/라이브러리가 도입되고, *여러 도구 사용의 필요성 증가
⇒ Node.js와 npm 필요

*프레임워크/라이브러리 예시: React, Angular, Lodash

*여러 도구 예시: Babel, Webpack, ESLint

Node.js와 npm 소개

브라우저 이외 환경에서도 JS를 동작할 수 있는 자바스크립트의 실행 환경

npm (Node Package Manager)

자바스크립트 패키지 매니저

Node.js에서 사용할 수 있는 모듈들을 패키지화해 모아둔 저장소 + 패키지 설치 및 관리를 위한 CLI 제공

→ 자신이 작성한 패키지 공개 or 필요한 패키지 검색해 재사용 가능

Node.js 설치

Node.js 웹사이트에 접속해 다운 가능

LTS vs Current

Node.js 설치 시 나타나는 두 버전

LTS: Long Term Support 버전으로 장기적으로 안정된 지원 보장 → 실제 개발 환경에서 권장

Current: 최신 기능을 제공하지만, 업데이트가 발생하는 버전으로 안정성 ↓

Node.js 및 npm 설치 확인

기본적으로 Node.js 설치 시 npm도 함께 설치 된다.

node -v npm -v 로 설치 여부 + 버전 확인 가능

Node.js REPL (Read Eval Print Loop)

Node.js가 제공하는 Read Eval Print Loop를 이용하면 간단한 JS 코드를 실행 후 결과 확인까지 가능하다.

node 명령어의 사용

node 명령어 입력 후 프롬프트가 > 로 변경되면 JS 코드 실행 가능 → Ctrl + C 키 두 번 입력 시 종료

node 파일명 : JS 파일 실행 (파일명 뒤에 확장자는 생략 가능)

참고 문서

3.4 비주얼 스튜디오 코드 (VSC)

비주얼 스튜디오 코드 설치

브라우저의 콘솔 및 Node.js의 REPL에서의 JS 코드 실행은 애플리케이션 개발 시엔 부족함이 많다.

비주얼 스튜디오 같은 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등
다양하고 편리한 기능 활용이 가능하다.

VSCode는 공식 사이트에서 사용 중인 OS에 해당하는 설치 프로그램을 내려받아 설치할 수 있다.

내장 터미널

VS Code에는 터미널이 내장되어 있으며, Ctrl + Shift + ₩(Mac) / Ctrl + `(윈도우) 단축키로 열 수 있다.

Code Runner 확장 플러그인

VS Code는 확장 플로그인 저장소인 마켓플레이스를 통해 다양한 확장 플러그인을 다운로드해 사용할 수 있다.

Code Runner 확장 플로그인은 단축키를 사용해 편리하게 현재 표시 중인 JS 파일을 실행할 수 있다.

윈도우: ctrl + alt + n

macOS: control + option + n

Web API 구분의 필요성

만약 코드 에디터 내에서 alert를 사용한 코드를 실행하게 되면, ReferenceError 가 발생한다.

why? 해당 함수는 브라우저에서만 동작하는 클라이언트 사이트 Web API라서 브라우저 환경에서만 유효하다.

Code Runner 확장 플러그인인 Node.js 환경을 사용해 JS를 실행하기에 Web API 함수를 알 수 없다.

⇒ 브라우저 환경에서 실행 필요

Live Server 확장 플러그인

Web API가 포함된 JS 코드 실행 시엔 브라우저 환경에서 실행해야 한다.

브라우저에서 실행하기

  1. 개발자 도구의 콘솔 이용
  2. JS 코드를 HTML에 삽입
    • 해당 HTML 파일을 브라우저에서 오픈하면 실행 가능하다.
    • 브라우저에서 직접 오픈해도 되지만, 파일 경로 문제 발생 우려 및 소스코드 수정 시 매번 새로고침해야하는 번거로움 존재 ⇒ Live Server 이용으로 해결 가능

Live Server

라이브 서버는 소스코드 수정 시 수정 사항을 자동으로 브라우저에 반영해주어 매우 편리하다.

VS Code 내 Extensions에서 검색 후 설치 가능하며, IDE 하단에 Go Live 버튼을 이용해 가상 서버를 기동할 수 있다. → 가상 서버가 기동되면 브라우저에 HTML 파일이 자동 로딩되며 소스코드의 수정 사항까지 가상 서버에 자동 반영된다.

저작자표시 (새창열림)