# Day 4 - 改一個 Logo 而已：靜態資源與動態資料

## 劇情背景

一早，海克絲著急地走了過來。

「糟糕！我跟合夥人昨天看網站的時候發現，Logo 忘了改掉！」

「忘了改？怎麼說？」

「你看，現在網站上的 Logo 是『LiveFit+』，但我們目前應該要用『LiveFit』才對。」海克絲解釋道，「那個『+』是要留給之後用的。我們才剛起步，現在應該先叫 LiveFit 就好。等之後平台做起來了、會員變多了、功能更完整了，再升級成 LiveFit+。」

「原來如此！所以要把『+』先拿掉？」

「沒錯！設計師已經做好正確的 Logo 了。」海克絲看著你，「話說，如果我現在要你改這個 Logo，你知道要去哪裡找檔案嗎？」

你看著專案資料夾裡密密麻麻的檔案，突然有點心虛。

「這就是我今天要教你的——搞懂什麼是『靜態資源』、什麼是『動態資料』，你才不會改錯地方。」

---

## 學習目標

- 了解靜態資源（Static Assets）與動態資料（Dynamic Data）的差異
- 知道靜態資源存放的位置（public/ 資料夾）
- 理解動態資料的處理方式（資料庫 + API）
- 學會修改前端的靜態資源
- 成功替換 LiveFit 的 Logo

---

## 核心概念

### 一、靜態資源 vs 動態資料

海克絲用健身房來比喻：

| 類型 | 說明 | 特性 | 範例 |
|------|------|------|------|
| **靜態資源** | 很少變動的檔案 | 直接放在專案資料夾 | Logo、背景圖、favicon、字型 |
| **動態資料** | 經常變動的資料 | 存在資料庫，透過 API 取得 | 教練列表、課程、會員資料 |

（p.s. 明天的每日任務就會講解到 API 囉）

**為什麼要區分？**

海克絲說了一個前任工程師的故事：

> 「之前有個工程師，他把所有教練的資料都寫死在前端程式碼裡。結果每次有教練離職或新進，他就要改程式碼、重新部署⋯⋯搞到後來他崩潰了。」

**教訓：會經常變動的資料，不應該寫死在程式碼裡！**

### 二、判斷方法

改東西之前，先問自己一個問題：

> **「這個東西會經常變動嗎？」**

| 會經常變動 | 不會經常變動 |
|------------|--------------|
| → 存資料庫 | → 放檔案 |
| 教練、課程、會員 | Logo、背景圖、favicon |

### 三、靜態資源放哪裡？

在 Vue.js 專案中，靜態資源通常放在：

frontend/
├── public/           # 靜態資源（不會被編譯）
│   ├── logo-text.png    # Logo 圖片
│   ├── favicon.ico      # 網站小圖示
│   └── ...
├── src/
│   ├── assets/       # 靜態資源（會被編譯處理）
│   └── ...
└── ...

**public/ vs src/assets/ 的差異：**
- `public/`：檔案不會被 Vite 處理，直接複製到輸出目錄
- `src/assets/`：檔案會被 Vite 處理（壓縮、加 hash 等）

### 四、動態資料怎麼處理？

動態資料的處理流程：

使用者操作 → [前端] → [API] → [後端] → [資料庫]
                ↑                         ↓
                └─────── 回傳資料 ─────────┘

例如教練新增課程：
1. 教練在後台填寫課程資料
2. 前端發送 API 請求到後端
3. 後端驗證資料後存入資料庫
4. 前台網站顯示最新課程（不需要改程式碼！）

## 測驗題目預覽

### 靜態 vs 動態觀念篇 (5 題)

1. 如果把所有教練資料「寫死」在前端程式碼裡，會發生什麼問題？
2. 為什麼教練資料不適合當作「靜態資源」？
3. 以下哪個屬於「靜態資源」？
4. 以下哪個屬於「動態資料」？
5. 靜態資源通常放在專案的哪個資料夾？

### LiveFit 實作篇 (4 題)

6. 在 LiveFit 專案中，Logo 圖片放在哪裡？
7. 如果要修改網站使用的 Logo，除了換圖片檔案，還需要改什麼？
8. 用 LiveFit 來比喻，「Logo」和「教練列表」分別對應什麼？
9. 動態資料的正確處理方式是？

## 遊戲連結

請進入遊戲完成本日關卡：

👉 **[點此進入遊戲](https://hexschool.github.io/backend-camp-game/)**

## 回報格式(確認打卡細節)

1. 完成遊戲中的測驗並截圖完成畫面
2. 到體驗營 Discord 的[每日活動頻道](https://discord.com/channels/801807326054055996/1446368763581562880)，找到當天任務的討論串
3. 在討論串留言貼上截圖，打卡儀表板會自動記錄你的成績
4. 分享一下此關卡有哪些知識點讓你印象深刻，甚至有透過 AI 服務延伸學習

---

---

## 海克絲的叮嚀

> 「很多新手工程師一拿到需求就急著寫 Code，結果改了半天發現改錯地方。其實很簡單，改東西之前先問自己：『這個東西會經常變動嗎？』會的話去資料庫改，不會的話去檔案改。搞清楚這點，找東西就快多了！」

## 每日任務額外名詞解說

1. **Vue** 是前端網頁的程式碼框架。
2. **Vite** 是負責編譯與打包程式碼的工具。
3. **編譯** 是指將工程師撰寫的程式碼 (例如 HTML) 轉換成機器可執行的二進位碼。
4. **渲染** 是指將網頁程式碼 (例如 HTML) 轉換成瀏覽器上使用者看見的畫面。
5. **快取** 是指將資料暫存在瀏覽器中，讓下次讀取時不必重新下載的機制。因此當資料庫或程式碼已經更新，快取中的資料可能還是舊的。