第四章

你缺什麼知識

根目錄、路徑、前後端、Domain、子路由——這些不是「工程師才需要知道的東西」，而是你跟 AI 溝通時的基本語言。少了這些字彙，每一句話都在燒 Token。

根目錄與路徑：你家的地址

比喻：你家的地址。

「根目錄」就是你家的大門。「路徑」就是從大門走到廚房怎麼走。

你不會跟外送員說「就那個有桌子的地方」，你會說「三樓左轉第二間」。
跟 AI 講話也一樣——你得告訴它「檔案在哪裡」，而不是「就那個檔案」。

什麼是根目錄？

根目錄（Root Directory）就是你的專案的「家」。所有東西都住在這裡面。

在 Mac 上，一個典型的專案路徑長這樣：

/Users/你的名字/Desktop/my-project/

把這串路徑拆開來看：

片段 意思 比喻
/ 整台電腦的最頂層 地球
Users/ 所有使用者的資料夾 台灣
你的名字/ 你自己的帳號空間 你住的城市
Desktop/ 桌面 你家那條街
my-project/ 你的專案資料夾（根目錄） 你家

所以當 AI 問你「根目錄在哪？」，它就是在問：「你家地址是什麼？」

絕對路徑 vs 相對路徑

絕對路徑 = 從地球開始講的完整地址
「台灣 / 台北市 / 信義區 / XX路 / 100號 / 3樓」

相對路徑 = 從你現在站的位置怎麼走
「左轉 → 走到底 → 第二間」

用電腦的語言來說：

絕對路徑（從根開始）
/Users/jason/Desktop/my-project/src/index.html

不管你人在哪裡，這個地址都能找到它。

相對路徑（從你現在的位置）
./src/index.html

「從我現在站的地方，走進 src 資料夾，找到 index.html」

小提示
./ 代表「現在這裡」，../ 代表「往上走一層（回到上一個資料夾）」。
就像你在三樓說「往樓下走一層」就是 ../。

跟 Claude 溝通的範例

模糊的說法
「幫我改那個 HTML 檔案」
精準的說法
「幫我改 /src/pages/index.html
裡面第 30 行的標題文字」
Mac 使用者的路徑神技
在 Finder 中選好你要的資料夾，按下 Command + Option + C，就能直接複製完整路徑。

然後回到 Claude Code 對話框，貼上路徑，直接跟 LLM 說：
「我的專案在 /Users/xxx/Desktop/my-project/，幫我修改裡面的 index.html」

這個快捷鍵可以省掉你手動拼路徑的痛苦，也避免打錯字浪費 Token。

前端與後端：餐廳的用餐區和廚房

前端 = 餐廳的用餐區（客人看到的一切：菜單、裝潢、服務生）

後端 = 餐廳的廚房（客人看不到的，但出餐全靠它：廚師、爐子、備料流程）

資料庫 = 冰箱（食材都存在這裡，需要的時候廚房去拿）
術語 餐廳比喻 實際是什麼 常見技術
前端 Frontend 用餐區、菜單、裝潢 你在瀏覽器看到的一切——按鈕、文字、動畫、表單 HTML、CSS、JavaScript、React、Vue
後端 Backend 廚房、廚師、備料流程 處理邏輯的伺服器——登入驗證、付款、計算 Node.js、Python、Java、Go
資料庫 Database 冰箱 存放資料的地方——使用者帳號、訂單紀錄、文章 PostgreSQL、MySQL、MongoDB
API 傳菜口 前端跟後端溝通的窗口（下一章會詳細講） REST API、GraphQL

當你跟 AI 說「那個東西壞了」，它需要知道是「用餐區壞了」（前端 bug）還是「廚房壞了」（後端 bug）。差別在哪？

前端的問題（用餐區）
按鈕按了沒反應
文字跑版、重疊
手機上看排版亂掉
動畫卡卡的
後端的問題（廚房）
登入之後一直跳回登入頁
資料存了但下次打開不見了
付款成功但訂單沒建立
打開頁面等超過 10 秒
為什麼要分這麼清楚？
因為前端和後端的「修理方法」完全不同。
你跟 AI 說「按鈕按了沒反應」，它得知道——是按鈕本身壞了（前端 JavaScript），還是按鈕送出去的請求沒回來（後端 API）。
講對方向，AI 一次就能幫你修好；講錯方向，來回三輪才找到問題。

Domain Name（網域）：網站的門牌號碼

Domain Name 就是網站的門牌號碼。

google.com 就是 Google 的地址，就像「信義路 100 號」是某棟大樓的地址。
你不用記住大樓的 GPS 座標（IP 位址），只要記門牌（Domain）就好。

Domain 的結構

把 mail.google.com 拆開來看：

部分 叫什麼 比喻 例子
.com 頂級域名 TLD 哪一區（商業區 / 政府區） .com / .org / .tw / .io
google 主域名 哪棟大樓 google / facebook / amazon
mail 子網域 Subdomain 大樓裡的哪個部門 mail / docs / drive / api
mail.google.com
子網域　主域名　頂級域名

更多例子：
docs.google.com　　→ Google 的文件部門
api.example.com　 → example 的 API 入口
blog.mysite.com　　→ 我的網站的部落格
你可以這樣跟 Claude 說
「我的網站是 myapp.com，我想要加一個子網域 blog.myapp.com 放部落格。」
「API 放在 api.myapp.com，前端放在 app.myapp.com。」

子路由、前綴與後綴：網站裡的走廊

路由（Route）= 網站的走廊

路由就是網站裡面的門牌。

Domain 告訴你「哪棟大樓」，路由告訴你「大樓裡面走到哪」。

example.com/products → 走到商品區
example.com/about → 走到「關於我們」
example.com/products/123 → 走到商品區，找編號 123 的商品
https://example.com/products/123

https://　　　　→ 通訊協定（怎麼連線的，先不管）
example.com　　 → Domain（哪棟大樓）
/products/　　　→ 路由第一層（商品區）
123　　　　　　 → 路由第二層（編號 123 的商品）

前綴（Prefix）和後綴（Suffix）

術語 白話 在哪裡看到 例子
前綴 Prefix 加在前面的標記 子網域、API 路徑開頭 api.example.com 的 api
example.com/v2/users 的 v2
後綴 Suffix 加在後面的標記 檔案的副檔名 index.html / style.css / app.js

常見副檔名（後綴）對照表

副檔名 全名 白話 類比
.html HyperText Markup Language 網頁的骨架 像 Word 的 .doc
.css Cascading Style Sheets 網頁的衣服（顏色、排版） 像 PowerPoint 的主題
.js JavaScript 網頁的動作（互動、邏輯） 像 Excel 的巨集
.json JavaScript Object Notation 資料的格式（像表格一樣存資料） 像 CSV 但更有結構
.ts TypeScript JavaScript 的加強版（多了類型檢查） 像 JS 穿了防護衣
.env Environment 放密碼、金鑰的檔案 像保險箱，不能公開
.md Markdown 輕量格式的文件 像精簡版的 Word
.yaml / .yml YAML Ain't Markup Language 設定檔 像填寫表格
注意
.env 檔案裡存的是密碼和 API 金鑰，絕對不能上傳到 GitHub。
這就像你不會把保險箱密碼寫在大門上一樣。

完整拆解一個網址

把你每天都在看的網址完整拆開：

https://api.example.com/v2/products/123?color=red

https://　　　 → 通訊協定（加密連線）
api　　　　　　→ 子網域（前綴）：這是 API 入口
example.com　　→ 主域名：哪棟大樓
/v2　　　　　　→ 路由前綴：API 第二版
/products　　　 → 路由：商品區
/123　　　　　　→ 路由參數：編號 123 的商品
?color=red　　　→ 查詢參數：只要紅色的

術語總對照表

術語 白話 比喻
根目錄 Root Directory 專案的最上層資料夾 你家大門
路徑 Path 檔案在電腦裡的位置 從大門走到廚房的路線
絕對路徑 從最頂層開始的完整位置 完整地址（含國家、城市）
相對路徑 從現在位置出發的位置 「左轉第二間」
前端 Frontend 使用者看到的畫面 餐廳用餐區
後端 Backend 處理邏輯的伺服器 餐廳廚房
資料庫 Database 儲存資料的地方 冰箱
Domain 網域 網站地址 大樓門牌
子網域 Subdomain 主網域底下的分區 大樓裡的部門
路由 Route 網站裡面的頁面路徑 大樓裡的走廊
前綴 Prefix 加在前面的標記 路名前面的「北」「南」
後綴 Suffix 加在後面的標記（副檔名） .doc = Word，.pdf = PDF
本章重點
你不需要會寫這些東西，但你需要認得它們、說得出名字。
當你能說「請幫我改 /src/components/Header.tsx 裡的 navbar 顏色」，
而不是「幫我改上面那一條的顏色」——你跟 AI 的溝通效率立刻翻倍。