[JavaScript] #04 Javascript 소개, JavaScript 실행 환경 비교: 브라우저 vs Node.js, 뭐가 다를까?

 

 

안녕하세요 토스트데브입니다!
JavaScript는 원래 웹 브라우저에서만 동작하는 스크립트 언어로 시작했지만, 이제는 Node.js의 등장으로 서버 사이드 개발까지 담당하는 풀스택 언어로 발전했어요.

오늘은 JavaScript의 실행 환경인 브라우저와 Node.js의 차이점에 대해 알아보겠습니다!

 

 

🧭 1. 실행 위치의 차이

항목	브라우저 환경	Node.js 환경
실행 위치	사용자 컴퓨터의 웹 브라우저	서버 또는 로컬 컴퓨터
목적	UI 조작 및 사용자 상호작용	백엔드 로직 및 시스템 제어
접근 권한	DOM, BOM 사용 가능	파일 시스템, 네트워크 등 접근

 

 

🌐 2. 브라우저 환경이란?

📌 특징

• HTML/CSS와 함께 작동하여 UI를 구성하고 제어
• 사용자 입력, 클릭 이벤트 등 프론트엔드 로직 처리
• 브라우저 내에서만 작동하며 보안상 제한이 많음

 

🔧 사용할 수 있는 객체/도구

• document, window (DOM, BOM)
• alert(), console.log()
• fetch(), localStorage, sessionStorage

document.querySelector("button").addEventListener("click", () => {
  alert("버튼이 클릭되었어요!");
});

 

 

⚙️ 3. Node.js 환경이란?

📌 특징

• 브라우저 없이 JavaScript를 독립적으로 실행할 수 있는 환경
• 서버 개발, CLI 도구, 파일 시스템 제어 등에 활용
• 고성능 비동기 I/O 처리에 강함

 

🔧 사용할 수 있는 모듈/도구

• fs (파일 시스템)
• http, net (서버 통신)
• process, os
• npm을 통한 외부 패키지 설치 가능

const fs = require("fs");

fs.writeFileSync("example.txt", "Hello Node.js!");

 

 

🧩 4. 주요 차이점 요약

항목	브라우저	Node.js
DOM 조작	가능	불가능
파일 시스템 접근	불가능	가능 (fs 모듈 사용)
모듈 시스템	ES Module (import) 위주	CommonJS (require) 중심
주요 용도	UI, 사용자 상호작용	서버, API, 파일 처리 등
설치 여부	불필요 (브라우저 내장)	설치 필요 (node, npm)

 

 

📌 5. 함께 쓰는 경우도 많아요!

프론트엔드에서는 브라우저 환경에서 동작하는 JavaScript를, 백엔드에서는 Node.js 환경의 JavaScript를 사용하는 경우가 많습니다.

👉 예시

• 프론트엔드: React, Vue, Vanilla JS
• 백엔드: Express.js, Nest.js

JavaScript 하나로 풀스택 개발이 가능한 이유가 바로 이 구조 덕분이죠!

 

 

✅ 마무리하며

JavaScript는 단일 언어로 프론트와 백을 모두 개발할 수 있는 유일한 언어입니다.
그 중심에는 바로 브라우저 환경과 Node.js 환경의 차이와 협력이 있어요.

이제 여러분도 상황에 맞게 두 환경을 적절히 사용할 수 있을 거예요!

 

#JavaScript, #NodeJS, #브라우저환경, #웹개발, #서버개발, #자바스크립트기초, #프론트엔드, #백엔드, #풀스택개발, #실행환경, #ToastDev