반응형
안녕하세요 토스트데브입니다!
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
반응형