4.Front-end

前端開發（Front-end Development）是指建構使用者在瀏覽器中所見與互動的部分，包含畫面排版、樣式設計、按鈕點擊反應、資料顯示等。前端的主要目的是讓使用者能夠順暢地與後端系統互動。

1. 前端技術核心

HTML（HyperText Markup Language）

負責網頁內容的結構，如標題、段落、表格、表單等。

CSS（Cascading Style Sheets）

負責美化網頁，包含顏色、排版、動態效果、響應式設計等。

JavaScript

負責網頁邏輯與互動，例如表單驗證、按鈕點擊、動畫、API 資料載入等。

---

2. 現代前端框架與函式庫

隨著前端需求日益複雜，出現了許多強大的框架與函式庫，協助開發大型應用、提升維護效率。

名稱	開發者	特性簡述
React	Meta (Facebook)	元件化設計、虛擬 DOM、JSX 語法、單向資料流
Vue	尤雨溪	模板語法簡潔、雙向綁定、單檔元件、易於上手
Angular	Google	全家桶框架（內建路由、HTTP、表單）、學習曲線高
Svelte	獨立開發者群體	編譯時轉換為原生 JS、效能高、語法簡單

這些框架皆可搭配工具如 Vite, Webpack, ESLint, Prettier 等進行建構與開發。

---

3. 前端常見架構模式

• SPA（Single Page Application）：單頁應用，頁面不重新載入。

• MPA（Multi Page Application）：傳統網站，每次跳轉皆為新頁面。

• CSR（Client-side Rendering）：由瀏覽器動態渲染內容。

• SSR（Server-side Rendering）：由伺服器回傳渲染後 HTML，提高 SEO 效果。

---

4. 常見 HTTP 狀態碼（Status Codes）

前端開發中常會與伺服器進行資料交換，伺服器回應的 HTTP 狀態碼可協助開發者理解請求的結果。

狀態碼	類別說明	意義
200	成功	請求成功並回傳資料
201	成功	成功建立新資源（例如 POST 創建）
204	成功	請求成功但無回應內容
400	用戶錯誤	請求格式錯誤、參數錯誤等
401	未授權	使用者尚未通過身份驗證
403	禁止存取	使用者無權存取該資源
404	找不到	資源不存在
500	伺服器錯誤	伺服器內部錯誤
502	錯誤閘道	通常為伺服器之間溝通問題
503	服務不可用	伺服器暫時超載或維護中

---

前端開發是建構現代網站與應用程式不可或缺的技能。選擇合適的框架與工具，能大幅提升開發效率與使用者體驗。