리액트 프로젝트를 만들고 나서 npm run dev 를 입력하면 갑자기 http://localhost:5173이라는 링크가 나오고 그걸 클릭하면 내가 만든 웹사이트가 화면에 나타난다.
🤔 아니...? 난 그냥 터미널에 명령어 하나 쳤을 뿐인데? 갑자기 어떻게 웹페이지가 생겨버린 거지?
그래서 이 원리를 하나씩 뜯어보고자 정리를 해보았다!

---

📦 package.json이 뭘까?

먼저 npm run dev 를 알기 전에 package.json이라는 걸 이해해야 한다.
React나 Next 같은 프로젝트를 만들면 자동으로 생기는 파일이다. 처음엔 뭔지도 모르고 그냥 지나쳤는데, 알고 보니 이게 아주 중요한 파일이었다!

📦 package.json이란?
"이 프로젝트는 어떤 이름이고, 어떤 명령어로 실행되고, 어떤 라이브러리를 쓰는지" 를 담고 있는지를 알려주는 파일 (누구한테?)
-> Node.js에게 프로젝트를 '어떻게 사용해라~' 라고 설명해주는 설명서이다.

그럼 React나 Next 같은 프로젝트는 Node.js 기반에서 돌아가는 프로젝트라는 것을 추론할 수 있다.

📡 그럼 "Node.js"가 뭔데?

js를 브라우저 밖에서도 실행할 수 있도록 만든 런타임 환경이다.
원래 js는 브라우저 안에서만 실행되는 언어였다.
(ex. 크롬의 V8 엔진, 사파리의 JavaScriptCore 등)

하지만 사람들이 "이 편리한 언어를 서버 사이드에서도 쓰고 싶다!" 해서,
브라우저에서 JS를 실행하던 엔진(V8)을 꺼내서 서버에서도 돌아가도록 만든 게 Node.js 다.

💡 서버 사이드란?
"사용자가 요청을 보냈을 때, 그 요청을 받아서 처리하는 쪽"을 말한다.

✅ 정리

• js는 원래 브라우저 전용 언어이다.
• Node.js는 js를 서버나 백엔드 환경에서도 실행할 수 있도록 만든 런타임
• JS로도 서버, 파일 시스템, CLI 도구 등 만들 수 있게 되었다.

React나 Next로 만든 코드는 package.json에 정의된 명령어(script)를 통해, Node.js 환경에서 실행되거나 구동될 수 있게 된다.

다시 package.json으로 돌아와서

📄 주요 항목들

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "dev": "vite dev --host 0.0.0.0"
  },
  "dependencies": {
    "react": "^18.0.0"
  }
}

"scripts" 안에 있는 명령어는 npm run [명령어]로 실행할 수 있다.
"dev": "vite"라고 되어 있으니까 npm run dev를 하면 실제로는 vite라는 명령어를 실행하는 것이다!

🧰 npm은 뭔데?
Node Package Manager
Node.js 기반 프로젝트에서 필요한 외부 패키지를 설치하고, 명령어를 실행할 수 있게 해주는 툴

• npm install → 필요한 패키지 설치
• npm run dev → package.json의 scripts에 있는 dev 명령어 실행
• npm은 package.json을 읽고 실행하거나 패키지를 관리하는 도구

즉, npm은 Node.js 환경에서의 명령어 전달자이자 패키지 관리자이다!

그럼 vite가 뭐길래 실행하면 웹페이지가 뜨는 걸까??

🛠 npm run dev → Vite 실행 → 웹페이지 등장?

npm run dev

위 명령어를 터미널에 입력하게 되면 실제로 실행되는 건 vite 가 실행되는 것이다.
-> 즉, Node.js 위에서 vite가 돌아가게 되는 것이다.

❓ vite가 실행된다는 건 무슨 의미일까?

✅ vite === 개발용 웹 서버 도구 + 번들러 도구

• React, Vue 와 같은 프레임워크에서 빠르고 가볍게 웹 개발을 할 수 있게 도와주는 개발 서버 도구
• 내부적으로 index.html, src/main.tsx 등을 감지
• 필요한 파일을 브라우저에 실시간 제공
• 코드 변경을 감지해서 브라우저에 핫 리로드 제공
• React 코드를 읽고 브라우저가 해석할 수 있게 번들링 + 전송

Vite는 브라우저가 화면을 보여줄 수 있도록 그 과정을 지원하는 도구

즉, vite를 실행하면,

1. 개발용 웹 서버가 내 컴퓨터에서 켜진다.
2. localhost:5173이라는 주소(=포트 5173)가 열린다.
3. 누군가 접속하면 HTML, JS, CSS 같은 파일을 전달해준다. (여기서 누군가는 브라우저)

즉, 내가 만든 코드들을 브라우저가 받아서 보여줄 수 있도록 "작은 웹서버"를 띄워주는 역할을 한다.

📡 그럼 "개발용 웹 서버"는 뭔데?

내 컴퓨터에서 포트를 열고, 누군가 그 주소로 접속하면 파일을 응답해주는 프로그램을 말한다.
즉, npm run dev를 누르면 vite는 내 컴퓨터 안에 "작은 웹서버 프로그램"을 하나 띄워주는 것!.

🧠 개발 서버가 "켜진다"는 뭔데?

운영체제는 포트(port)라는 번호를 기준으로 네트워크 요청을 분류한다.!
ex)
1. 웹브라우저가 http://localhost:5173으로 요청을 보내면
2. 운영체제는 "아, 5173번 포트를 담당하는 프로그램한테 이 요청을 넘겨야겠구만" 하고 지금 떠 있는 Vite 서버에게 전달해준다.

그래서 "서버를 띄운다"는 말은 내 컴퓨터에 네트워크 요청을 받아줄 프로그램(서버)을 실행하고, 특정 포트를 열어서 외부에서 들어올 수 있게 만든다는 뜻이다. (이 모든 과정이 백그라운드에서 돌아가기 때문에 서버라고 지칭)

즉, vite는 실제로 서버의 기본 역할을 담당하는 것이다.

그럼 다시 돌아와서 vite인 웹서버가 화면을 보여주는가? ❌
-> 단순히 이 친구는 들어오는 친구한테 파일을 전달해줄 뿐이다.
즉, 들어오는 친구는 브라우저이다! 브라우저가 요청을 보내고 받은 파일을 바탕으로 "화면"으로 만든다. 🟢

🔄 실제로 어떤 일이 벌어질까?

1. npm run dev → Vite가 실행된다.
2. 내 컴퓨터에서 localhost:5173이라는 웹서버가 열린다.
3. 브라우저가 이 주소에 접속한다.
4. 서버가 index.html을 응답한다.
   4-1. html 안에 <script src="/src/main.tsx"> 같은 게 있으면 js, css 파일들도 요청하고 응답 받는다.
5. 브라우저가 그걸 조립해서 화면을 그려준다.

즉, 이렇게 되기 때문에 npm run dev를 하게 되면 http://localhost:5173 을 반환하여 여기로 접근하면 내가 파일을 줄게~ 하기 때문에 웹페이지가 등장할 수 있는 것이다.

---

❓근데 "포트로 접속하면 파일을 준다"는 설정은 어디 있는거지?

"누가 / 요청하면 index.html을 주고, /src/main.tsx 요청하면 tsx를 준다는 설정은 어디 있지? 나는 따로 지정을 해준 적이 없는데"

👉 이건 vite 내부에 정적 파일 서버 기능이 이미 내장되어 있어 따로 지정을 안해줘도 된다.
즉, vite가 알아서 그 경로의 파일을 찾아서 응답해준다.

---

💻 진짜 웹서버는 파일만 주는지 확인해보기

터미널에서 아래 명령어를 입력해보기

curl http://localhost:5173

브라우저처럼 화면이 보이진 않지만, HTML 텍스트만 출력되는 걸 확인할 수 있다!
즉, 서버는 "파일"만 준다는 걸 알 수 있다.

curl 명령어

curl은 브라우저 없이 터미널에서 HTTP 요청을 보낼 수 있는 명령어 도구이다.
브라우저는 url을 입력하면 자동으로 요청을 보내주지만, curl은 직접 명령어로 요청을 보내고, 응답을 확인할 수 있다.

---

🍱 비유해보기

🧑‍🍳 서버 = 요리사이자 주방

→ 음식(HTML, JS, CSS 파일)을 만든다.

🧑‍💼 브라우저 = 서빙 담당자

→ 요청된 음식(HTML, JS, CSS 파일)을 받아오고, 예쁘게 플레이팅(dom그리기, painting)해서 식탁에 차린다.

🍽️ 화면(뷰) = 손님 앞에 차려진 식탁

→ 우리가 눈으로 보는 실제 웹페이지

🙋 사용자 = 손님

→ 식탁에 차려진 음식(화면)을 보고, 클릭하거나 입력하면서 상호작용한다.

---

여기서 말하는 서버는 우리가 흔히 아는 백엔드 서버와는 조금 다른 개념이다!
일반적으로 "서버"라고 하면, 로그인 처리나 DB 연동을 담당하는 백엔드 서버를 떠올리는 경우가 많다.
그런데 지금 우리가 실행한 npm run dev의 경우는, 정확히 말하면 웹 서버(정적 파일을 서빙하는 서버)를 의미한다.

• "그럼 백엔드 서버랑 웹 서버는 뭐가 다른데?"
• "서버끼리 통신도 해? 브라우저는 어디까지 요청하고, 누가 응답하는 건데?"

이 내용은 다음 포스팅에서...