자바스크립트는 어디서 실행될까? 브라우저 vs. Node.js 차이점

GoGoComputer·2025년 2월 1일
JavaScript개발자자바스크립트프로그래머

javaScript study

목록 보기
3/10
post-thumbnail

자바스크립트(JavaScript)는 원래 웹브라우저에서 웹페이지를 동적으로 변화시키기 위해 만들어졌지만, 실제로는 브라우저 외부에서도 작동할 수 있습니다. 이 내용이 조금 복잡하게 들릴 수 있으니, 차근차근 쉽게 길게 풀어서 설명해 드릴게요!

1. JavaScript 호스트 환경이란?

“호스트 환경(host environment)”란, 자바스크립트가 실행되는 장소나 프로그램을 말합니다.

  • 가장 대표적인 예: 브라우저(Chrome, Firefox, Safari 등)
  • 그 외에도: Node.js, Deno, 앱 개발 환경(React Native) 등

이런 환경에는 모두 자바스크립트 엔진이 들어 있습니다.

  • 예:
    • Chrome → V8 엔진
    • Firefox → SpiderMonkey
    • Node.js → (역시) V8 엔진을 기반

자바스크립트 엔진은 우리가 작성한 JavaScript 코드를 해석/컴파일해서 실행하는 핵심 프로그램입니다.

2. 브라우저에서의 JavaScript

1) 브라우저가 제공하는 기능(환경)

  • 웹사이트를 볼 때, HTML, CSS, JavaScript가 함께 로드됩니다.
  • 자바스크립트는 이미 웹페이지에 로드된 HTML/CSS와 상호작용하여, 화면을 동적으로 조작할 수 있습니다.
    • 예: 버튼을 클릭하면, 화면의 일부 텍스트가 바뀌거나 팝업 모달을 띄운다.
  • 또한, 백그라운드에서 HTTP 요청을 보낼 수도 있습니다. (Ajax, fetch API 등)
    • 새로고침 없이도 서버에서 데이터를 받아와 반영할 수 있죠.

2) 브라우저에서 할 수 없는 일

  • 보안 문제 때문에, 브라우저 안에서 실행되는 자바스크립트 코드는
    • 사용자의 컴퓨터(로컬 파일 시스템)에 직접 접근할 수 없습니다.
    • 임의로 파일을 지우거나, 시스템 정보를 마음대로 가져올 수 없죠.
  • 즉, 브라우저는 자바스크립트를 “샌드박스(Sandbox)” 안에서 제한적으로만 실행합니다.
    • 웹페이지가 보안 허용 범위를 넘어서는 작업을 하지 못하도록 막아두는 거예요.

이런 제한들이 사용자 안전을 지켜 주는 동시에,
웹페이지와 운영 체제를 직접 연결하지 못하게 막음으로써,
악성 코드가 자유롭게 활동할 수 없도록 합니다.

3. Node.js에서의 JavaScript

1) Node.js란?

  • Node.js는 브라우저가 아닌 컴퓨터 환경에서 자바스크립트를 돌릴 수 있도록 만든 런타임입니다.
  • 구글 크롬의 V8 엔진을 브라우저 밖으로 빼서, 독립 실행형 프로그램처럼 사용할 수 있게 만든 것이에요.
  • 덕분에 자바스크립트를 이용해 서버를 만들 수도 있고,
    파일을 읽고 쓰는 등 로컬 시스템에 접근할 수도 있습니다.

2) Node.js에서 할 수 있는 작업

  • 파일 시스템 접근: 로컬에 있는 파일을 읽고 쓰거나, 폴더를 관리하는 작업을 수행할 수 있습니다.
  • 네트워킹: HTTP 요청을 보내거나, 웹 서버를 구현해 클라이언트(브라우저) 요청에 응답할 수도 있습니다.
  • 운영 체제와 더 깊이 상호작용: 프로세스, 환경 변수, 디스크, 메모리 등 다양한 시스템 리소스에 접근 가능합니다.

3) Node.js에서 할 수 없는 작업

  • HTML/CSS를 직접 조작하지는 못합니다.
    • 브라우저에서처럼 “화면을 동적으로 바꾸기”라는 개념이 없습니다.
    • Node.js는 시각적 UI를 다루지 않고, 서버나 로컬 애플리케이션을 위한 용도로 쓰이니까요.

4. 왜 이렇게 환경별로 제한이 다를까?

  • 브라우저:

    • 사용자는 웹사이트를 방문할 뿐이므로, 웹페이지(자바스크립트)는 사용자 컴퓨터를 멋대로 조작해서는 안 됩니다.
    • 사용자 PC의 파일을 지우거나, 시스템에 마음대로 설치·삭제를 하면 보안상 큰 문제가 생기니까요.
    • 따라서 브라우저는 자바스크립트를 보호된 샌드박스 안에서만 돌리도록 제한해 둡니다.

  • Node.js:

    • 서버나 로컬 시스템에서 직접 돌아가는 프로그램입니다.
    • 사용자가 Node.js를 의도적으로 실행하는 것이므로, 파일 시스템에 접근이 가능합니다.
    • 대신, 일반 사용자가 마음대로 이 프로그램에 접근하는 게 아니라,
      서버 운영자가 직접 Node.js를 설치하고 실행하므로 보안 위험이 다릅니다.

5. 공통점: JavaScript 구문은 같다

  • 브라우저에서 돌리든, Node.js에서 돌리든, 기본적인 자바스크립트 문법(변수 선언, 함수 선언, 조건문, 반복문 등)은 똑같이 동작합니다.
  • 차이는 환경에서 제공되는 API가 다르다는 점입니다.
    • 브라우저는 document.querySelector, alert, fetch 등을 제공합니다.
    • Node.js는 fs(파일 시스템), http 모듈, process 객체 등을 제공합니다.
  • 그래서 같은 “JavaScript” 언어지만, 접근 가능한 기능이 달라집니다.

예를 들어, Node.js는 document라는 객체가 없습니다.
브라우저는 fs(파일 시스템) 모듈이 없죠.
환경(host environment)에 따라 사용할 수 있는 기능이 달라지는 겁니다.

6. 서버 사이드 JavaScript

1) Node.js로 웹 서버 만들기

  • 보통 웹 서버를 만들려면, PHP나 Java, Python 같은 언어를 사용했었는데,
  • 이제 Node.js가 등장하면서, JavaScript 만으로도 백엔드(Server-side) 코드를 짤 수 있게 되었습니다.
  • 이것을 종종 “서버 사이드 JavaScript”라고 부릅니다.

2) 동작 방식

  • Node.js로 서버 프로그램을 띄워 두면,
  • 클라이언트(브라우저)에서 HTTP 요청을 보내 왔을 때,
    Node.js가 알맞은 HTML/JSON 데이터를 응답해 줍니다.
  • 이 응답을 받은 브라우저에서 클라이언트 사이드 JavaScript가 동적으로 화면을 바꾸는 식이죠.

이렇게 클라이언트(브라우저, front-end)와 서버(Node.js, back-end)가 모두 JavaScript로 구현되는 흐름이 점점 일반화되고 있습니다.

7. 요약하면…

  1. 브라우저

    • 웹페이지의 HTML/CSS와 상호작용해 화면을 동적으로 조작 가능
    • 파일 시스템이나 운영 체제 직접 접근은 거의 불가능 (보안 문제)
    • 자바스크립트 코드가 “사용자가 웹페이지 방문 시” 자동으로 실행

  2. Node.js

    • 서버나 로컬 컴퓨터 환경에서 실행
    • 파일 시스템, 네트워크 등 로컬 리소스에 자유롭게 접근 가능
    • HTML/CSS를 직접 다루는 기능은 없음 (브라우저가 아니므로)
    • 자바스크립트 코드를 직접 명령줄에서 실행하거나, 서버 프로세스로 띄운 뒤 사용

둘 다 자바스크립트 문법 자체는 동일합니다.
하지만, 환경(호스트)이 제공하는 기능이 서로 다르기 때문에,
무엇을 할 수 있고 무엇을 할 수 없는가가 달라지는 거예요.

8. 앞으로의 학습 방향

  • 이 강의에서는 주로 브라우저에서 자바스크립트를 어떻게 활용해 동적인 웹페이지를 만드는지에 집중합니다.
  • “왜 페이지를 새로 고침하지 않고도 내용이 바뀌는지”, “버튼을 클릭하면 애니메이션이 생기는지” 등의 “화면 단에서의 변화”를 자바스크립트로 구현하는 방법을 배우게 되실 거예요.
  • 그러다 보면, 어느 순간 “서버에도 자바스크립트를 쓰면 편하겠다”는 생각이 들 수 있습니다.
    • 그때 Node.js로 넘어가면, 자바스크립트를 백엔드에서도 똑같이 활용할 수 있음을 알게 됩니다.
  • 이 강의 후반부나 추가 모듈에서 Node.js를 간단히 다루게 될 텐데,
    거기서 파일 읽기/쓰기, 데이터베이스 연결, 서버 운영 등에 대한 기초를 익히실 수 있을 겁니다.

결론

  1. 자바스크립트는 원래 브라우저용 언어였지만,
  2. Node.js 같은 환경이 생기면서 서버나 로컬 PC에서도 동작할 수 있게 되었습니다.
  3. 브라우저 환경에선 “HTML/CSS 조작”과 “HTTP 요청” 같은 기능을 제공하지만, 파일 시스템 접근은 제한됩니다.
  4. Node.js 환경에선 시스템 리소스나 파일을 다룰 수 있지만, “웹페이지 화면 조작”은 불가능합니다.
  5. 공통적으로 자바스크립트 구문은 동일하기 때문에, 한 번 습득하면 다양한 곳에서 사용이 가능합니다.

이렇게 자바스크립트가 호스트 환경마다 다양한 일을 할 수 있다는 사실을 기억해 두시면,
앞으로 자바스크립트가 얼마나 널리 쓰이는지, 왜 이렇게 인기가 많은지 이해하시기 쉬울 거예요.
이제 본격적으로 브라우저에서의 자바스크립트와 DOM 조작 등을 배워나가면,
실제로 웹페이지를 동적으로 바꾸는 과정을 직접 보시게 될 겁니다.

궁금한 점이 있으면 언제든 질문해 주세요!

profile
GoGoComputer
IT를 좋아합니다.
이전 포스트

자바스크립트는 어떻게 실행될까? 해석형 & JIT 컴파일 개념 설명

다음 포스트

JavaScript의 모든 것: 역사, Java와의 차이, 그리고 실행 환경

0개의 댓글