프론트에대한 이해 기록

1️⃣ URL 요청과 index.html

• SPA의 핵심 원리: 사용자가 어떤 URL로 접근하든, 서버(Node.js 개발서버든, Nginx 배포서버든) 최종적으로 반환되는 것은 index.html 한 장입니다.
• 이유: Vue Router가 브라우저 안에서 URL을 보고 어떤 컴포넌트를 렌더링할지 결정하기 때문입니다.
• 따라서 /, /events/1, /user/profile 등 모든 URL이 서버에 요청될 때 서버는 항상 index.html을 내려줍니다.

여기서 “불러온다”라는 표현은 조금 더 정확히는
“브라우저가 메모리 안에서 Vue가 가지고 있는 JS/CSS를 이용해 화면을 그린다”가 맞습니다.
실제로 서버가 각 URL별 HTML을 내려주는 게 아니므로, 서버에서 “페이지 전체를 불러온다”는 표현은 SPA에서는 틀린 거예요.

---

2️⃣ 최초 한번 다운로드되는 파일

• index.html 안에는 <script src="app.7f6a4d9.js">, <link href="style.83a2c1.css">가 포함되어 있습니다.
• 브라우저가 index.html을 받으면 → JS/CSS를 한 번만 다운로드
• JS 안에 Vue 앱과 컴포넌트 코드, 라우터 설정, 초기 화면 구성 정보가 들어 있습니다.
• 이후 URL 변경 시 서버에 HTML을 요청하지 않고 브라우저 메모리 안에서 JS가 화면을 갱신합니다.

---

3️⃣ 데이터 요청과 화면 렌더링

• 화면에 표시할 실제 데이터(API 결과)는 백엔드(Spring Boot 등) 에 비동기 요청(HTTP 요청, AJAX/Fetch/axios 등)으로 가져옵니다.
• 예시:

axios.get('/api/events/1')
  .then(res => {
    this.event = res.data; // 화면에 표시
  });

• 이때 JS는 이미 브라우저 안에서 돌아가는 상태이므로,
  서버는 JSON 데이터만 제공하고 화면 구성(HTML/CSS 그리기)은 Vue가 처리합니다.

---

4️⃣ 정리 그림으로 표현하면

[사용자 브라우저]
  |
  | URL 요청 (/events/1)
  V
[서버(Nginx or Node.js)]
  -> 항상 index.html 반환
  -> index.html 안에서 JS, CSS, 이미지 다운로드
  |
  V
[브라우저 안 Vue 앱]
  -> 라우터가 URL을 보고 어떤 컴포넌트를 렌더링할지 결정
  -> 필요한 데이터(API)만 백엔드로 요청
  -> 화면에 표시

---

✅ 핵심 포인트

1. 서버는 항상 동일한 index.html만 내려줌
2. Vue 앱(JS)은 브라우저 안에서 URL별 화면 구성
3. 데이터(API)는 백엔드에서 JSON 형태로 비동기 전달
4. “페이지 전체를 서버에서 불러온다”는 SPA에서는 오해 → 브라우저 안 JS가 렌더링