帳號密碼登入流程
從系統設計與面試角度整理帳號密碼登入流程，包含前端表單、後端驗證、密碼比對、Session/Token 建立、錯誤訊息、防帳號枚舉、防暴力破解、MFA 分流、稽核紀錄與常見安全坑。
Archive
所有文章
254 篇文章 / 13 個系列
系列入口
文章列表
防暴力破解與帳號保護
從系統設計與面試角度整理防暴力破解與帳號保護，包含 rate limit、login throttling、account lockout、CAPTCHA、credential stuffing、帳號枚舉、外洩密碼、MFA、風險式驗證、異常登入偵測與告警。
身份驗證、授權與身份識別的差異
從系統設計與面試角度整理 Authentication、Authorization、Identity Proofing 的差異，包含登入、信箱驗證、OAuth、OIDC、MFA、401/403、權限模型與常見混淆。
信箱驗證與手機驗證
從系統設計與面試角度整理信箱驗證與手機驗證，包含 verification token、驗證連結、Email OTP、SMS OTP、重寄、過期時間、重試限制、防暴力猜碼、帳號啟用、忘記密碼差異與安全取捨。
忘記密碼流程設計
從系統設計與面試角度整理忘記密碼流程，包含 reset token、通用回應、防帳號枚舉、token hash、短效單次使用、重設密碼、session 撤銷、通知、稽核紀錄與常見安全坑。
密碼如何安全儲存
從系統設計與面試角度整理密碼安全儲存，包含明文密碼風險、hash 與加密差異、salt、pepper、Argon2id、bcrypt、scrypt、PBKDF2、成本參數、舊 hash 遷移與資料外洩應對。
Access Token 與 Refresh Token
從系統設計與面試角度整理 Access Token 與 Refresh Token，包含短效 access token、長效 refresh token、refresh token rotation、reuse detection、token family、撤銷、登出、多裝置管理與安全取捨。
Cookie 安全設計
從系統設計與面試角度整理 Cookie 安全設計，包含 HttpOnly、Secure、SameSite、Domain、Path、Max-Age、Expires、Cookie Prefix、CSRF、XSS、跨域 Cookie、第三方 Cookie、登出清除與常見錯誤設定。
前端登入狀態設計
從系統設計與前端實戰角度整理前端登入狀態設計，包含 localStorage、memory、HttpOnly Cookie、Pinia/store、/me、401、refresh race、跨 tab 同步、SSR hydration、路由守衛與安全取捨。
JWT 是什麼
從系統設計與面試角度整理 JSON Web Token，包含 JWT 結構、Header、Payload、Signature、Claims、JWS/JWE、HS256/RS256、exp/iat/aud/iss/sub/jti、常見誤用、撤銷問題與 Session 取捨。
登出與 Session 管理
從系統設計與面試角度整理登出與 Session 管理，包含單裝置登出、全裝置登出、踢下線、remember me、session revoke、refresh token family、裝置列表、密碼重設後撤銷與稽核紀錄。
Session 與 Cookie 登入機制
從系統設計與面試角度整理 Session 與 Cookie 登入機制，包含 session id、server-side session store、Set-Cookie、HttpOnly、Secure、SameSite、CSRF、session fixation、登出、撤銷、多裝置管理與安全取捨。
第三方登入後的帳號綁定
從第三方登入理解帳號綁定、email 衝突、社群登入合併、解除綁定、重新驗證與 account takeover 風險。
Authorization Code Flow 與 PKCE
從 OAuth 2.0 Authorization Code Flow 理解 PKCE 的作用、code_verifier、code_challenge、S256、SPA 與後端登入流程的安全設計。
OAuth 2.0 解決什麼問題
從系統設計與面試角度整理 OAuth 2.0 的核心問題，包含 delegated authorization、Resource Owner、Client、Authorization Server、Resource Server、Access Token、Scope、Authorization Code Flow、PKCE、state 與常見誤解。
OpenID Connect 與 OAuth 的差異
從系統設計與面試角度整理 OpenID Connect 與 OAuth 2.0 的差異，包含 id token、access token、userinfo、claims、subject、nonce、issuer、audience、第三方登入與常見安全誤解。
SSO、SAML 與 OIDC
從企業單一登入理解 SSO、SAML、OpenID Connect、IdP、SP、RP、tenant、JIT provisioning、SCIM 與企業帳號生命週期管理。
第三方登入流程
從 Google、LINE、GitHub 登入理解第三方登入的完整流程、前後端分工、OIDC 驗證、本地帳號建立、email 衝突與帳號綁定。
Backup Codes 備用碼
從 MFA 帳號恢復理解 Backup Codes、Recovery Codes、一次性使用、hash 保存、重新產生、使用通知、恢復流程與安全風險。
MFA 與 2FA 總覽
從多因素驗證理解 MFA、2FA、知識因素、持有因素、生物特徵、OTP、TOTP、Passkey、Backup Codes、風險式加驗與釣魚抗性。
Passkey、WebAuthn 與 FIDO2
從無密碼登入理解 Passkey、WebAuthn、FIDO2、Public Key Credential、challenge、origin、RP ID、平台驗證器、漫遊驗證器與釣魚抗性。
Risk-based Authentication
從風險式驗證理解 adaptive authentication、step-up authentication、fresh MFA、session assurance、風險訊號、風險分數與高風險操作重新驗證。
SMS OTP 與 Email OTP
從一次性驗證碼理解 SMS OTP、Email OTP、有效期、重試限制、重送節流、SIM swap、信箱被盜、釣魚風險與安全實作。
TOTP 實作原理
從 Google Authenticator 類型的一次性密碼理解 TOTP、HOTP、shared secret、HMAC、時間步長、驗證窗口、重放防護與 MFA 備援策略。
身份驗證與數位簽章
從登入、Session、Challenge Response、自然人憑證、TW FidO 到交易簽章，理解身份驗證與數位簽章的差異，以及為什麼登入成功不等於簽署文件。
自然人憑證登入
從台灣自然人憑證理解憑證 IC 卡、PIN、讀卡機、HiCOS、PKI、憑證鏈、登入驗證、數位簽章與政府服務身份驗證設計。
健保卡登入
從台灣健保卡網路服務註冊理解健保卡登入、讀卡機、健保卡元件、註冊密碼、身分確認、醫療資料查詢與高信任身份驗證設計。
高風險操作重新驗證
從身份驗證、Session、Step-up Authentication、MFA、短效操作授權到 audit log，理解高風險操作為什麼需要重新驗證，以及如何設計安全又不打擾使用者的流程。
行動自然人憑證
從台灣行動自然人憑證理解行動載具、自然人憑證註冊綁定、APP 驗證、FIDO2 身分識別、數位簽章與政府服務登入體驗。
TW FidO
從台灣行動自然人憑證理解 TW FidO、FIDO2 身分識別、免插卡登入、免帳號密碼、政府服務介接、數位簽章與高信任身份驗證設計。
後台管理員登入安全
從管理員登入、MFA、IP allowlist、裝置信任、權限分層、Break-glass Account、敏感操作重新驗證、Session 管理與 Audit Log，系統化整理後台管理員登入安全設計。
Auth Audit Log 設計
從登入、登出、MFA、重新驗證、權限變更、Session、敏感資料存取、管理員操作到告警與稽核，系統化整理身份驗證系統的 Audit Log 設計。
身份驗證安全檢查清單
從帳號、密碼、Session、Cookie、JWT、MFA、OAuth、忘記密碼、風控、Audit Log、後台管理員到金融醫療級場景，整理身份驗證系統上線前安全檢查清單。
金融級或醫療級登入設計
從高敏感資料、高風險操作、AAL、MFA、重新驗證、交易簽章、資料遮蔽、稽核紀錄、異常偵測到法規語意，系統化整理金融級與醫療級登入設計。
如何設計一個登入系統
從註冊、登入、Session、Cookie、JWT、MFA、第三方登入、風控、登出、稽核紀錄到安全檢查清單，系統化拆解登入系統設計面試題。
會員註冊流程設計
從 Email 註冊、手機驗證、第三方登入、帳號狀態機、驗證 token、防枚舉、帳號合併到風控與稽核，系統化拆解會員註冊流程設計。
Blob vs Base64 — 同一份資料的兩種面貌
理解 Blob 與 Base64 的核心差異、適用場景，以及為何 Blob 無法直接塞進 HTML 或 JSON。
從 0/1 到 0-255 — 理解 Byte 的誕生
為什麼二進位只有 0 和 1，卻會冒出 0-255？深入理解 Bit 與 Byte 的關係。
Blob 與 Base64 的互轉實戰
掌握 FileReader、atob/btoa 的使用方式，以及轉換過程中的效能陷阱與最佳實踐。
二進位外科手術 — 直接操作 ArrayBuffer
學習使用 Uint8Array 直接讀寫二進制資料，實作檔案指紋 (Magic Numbers) 驗證。
JSON + Blob 混合上傳 — FormData 完全攻略
解決後端同時需要 JSON 資料與檔案的難題，掌握 FormData 與 Axios 的正確用法。
檔案上傳系統設計 (1) —— 底層原理與本地儲存
深入探討檔案上傳的底層 HTTP 原理，理解 multipart/form-data，並實作安全的本地儲存機制。
檔案上傳系統設計 (2) —— 資料庫設計與目錄結構
解決檔案變多之後的擴展性問題。學習如何設計檔案資料表 Schema，以及優化作業系統儲存大量檔案的目錄結構。
檔案上傳系統設計 (3) —— 安全性防禦與驗證
這是新手進階最重要的一篇。教你如何避免駭客上傳 Web Shell 炸掉伺服器，並透過 Magic Number 與權限控管建立防線。
檔案上傳系統設計 (4) —— 效能優化與大檔案處理
提升使用者體驗的進階技巧。探討圖片自動化壓縮、大檔案的斷點續傳原理，以及如何利用 Hash 實作「秒傳」機制。
檔案上傳系統設計 (5) —— 邁向雲端架構
系列完結篇。探討如何利用物件儲存 (S3/GCS) 解決單機限制，並深入解析效能最強大的預簽名 URL (Signed URL) 上傳模式。
檔案上傳系統設計 (6) —— 前端上傳的專業修養
前端上傳不僅是選個檔案而已。探討如何實作精準的進度條、取消上傳機制，以及支援拖放與貼上上傳等進階交互體驗。
檔案上傳系統設計 (7) —— 客戶端預處理的威力
上傳檔案不只是傳送。探討如何在瀏覽器端進行圖片壓縮、處理 EXIF 自動旋轉以及預計算哈希值，從而節省頻寬並提升伺服器效能。
檔案上傳系統設計 (8) —— 分片上傳的前端排程
面對 GB 級別的檔案，一次性上傳是不可靠的。學習如何使用 Blob.slice() 進行切片，並實作具備併發控制與斷點續傳功能的進階上傳系統。
檔案上傳系統設計 (9) —— 多媒體處理流水線
上傳完成只是開始。探討如何建立高效的非同步處理流水線，利用任務隊列 (BullMQ) 與 FFmpeg 處理影片轉碼、封面擷取與自動化通知。
檔案上傳系統設計 (10) —— 私有檔案的訪問控制
並非所有檔案都能公開連結。學習如何建立嚴密的私有檔案保護機制，探討預簽名 URL 與 Token-based Proxying，保護用戶的數位資產。
檔案上傳系統設計 (11) —— 檔案生命週期管理
後端運維的重要課題。學習如何處理資料庫與硬碟不一致的「孤兒檔案」，並利用冷熱儲存分級與自動化政策，大幅降低企業的儲存成本。
檔案上傳系統設計 (12) —— 檔案防盜鏈與全球加速
保護你的資產與錢包。學習如何防止他人盜用你的圖片流量 (Hotlinking)，並利用 CDN 技術讓全球使用者都能秒開檔案。
檔案上傳系統設計 (13) —— 文件預覽解決方案 (Series Finale)
系列完結篇。檔案不只是拿來儲存的，更要能優雅地讀取。探討 PDF 與 Office 文件的線上預覽技術，並對整個系列進行系統化回顧。
GA4 完整整合指南：從基礎設定到 Vue Composable 封裝
深入探討 Google Analytics 4 的整合方式，涵蓋 gtag.js 核心 API、事件追蹤、使用者屬性、電商追蹤與 Vue 組合函式封裝。
VitePress 遇上 Nuxt UI v4：SSR 水合與 Tailwind v4 主題優化實戰
記錄在 VitePress 中整合最新 Tailwind v4 與 Nuxt UI v4 時遇到的 SSR 水合錯誤與主題顏色映射問題。
在 VitePress 部落格加入 giscus 留言系統
從 GitHub Discussions、giscus App 權限設定，到在 VitePress 中封裝 Vue 元件並只於文章頁顯示留言區的完整實作筆記。
網路請求的一生：從輸入 URL 到頁面渲染
深入解析一個網路請求的完整生命週期，從 DNS 查詢、TCP 連線、TLS 握手到 HTTP 交換，完整理解瀏覽器與伺服器之間的溝通過程。
HTTP 協定結構解剖
深入解析 HTTP 請求與回應的報文結構，理解起始行、Headers、Body 的組成規範，掌握協定的本質。
URI/URL/URN 完全指南：網位址的結構與奧秘
深入解析 URI、URL 與 URN 的差異，分解網址的各個組成部分，並探討百分比編碼與 Query String 的常見陷阱。
HTTP Methods（上）：GET 與 POST 的本質差異
深入理解 GET 與 POST 的設計哲學、安全性、冪等性，以及它們在 RESTful API 中的正確使用方式。
HTTP Methods（下）：PUT、PATCH、DELETE、OPTIONS、HEAD 完全解析
深入理解 RESTful API 中常用的 HTTP 方法，掌握資源操作的完整語意與最佳實踐。
請求 Headers 全解析：HTTP 請求的元資訊
深入理解 HTTP 請求標頭的分類、用途與最佳實踐，掌握 Content-Type、Accept、Authorization 等常用 Headers。
回應 Headers 全解析：伺服器的回話方式
深入理解 HTTP 回應標頭的分類與用途，掌握 Set-Cookie、Cache-Control、安全 Headers 等關鍵標頭的最佳實踐。
狀態碼寶典（上）：1xx-3xx 資訊、成功與重導向
深入理解 HTTP 1xx、2xx、3xx 狀態碼的含義與使用場景，掌握資訊回應、成功回應與重導向的完整知識。
狀態碼寶典（下）：4xx-5xx 客戶端與伺服器錯誤
深入理解 HTTP 4xx、5xx 狀態碼的含義與使用場景，掌握錯誤處理的最佳實踐。
HTTP 版本演進史：從 0.9 到 3 的進化之路
深入理解 HTTP 各版本的演進歷程、核心特性與設計理念，掌握從 HTTP/0.9 到 HTTP/3 的技術變革。
持久連線與 Keep-Alive：讓 TCP 連線物盡其用
深入理解 HTTP 持久連線的運作機制、Keep-Alive 配置與最佳實踐，掌握連線複用的核心概念。
管線化的失敗教訓：隊頭阻塞與為何被棄用
深入理解 HTTP/1.1 管線化（Pipelining）的設計理念、隊頭阻塞問題，以及為何這個技術最終被棄用。
分塊傳輸編碼：不知道終點的串流傳輸
深入理解 HTTP 分塊傳輸編碼（Chunked Transfer Encoding）的運作機制、使用場景與實作方式。
內容協商機制：讓伺服器說你懂的語言
深入理解 HTTP 內容協商機制，掌握 Accept-*、Quality Values 的運作原理與最佳實踐。
HTTP/2 核心：二進位分幀與多路複用
深入理解 HTTP/2 的核心機制，掌握二進位協定、Frame 結構、Stream 概念與多路複用原理。
HTTP/2 進階：Server Push 與 HPACK
深入理解 HTTP/2 的進階特性，掌握伺服器推送機制與 HPACK 標頭壓縮演算法。
HTTP/3 與 QUIC 協定：基於 UDP 的革命
深入理解 HTTP/3 和 QUIC 協定的核心特性，掌握 0-RTT、連線遷移、獨立串流等革命性改進。
升級策略：遷移到 HTTP/2 與 HTTP/3
從理論到實踐，掌握網站升級到 HTTP/2 和 HTTP/3 的完整策略、配置方法與最佳實踐。
XMLHttpRequest：AJAX 的起源與原理
深入理解 XMLHttpRequest 的歷史背景、API 設計與使用方式，掌握 AJAX 技術的核心原理。
Fetch API 完整指南：現代 HTTP 請求
深入理解 Fetch API 的設計理念、完整用法與最佳實踐，掌握現代 JavaScript HTTP 請求技術。
Fetch 進階：AbortController 與 Streaming
深入掌握 Fetch API 進階技術，包括請求取消、串流處理與進度追蹤。
Axios 深度剖析：攔截器原理與對比 Fetch
深入理解 Axios 的核心特性、攔截器機制與封裝設計，對比 Fetch 分析適用場景。
錯誤處理的藝術：統一處理與優雅降級
深入掌握 HTTP 請求錯誤處理的最佳實踐，建立統一的錯誤處理機制與優雅降級策略。
重試機制與指數退避：打造韌性系統
深入理解請求重試的策略設計，掌握指數退避、熔斷機制與抖動策略。
併發控制與請求排程：高效管理 HTTP 請求
深入掌握 HTTP 請求的併發控制、請求佇列、限流策略與取消機制。
Node.js http 模組原理：從零理解伺服器
深入理解 Node.js 原生 http 模組的運作原理，掌握 createServer、請求處理與回應機制。
Express 核心：中介軟體機制深度解析
深入理解 Express 中介軟體的運作原理，掌握洋蔥模型、next() 機制與實戰應用。
請求解析：Body Parser 的秘密
深入理解 HTTP 請求 Body 的解析原理，掌握 JSON、Form、Multipart 等格式的處理方式。
路由設計與參數處理：RESTful 實踐
深入掌握 Express 路由設計原則，包括 RESTful 風格、動態路由、參數驗證與最佳實踐。
回應設計原則：打造專業的 API
深入掌握 HTTP 回應設計的最佳實踐，包括狀態碼選擇、錯誤格式、分頁與效能優化。
日誌與請求追蹤：打造可觀測的後端
深入掌握後端日誌設計與請求追蹤機制，包括 Morgan、Request ID 與結構化日誌。
同源政策與 CORS（上）：原理篇
深入理解瀏覽器同源政策的運作原理，掌握跨域限制的判斷邏輯與安全考量。
同源政策與 CORS（下）：實戰篇
掌握 CORS 的實戰配置，解決預檢請求、Cookie 跨域與常見問題。
Cookie 機制完全解析：從屬性到安全
深入理解 Cookie 的運作機制，掌握所有屬性、SameSite 設定與第三方 Cookie 議題。
Session 與 Token 的抉擇：Stateful vs Stateless
深入比較 Session 和 Token 兩種認證機制，掌握各自的優缺點與適用場景。
JWT 深入剖析：結構、簽名與實戰
全面解析 JWT 的內部結構、簽名驗證、安全實踐與 Refresh Token 機制。
OAuth 2.0 完整圖解：授權碼、PKCE 與 OIDC
全面解析 OAuth 2.0 授權機制，掌握授權碼流程、PKCE 安全增強與 OpenID Connect 身份驗證。
常見攻擊與防禦：CSRF、XSS 與安全 Headers
深入理解 Web 安全威脅，掌握 CSRF、XSS 攻擊原理與防禦策略，以及安全 Headers 的配置。
HTTP 快取總覽：強快取 vs 協商快取
全面理解 HTTP 快取機制，掌握強快取與協商快取的原理與區別。
Cache-Control 全參數解析
深入解析 Cache-Control 的每個指令，掌握 max-age、no-cache、no-store 等參數的正確用法。
ETag 與條件請求：304 優化實戰
深入理解 ETag 機制與條件請求，掌握 If-None-Match、If-Modified-Since 的使用方式。
快取策略實戰：靜態資源與 API 回應
掌握不同類型資源的快取策略設計，包括靜態資源、API 回應與動態內容的最佳實踐。
CDN 與邊緣快取：加速全球訪問
深入理解 CDN（Content Delivery Network，内容傳遞網路）的運作原理，掌握快取策略、Purge 機制與主流服務比較。
資料壓縮：Gzip vs Brotli
深入理解 HTTP 資料壓縮機制，掌握 Gzip 和 Brotli 的原理、配置與效能比較。
檔案上傳的 HTTP 細節：Multipart 與斷點續傳
深入理解檔案上傳的 HTTP 機制，掌握 Multipart 格式與 Range 斷點續傳實作。
SSE（Server-Sent Events）：伺服器推送技術
深入理解 SSE（Server-Sent Events，伺服器發送事件）的運作原理，掌握 EventSource API 與 WebSocket 的比較。
Streaming 與長連接：Chunked 傳輸實戰
深入理解 HTTP Streaming 機制，掌握 Chunked Transfer Encoding 與 NDJSON（Newline-Delimited JSON）串流傳輸。
RESTful API 設計原則：資源導向的藝術
深入理解 RESTful（Representational State Transfer，表現層狀態轉換）API 的設計原則，掌握資源導向思維與命名規範。
API 版本控制策略：演進與相容
深入理解 API 版本控制的各種策略，掌握 URL、Header 版本控制與廢棄策略。
GraphQL vs REST：取捨與選擇
深入比較 GraphQL 和 REST 兩種 API 設計方式，了解各自的優缺點與適用場景。
API 文件與 OpenAPI：Swagger 實戰
掌握 OpenAPI（原 Swagger）規範，學會撰寫和自動生成 API 文件。
API 測試實戰：Postman、MSW 與 Vitest
掌握 API 測試的最佳工具與實踐，包括 Postman 自動化、MSW（Mock Service Worker，模擬服務工作者）Mock 與 Vitest 測試。
DevTools Network 面板精通
深入掌握 Chrome DevTools Network 面板，精通 Timing、Waterfall 分析與效能除錯。
cURL 與 HTTPie 實戰：命令列請求技巧
掌握 cURL 和 HTTPie 兩大命令列 HTTP 工具，精通命令列請求、除錯與自動化。
抓包工具：Wireshark 與 Charles
掌握 Wireshark 和 Charles 兩大抓包工具，精通 HTTPS 解密與封包分析。
實戰專案：API Client 封裝
從零打造一個功能完整的 API Client，包含攔截器、重試機制、錯誤處理與 TypeScript 類型安全。
實戰專案：完整後端 API 服務
從零打造一個生產級的 Express API 服務，整合 JWT 認證、CORS、錯誤處理與安全最佳實踐。
總結：HTTP 知識地圖與速查表
全系列知識總整理，包含知識圖譜、速查表與進一步學習路徑。
SSL 與 TLS 的恩怨情仇：為什麼我們還在說 SSL？
釐清 SSL (Secure Sockets Layer) 與 TLS (Transport Layer Security) 的關係，理解為什麼標榜安全的網站還在使用「過時」的名詞。
深入淺出 TCP 協定：網路傳輸的可靠基石
詳細解析 TCP 協定的核心特性、三向交握與四次揮手流程，以及它如何確保資料傳輸的可靠性。
深入淺出 TLS 協定：保護網路通訊的安全鎖
詳細解析 TLS (Transport Layer Security) 協定的運作原理、握手流程、數位憑證與加密算法，理解 HTTPS 背後的安全機制。
深入淺出 SSL Strip：強行剝離加密層的中間人攻擊
詳細解析 SSL Strip 攻擊的原理、受騙過程，以及為何 HSTS 成為其終極防禦手段。
用 HTML 寫影片：HyperFrames 實戰筆記
從零用 HyperFrames 做一支「日沐 SunBathe」品牌開場，記錄安裝、合成結構、GSAP 動畫，以及只有實作才會踩到的坑與關鍵取捨。
JS 實戰 (2) —— 從 Object.freeze 到 Immer.js：不可變性防禦
為什麼開發者都在追求 Immutability？深入探討 JS 的不可變性機制，以及如何利用 Proxy 打造無痛的不可變數據流。
JS 實戰 (3) —— 記憶體管理的隱形冠軍：WeakMap 與響讀式緩存
為什麼 Vue 3 的響應式核心必須使用 WeakMap？深入探討 V8 引擎的垃圾回收機制、強引用與弱引用的本質區別。
JS 實戰 (4) —— Web Components：打造原生響應式 UI 元件
不依賴框架，如何用瀏覽器原生技術打造高度封裝、具備響應式屬性的自定義元素 (Custom Elements)？
JS 實戰 (5) —— Signals：現代響應式之巔與細粒度更新
為什麼 Vue、Solid、Preact 全都在擁抱 Signals？深度解析 Signals 的設計原理、它與 Getter 的血緣關係，以及它如何避開 Virtual DOM 的開銷。
JS 指南 (1) —— 存取器 (Get/Set) 與響應式系統深度解析
學習 JavaScript 進階開發的必經之路。從基礎語法、常見陷阱到 Vue 2/3 的響應式底層機制全拆解。
PostgreSQL 入門與環境建置
認識 PostgreSQL、比較主流資料庫、安裝環境、掌握 psql 命令列工具，建立你的第一個資料庫。
資料型別完全指南
深入了解 PostgreSQL 的資料型別系統，包括數值、字串、日期時間、JSON、陣列與自訂型別。
資料表設計與約束
學習 PostgreSQL 的資料表設計原則，包括主鍵、外鍵、各種約束條件與正規化概念。
SELECT 深入解析
掌握 PostgreSQL 查詢的核心，包括 WHERE 條件、GROUP BY 分組、HAVING 過濾與 NULL 處理。
JOIN 完全攻略
掌握各種 JOIN 類型的用法與差異，理解多表連接的執行邏輯。
子查詢與 CTE
掌握子查詢的各種形式，學會使用 CTE 寫出更清晰的複雜查詢，包括遞迴 CTE 處理層級資料。
視窗函數實戰
掌握 PostgreSQL 視窗函數，包括排名、存取前後列、滑動聚合等進階分析技巧。
索引原理與策略
理解 B-Tree 索引的運作原理，學會判斷何時該建索引、如何設計複合索引。
進階索引類型
深入了解 GIN、GiST、BRIN、Hash 等進階索引，掌握全文搜尋、JSONB、地理空間查詢的索引策略。
EXPLAIN 完全解讀
學會使用 EXPLAIN 分析查詢執行計畫，診斷效能瓶頸並優化 SQL 查詢。
查詢調優實戰
掌握 PostgreSQL 效能調校技巧，包括統計資訊、參數調整、連線池與慢查詢分析。
交易與 ACID 原則
理解 PostgreSQL 的交易機制，掌握 ACID 特性與隔離等級的實際應用。
鎖機制與死結處理
深入了解 PostgreSQL 的 MVCC 與鎖機制，學會診斷和處理死結問題。
預存程序與函數
學習 PostgreSQL 的 PL/pgSQL 語法，掌握預存程序、函數的撰寫與例外處理。
觸發器實戰
學習 PostgreSQL 觸發器的建立與應用，實作自動填值、資料驗證與審計日誌。
檢視表與物化檢視
學習 PostgreSQL 的 VIEW 與 MATERIALIZED VIEW，掌握資料抽象與快取優化。
資料表分區
學習 PostgreSQL 的表分區策略，掌握 Range、List、Hash 分區的設計與管理。
備份與還原
掌握 PostgreSQL 的備份策略，包括 pg_dump、WAL 歸檔與時間點還原。
複寫與高可用
學習 PostgreSQL 的串流複寫與邏輯複寫，建立高可用架構。
安全性與權限
掌握 PostgreSQL 的角色管理、權限控制、RLS 與連線加密。
常用擴充套件
探索 PostgreSQL 強大的擴充生態系統，包括 pg_trgm、PostGIS、TimescaleDB 等。
與應用程式整合
學習 PostgreSQL 與 Node.js、Python 的整合，掌握連線池、ORM 與 Migration 工具。
附錄：使用 Supabase 練習 PostgreSQL
免費、零設定的 PostgreSQL 練習環境，透過 Supabase 雲端資料庫學習 SQL 指令。
TypeScript 是什麼？為什麼要用？
認識 TypeScript 的核心價值，了解靜態類型如何提升程式碼品質與開發效率。
TypeScript 環境建置：Node、Vite、Playground
完整設定 TypeScript 開發環境，包含 Node.js、Vite 專案與線上 Playground。
TypeScript 基礎類型完全解析
掌握 TypeScript 所有基礎類型，包含原始類型、陣列、特殊類型與類型推論。
TypeScript 物件、陣列與元組
掌握 TypeScript 中物件類型定義、可選屬性、唯讀屬性與元組的使用。
TypeScript 函式類型與重載
掌握 TypeScript 函式的類型定義，包含參數、回傳值、可選參數、剩餘參數與函式重載。
TypeScript interface vs type 深度比較
全面比較 interface 和 type 的差異，掌握何時該用哪一個。
TypeScript 聯合類型與交叉類型
掌握 Union Type 和 Intersection Type，學會組合與收窄類型。
TypeScript 字面量類型與模板字面量
掌握字面量類型和模板字面量類型，實現更精確的類型定義。
TypeScript 類型守衛與類型收窄
掌握 typeof、instanceof、in、is 等類型守衛，安全地收窄聯合類型。
TypeScript 類型斷言與 as const
掌握類型斷言的正確使用方式，了解 as const 常量斷言的威力。
TypeScript unknown vs any vs never
深入理解 TypeScript 三大特殊類型，掌握何時該用哪一個。
TypeScript 泛型基礎：函式、介面、類別
掌握泛型的核心概念，讓程式碼更靈活、更可重用。
TypeScript 泛型約束與預設值
掌握泛型約束（extends）、keyof 運算子和泛型預設值。
TypeScript 條件類型：infer 關鍵字
掌握條件類型和 infer 關鍵字，實現進階類型推導。
TypeScript 映射類型與索引類型
掌握映射類型和索引存取，實現類型轉換與複用。
Vue3 + Vite + TypeScript 專案建置
從零開始建立 Vue3 + Vite + TypeScript 專案，完整配置解析。
Vue3 Composition API 完整類型標註
掌握 Composition API 搭配 TypeScript 的完整類型標註方式。
Vue3 Props、Emit、Expose 類型
掌握 Vue3 元件介面的 TypeScript 類型定義方式。
Vue3 Ref、Reactive、Computed 類型
深入掌握 Vue3 響應式 API 的 TypeScript 類型標註。
Pinia 狀態管理 + TypeScript
掌握 Pinia 搭配 TypeScript 的完整類型定義方式。
Vue Router + TypeScript 路由類型
掌握 Vue Router 搭配 TypeScript 的完整類型定義方式。
Node.js + TypeScript 環境設定
完整配置 Node.js + TypeScript 開發環境，包含編譯、執行與除錯。
Express + TypeScript：Request/Response 類型
掌握 Express 搭配 TypeScript 的完整類型定義，建立類型安全的 API。
API 類型安全：Zod 驗證
使用 Zod 為 API 請求建立執行時期驗證，實現完整的類型安全。
前後端類型共享策略
掌握前後端共享 TypeScript 類型的各種策略，從簡單到進階。
內建工具類型實作原理
深入理解 TypeScript 內建工具類型的實作原理，掌握類型運算的核心技巧。
自訂工具類型實戰
學習建立實用的自訂工具類型，解決真實開發中的類型問題。
總結：TypeScript 知識地圖
TypeScript 完整知識地圖、速查表與學習路徑指南。
00. 路由的演進：從後端路由到前端 Hash 與 History
在使用框架之前，我們先用原生 JavaScript 寫一個 Router。深入理解 SPA 的基石：HashChange 與 History API。
01. Vue Router 4 快速上手：安裝與基礎配置
從零開始搭建 Vue Router 4。學會 createRouter、router-link 與 router-view 的標準用法。
02. 動態路由與 404 處理
處理帶參數的 URL (如 /user/:id)，響應參數變化，以及如何實作 404 Not Found 頁面。
03. 巢狀路由 (Nested Routes)
學會使用 children 配置與巢狀的 router-view，打造複雜的 Dashboard 佈局。
04. 程式化導航 (Programmatic Navigation)
除了 router-link，你更常用到的可能是 JS 跳轉。掌握 push、replace 與 go 的細微差異。
05. 命名路由與多重視圖 (Named Views)
讓程式碼更優雅：使用 Name 來導航，以及在同一層級展示多個組件。
06. 導航守衛 (Navigation Guards)：路由的守門員
全域守衛、路由獨享守衛、組件內守衛。這三道防線如何保護你的應用程式，並確保正確的執行順序。
07. 深入 RouterView 與頁面轉場 (Transitions)
掌握 RouterView 的 v-slot API，實現夢幻般的頁面切換特效。
08. 狀態緩存的藝術：KeepAlive
學會如何緩存組件狀態，以及處理 KeepAlive、Transition 與 RouterView 三者結合時的棘手問題。
09. 效能優化：路由懶加載 (Lazy Loading)
減小首屏 Bundle Size 的關鍵技巧。學會動態 Import 與分包 (Chunking) 策略。
10. Composition API 與 Router 內部原理探索
我們終於抵達終點。總結 Composition API 的最佳實踐，並稍微博覽 Vue Router 的內部機制。
Vue computed 的實現原理
從面試角度理解 Vue computed 的實現原理，包含 lazy 求值、依賴收集、快取、dirty 標記、ComputedRefImpl、可寫 computed、computed 與 methods/watch 的差異。
Vue 組件的 data 為什麼必須是函數
從面試角度理解 Vue 組件 data 為什麼必須是函數，包含元件實例狀態隔離、引用型別共享、Options API、Composition API、SSR 與常見誤區。
Vue 中 key 的作用
從面試角度理解 Vue 中 key 的作用，包含 VNode 身份、列表 Diff、DOM/元件復用、狀態錯位、index key 陷阱、強制重建元件與 Transition 場景。
接口請求一般放在哪個生命週期？為什麼？
從面試角度理解 Vue 中接口請求應該放在哪個生命週期，包含 onMounted、setup、watch route params、onServerPrefetch、SSR 差異、取消請求與 Loading/Error 狀態管理。
Vue 修飾符有哪些
系統整理 Vue 常見修飾符，包含事件修飾符、鍵盤修飾符、滑鼠修飾符、v-model 修飾符、v-bind 修飾符、自訂 v-model modifiers 與底層編譯原理。
nextTick 的作用與實現原理
從面試角度理解 Vue nextTick 的作用與實現原理，包含 DOM 批次更新、更新佇列、微任務、Promise、使用時機與常見誤區。
Vue 中 ref 的作用
從面試角度理解 Vue 中 ref 的作用，包含響應式 ref、.value、模板 ref、DOM 與子元件引用、ref 解包、ref 與 reactive 的差異、shallowRef 與常見誤區。
v-if 與 v-show 的區別
從面試角度理解 Vue v-if 與 v-show 的差異，包含條件渲染、顯示切換、初始渲染成本、切換成本、生命週期、DOM 狀態與適用場景。
v-model 雙向綁定的原理
從面試角度拆解 Vue v-model 的原理，包含原生表單元素、元件 modelValue 語法糖、多個 v-model、修飾符、defineModel 與實務設計取捨。
Vue 核心觀念：MVVM、宣告式渲染與單向資料流
從面試角度理解 Vue 的核心心智模型，包含 MVVM、宣告式渲染、響應式更新、單向資料流與雙向綁定的關係。
watch 與 computed 的區別
從面試角度理解 Vue watch 與 computed 的差異，包含衍生狀態、副作用、快取、惰性求值、watchEffect、flush 時機、deep/immediate 與實務選型。
Vue SSR 的實現原理
從面試角度理解 Vue SSR 的實現原理，包含 server render、renderToString、createSSRApp、hydration、同構程式、資料預取、狀態注水、hydration mismatch 與部署取捨。
Vue 測試策略與可維護性
從面試角度整理 Vue 專案測試策略與可維護性，包含測試金字塔、單元測試、組件測試、E2E、Mock 邊界、Composable、Pinia、Router、API、CI、重構安全網與資深取捨。
Vue 元件通訊方式有哪些及原理
系統整理 Vue 元件通訊方式，包含 Props、Emit、v-model、Provide/Inject、Refs、Event Bus、Pinia、路由與 Slots，並從資料流與耦合度角度分析適用場景。
Composition API 實戰與 Composable 設計
從面試角度理解 Vue Composition API，包含 setup 執行時機、script setup、ref 與 reactive 選擇、生命週期、Composable 抽取、邏輯復用、狀態歸屬、命名規範與過度封裝風險。
Vue 表單、非同步狀態與資料流設計
從面試角度整理 Vue 表單與非同步狀態設計，包含受控表單、v-model、表單驗證、loading/error/cancel/retry、提交流程、錯誤回填、樂觀更新、Composable 抽取與資料流取捨。
Vue 復用手段選型：Composable、Directive、Plugin、Mixin
從面試角度整理 Vue 中邏輯復用與擴展手段的差異，包含 Composable、自訂指令、Plugin、Mixin、Provide/Inject、Global Properties 的適用場景、實作題與架構取捨。
Vue 路由實現：Hash 路由與 History 路由原理
從面試角度理解 Vue 前端路由的實現原理，包含 SPA、Hash 路由、History API、router-link、router-view、路由匹配與伺服器 fallback 配置。
Vue 插槽設計：Slot、Scoped Slot 與 Headless Component
從面試角度理解 Vue 插槽設計，包含預設插槽、具名插槽、作用域插槽、插槽本質、受控元件、Renderless Component、Headless Component、元件 API 設計與常見取捨。
Vue 狀態管理：Pinia、Vuex 與狀態歸屬
從面試角度理解 Vue 狀態管理，包含 local state、props/emit、Composable、URL state、Pinia、Vuex、store 拆分、actions/getters、持久化、快取、SSR 狀態隔離與常見架構取捨。
Vue 與 TypeScript 實戰
從面試角度整理 Vue 3 與 TypeScript 實戰重點，包含 defineProps、withDefaults、defineEmits、defineModel、Template Ref、Component Ref、Composable 泛型、API response、Pinia store 型別與常見陷阱。
Vue 打包與資源優化
從面試角度整理 Vue 專案打包與資源優化方法，包含分包、路由懶載入、Tree Shaking、第三方依賴治理、CDN、gzip、brotli、快取策略、source map、Vite 與 webpack 差異。
Vue Compiler 的實現原理
從面試角度理解 Vue Compiler 的實現原理，包含 template 編譯流程、parse、AST、transform、codegen、render function、Patch Flags、Block Tree 與靜態提升。
瀏覽器渲染管線與 DOM 操作成本
從面試角度理解為什麼 DOM 操作很貴，包含瀏覽器渲染管線、Style、Layout、Paint、Composite、強制同步佈局與 Vue Diff 的關係。
Vue 錯誤處理與監控設計
從面試角度整理 Vue 專案中的錯誤處理與監控設計，包含錯誤分類、Vue errorHandler、errorCaptured、API 錯誤、路由錯誤、Promise 錯誤、監控上報、Source Map、使用者回饋與資深取捨。
深入 Vue KeepAlive：實現高效能組件緩存與狀態保留
詳盡解析 Vue 3 KeepAlive 的核心機制，探討如何透過緩存組件實例來優化效能，並解決頁面切換時的狀態遺失問題。
Vue 性能優化總覽
從面試角度建立 Vue 性能優化的完整回答框架，包含量測、首屏、渲染、響應式、打包、請求、快取、使用者體驗與 SSR/SSG 取捨。
Vue 響應式性能優化
從面試角度整理 Vue 響應式性能優化方法，包含 Vue 2 與 Vue 3 響應式成本、深層 reactive、shallowRef、shallowReactive、markRaw、deep watch、computed/watch、狀態拆分與大型資料處理。
Vue 渲染性能優化
從面試角度整理 Vue 渲染性能優化方法，包含更新範圍、v-if 與 v-show、v-for 與 key、大型列表、v-memo、v-once、事件代理、DOM 讀寫分離與排查流程。
Vue 2.x 與 Vue 3.x 渲染器 Diff 算法
從面試角度拆解 Vue 2.x 與 Vue 3.x 渲染器的 Diff 算法，包含 VNode、patch、雙端比較、Keyed Children、最長遞增子序列與 Patch Flags。
Vue 請求、快取與體驗優化
從面試角度整理 Vue 專案中的請求、快取與使用者體驗優化，包含 API 並行、取消請求、請求去重、前端快取、預取、骨架屏、樂觀更新、PWA 與 Service Worker。
Vue 權限與路由守衛設計
從面試角度整理 Vue 後台權限與路由守衛設計，包含登入攔截、route meta、beforeEach、動態路由、RBAC、選單權限、按鈕權限、資料權限、後端安全邊界與常見架構取捨。
Vue SPA 如何優化首屏載入速度
從面試角度系統整理 Vue SPA 首屏載入優化策略，包含性能指標、打包體積、路由懶載入、資源壓縮、資料請求、渲染成本、骨架屏、快取、SSR 與 SSG。
深入 Vue Teleport：利用 disabled 屬性優化全螢幕轉場體驗
探討 Vue Teleport 的 disabled 屬性，如何透過單一元件實現全螢幕錄製與嵌入式預覽的流暢切換。
文字轉語音 (Speech Synthesis)
深入探討如何將瀏覽器原生 Web Speech API 封裝成 Vue 3 組合函式，實現完整的文字轉語音功能。
語音辨識 (Speech Recognition)
深入探討如何將瀏覽器原生 Web Speech API 的語音辨識功能封裝成 Vue 3 組合函式，實現語音轉文字與語音指令控制。
剪貼簿操作 (Clipboard API)
深入解析如何使用 Clipboard API 實現網頁複製貼上功能，並封裝成支援降級方案（Fallback）的 Vue 3 Composable。
頁面可見度 (Page Visibility)
學習如何使用 Page Visibility API 偵測網頁是否在背景執行，並封裝成 Vue 3 Composable 實現自動暫停影片、停止輪詢等效能優化。
通知推送 (Notifications API)
掌握 Web Notifications API，讓你的 Vue 應用程式能發送系統層級的通知，並封裝成支援權限管理的 Composable。
螢幕錄製 (Screen Capture)
免安裝軟體！學習如何使用 Screen Capture API 與 MediaRecorder API，打造純網頁版的螢幕錄影工具。
元素交叉觀察 (Intersection Observer)
告別效能殺手 scroll 監聽事件！學會使用 Intersection Observer API 並封裝成 Vue 3 Composable，輕鬆實現圖片懶加載與無限滾動。
偵測元素尺寸變化：用 Resize Observer API 打造響應式元件
深入探討如何將瀏覽器原生 Resize Observer API 封裝成 Vue 3 組合函式，實現高效能的元素尺寸監測。
影音體驗升級：掌握 Picture-in-Picture 與 Fullscreen API
學習如何將畫中畫 (PiP) 與全螢幕 API 封裝成 Vue 3 組合函式，打造沉浸式的影音播放體驗。
精準控制動畫流：深入 Web Animations API (WAAPI)
探索如何利用 Web Animations API 實現比 CSS 更強大的動畫控制，並封裝成靈活的 Vue 3 Composable。
掌握使用者位置：Geolocation API 深度解析
學習如何使用 Geolocation API 獲取經緯度，並打造一個支援即時追蹤的 Vue 3 Composable。
在網頁上與硬體對話：Web Bluetooth API 實戰指南
探索如何使用 Web Bluetooth API 讓瀏覽器直接連接藍牙裝置，並封裝成易用的 Vue 3 Composable。
偵測網路狀態：Network Information API 與 onLine
學習如何使用 Network Information API 與 navigator.onLine 偵測使用者的網路連線狀態與連線類型。
呼叫原生分享選單：Web Share API 實戰
擺脫醜陋的客製化分享按鈕！學習如何使用 Web Share API 呼叫系統原生的分享介面，並封裝成 Vue 3 Composable。
在瀏覽器直接讀寫本機檔案：File System Access API
學習如何使用 File System Access API 讓網頁像桌面軟體一樣，直接開啟與儲存使用者本機的檔案。
跨分頁即時通訊：Broadcast Channel API 實戰
學會如何在同一瀏覽器的不同分頁間進行即時通訊，解決登出同步、狀態共享等常見難題。
WebRTC 的故事：從 Flash 到瀏覽器即時通訊的革命
探索 WebRTC 的誕生歷史，從 GIPS 的收購到 W3C 與 IETF 的標準化之路，以及它如何改變現代網路通訊。
WebRTC 實戰 (1) —— 瀏覽器影音採集
WebRTC 旅程的第一步。不僅是獲取攝影機權限，更要深入探討設備枚舉、螢幕共享以及如何處理複雜的媒體約束條件。
WebRTC 實戰 (2) —— 信令伺服器與連線中心
WebRTC 規範中唯一沒有定義的部分。學習如何使用 Node.js 與 WebSocket 搭建信令伺服器，讓兩台電腦在茫茫網海中找到彼此。
WebRTC 實戰 (3) —— SDP 交換與媒體協商
進入 WebRTC 的協商核心。學習如何透過 RTCPeerConnection 建立連線，理解 Offer/Answer 協商流程與 SDP（會話描述協定）的角色。
WebRTC 實戰 (4) —— ICE Candidate 與 NAT 穿越
解決 WebRTC 連線建立後卻「沒聲音沒畫面」的頭號兇手。深入探討 NAT 穿越技術、STUN/TURN 伺服器的角色，以及 ICE Candidate 的交換機制。
WebRTC 實戰 (5) —— Data Channel：不只是傳影音
除了影音，WebRTC 還能傳送任意資料。深入學習 RTCDataChannel，掌握極低延遲的 P2P 數據傳輸技術，適用於即時聊天、遊戲指令與檔案分享。
WebRTC 實戰 (6) —— 使用 PeerJS 簡化開發流程
覺得手寫 SDP 和信令太麻煩？學習如何使用 PeerJS 框架，將複雜的 WebRTC 邏輯封裝成幾行簡單的程式碼，快速實現穩定的一對一通訊。
WebRTC 實戰 (7) —— 信令機制的正式封裝與房間系統
從簡單轉發走向穩健的服務架構。學習如何設計具備房間概念的信令協定，管理使用者狀態、訊息路由與斷線清理。
WebRTC 實戰 (8) —— WebRTC-Internals：專業級除錯與監控
揭開 WebRTC 通訊的黑盒。學習如何利用 Chrome 內建的 WebRTC-Internals 工具，分析即時通訊中的封包掉落、延遲、碼率與連線品質。
WebRTC 實戰 (9) —— 多人通訊架構：Mesh, MCU 與 SFU
當參會人數從 2 人變成 20 人，原有的 P2P 架構將會崩潰。深入探討 WebRTC 的三種多人通訊拓撲結構，理解它們的優缺點與適用場景。
WebRTC 實戰 (10) —— 邁向 SFU：Mediasoup 與 Janus 的探索
系列完結篇。比較 mediasoup 與 Janus 的設計取向，理解導入 SFU 時還需要處理的信令、容量、媒體層與維運工作。
WebTransport 揭秘：超越 WebSocket 的新一代傳輸技術
深入探討 WebTransport 的背景、HTTP/3 的優勢，以及它如何解決傳統 WebSocket 的瓶頸。
Datagrams vs Streams：不可靠傳輸的威力
深入探討 WebTransport 的兩種核心傳輸方式：為什麼有時候「丟包」反而是一件好事？
單向與雙向流：靈活的數據調度
深入了解 WebTransport 如何透過多流並行架構，實現控制指令與背景數據的完美隔離。
安全與證書：證書指紋與本機開發技巧
WebTransport 對安全性的要求極其嚴苛。學習如何利用證書指紋 (Certificate Fingerprint) 繞過本機開發的障礙。
性能對比實驗：實測 HOL Blocking 的消除
當網路環境惡化時，WebTransport 憑什麼比 WebSocket 快？透過一場模擬丟包實驗揭曉答案。
終極實戰：高頻實時遊戲狀態同步
融合 6 章所學，利用 WebTransport 的原生特性，打造一個極致低延遲的多人遊戲狀態同步系統。