[ai/11] 用 Claude Code 做 PR Review:/plan + /copy 的完整流程
PR 太多看不完?用 Claude Code 的 /plan 拆解審查範圍、/copy 產出可貼的 Review 內容。這篇是我實際在用的工作流程。
歡迎來到我的技術部落格!這裡記錄了我在技術學習過程中的點滴與心得。
PR 太多看不完?用 Claude Code 的 /plan 拆解審查範圍、/copy 產出可貼的 Review 內容。這篇是我實際在用的工作流程。
兩年過去了,我的 Mac 開發環境長得跟 2024 完全不一樣。這篇是 2026 版的完整清單,附 Homebrew 一鍵安裝和自訂 Shell 設定。
AI 工具多到眼花,但工程師真正需要的就那幾個。這篇是我 2026 年實際在用的 AI 開發工具,附具體使用場景和花費。
Agent 的 context 爆滿會開始偷懶、無限迴圈會吃光你的 API 額度。這篇分享我在 OpenClaw 多 Agent 系統踩過的坑和解法。
你有沒有想過,為什麼 ChatGPT 只能一問一答,但 Claude Code 可以自己跑去改你的程式碼?差別就在 Agent。這篇用我自己架 ClawdBot 的經驗,帶你看三種最實用的 Agent 設計模式。
AI 從聊天機器人變成可以執行操作的 Agent,安全風險也跟著升級。這篇講工程師日常最該注意的 4 件事,附實際踩坑經驗。
Custom Hooks 怎麼設計才不會變成垃圾桶?React 效能問題 90% 來自不必要的 re-render。專案結構什麼時候該重構?
元件怎麼分層?狀態放哪裡最自然?React 寫久了都會遇到的架構問題,這篇給你一套判斷標準。
寫了一年多技術文章後建立的雙平台知識系統——Obsidian 當私人知識網、Quartz 當公開發布口,以及走過的彎路。
前端工程師也該會的 server 管理指令——磁碟、log、監控、SCP,以及 SSH config 讓你少打很多字。
macOS 開發者的 Zsh 配置實戰——模組化架構、alias 分類策略、和「每天打超過三次就該縮短」的生存法則。
記錄 ~/work/ 目錄的組織方式,說明 prd、proto、tools、legacy 各資料夾的定位,以及從 prototype 到 blog 的知識產出流程
一個 Discord AI Bot 的配置實戰,包含踩過的 429 坑、模型切換邏輯,和讓它乖乖聽話的最小配置。
兩百多篇文章從 Hexo 搬到 Quartz 的完整技術流程:frontmatter 轉換、圖片路徑搬遷、品質分級、Quartz 設定細節,以及搬家途中踩過的坑。
Hexo 用了兩年,兩百多篇文章之間毫無關聯。搬到 Quartz 之後,部落格終於從「文章列表」變成「知識網路」。這篇講為什麼搬和怎麼選。
泛型不是學術概念,是讓你不用複製貼上的武器。Type Guard 則是告訴 TypeScript 「我已經在 runtime 確認過了」。
Conditional Types 是型別系統裡的 if-else,Mapped Types 是 for-loop。聽起來瘋了,但拿來自動產生表單驗證 schema 超實用。
前後端命名不同步?API 欄位 Pick 不完?Template Literal Types 和 Utility Types 的真實使用場景。
Chrome DevTools 的 Elements、Console 進階用法、Network、Performance、Application 各 panel 什麼時候用。React/Vue DevTools 和 Lighthouse。
結構化 Log、Trace ID、DB query debugging、Docker/網路/Process 除錯。以及比工具更重要的心法:先讀 error message、改一個變數測一次、橡皮鴨除錯法。
三個真實的 debug 案例拆解——API 回 200 但前端空白、只在 Production 出現的 Race Condition、Memory Leak 追蹤。附上可直接使用的 Debug 日誌模板。
console.log 大法撐不到生產環境。系統化除錯從重現和定位開始——二分法和 git bisect 是你最強的武器。
功能生命週期系列第二篇。寫 code 是最長也最容易失控的階段,測試和 Code Review 是你的保險。
功能生命週期系列第三篇。按下 Deploy 按鈕之後才是真正的開始——監控、Log、告警、事故處理一個都不能少。
跟著一個功能(Google 登入)從 PM 提需求到上線 Production 的完整流程。串起系統規劃、Proto、Git、測試、CI/CD、監控的所有環節。
從零開始讓團隊接受 Code Review,搭配 CI/CD 定位,以及處理常見阻力的實戰建議。
Code Review 不只是看程式碼——從 PR 怎麼開、Review 看什麼、Comment 怎麼寫到團隊導入建議的完整指南。
Hexo 部署到 GitHub Pages 後,資料夾大小寫怎麼都改不掉?元凶是 .deploy_git 的快取。這篇記錄完整的 debug 過程和最終解法。
覆盤不是寫日記,是逼自己誠實面對「今天到底幹了什麼」。這篇分享我怎麼用 Notion + ActivityWatch 打造低摩擦的覆盤流程。
用 Jest + supertest 幫 Express 路由寫 integration test,跑一次就知道有沒有改壞東西。
ESLint 抓壞習慣、Typings 管型別定義 — 兩件事搞定,你的 Express 專案就從「能跑」升級到「能維護」。
用 pnpm 從零搭一個 Express + TypeScript 專案,踩過的坑和真正需要注意的地方。
資料庫連線建立一次要 50ms,你每次查詢都重新建?Object Pool 讓你預先建好一批,用完歸還、下次再借,省下大量初始化成本。
深入 Elasticsearch 的索引設計、查詢語法、分片策略與維運實務,打造可擴展的搜尋平台。
美國版產品用美國規格、歐洲版產品用歐洲規格——Abstract Factory 確保同一個工廠產出的東西彼此相容,不會混搭出問題。
深入 PostgreSQL 的索引、查詢計畫、分割表、複寫與維運策略,讓資料庫更穩定。
物件建立成本很高?Prototype Pattern 讓你直接複製一個現有的物件再微調,比從頭 new 一個快多了。JavaScript 的 prototype chain 本身就是這個概念。
一萬筆交易都是「存款」類型,你要 new 一萬個 TransactionType 物件嗎?Flyweight Pattern 把可共享的狀態抽出來共用,記憶體直接省一個量級。
GitLab CI/CD 模板化可以把重複的工作抽離成可重用的模板,降低維護成本並提升一致性。
告警透過 Webhook 整合 ChatOps 與事件流程,才能做到真正可行動的通知與回應。
憑證與秘密管理是零信任的基礎,包含金鑰保護、輪替策略與最小權限控制。
備份不是保險而是必需,真正的災難復原需要 RPO/RTO、演練與自動化。
以 IaC 建立可重現、可審核、可回滾的基礎設施流程,從 Terraform 到 GitOps 的完整實務。
CommitLint 只是開始——lint-staged、commitizen、standard-version 這些工具怎麼搭配?團隊要怎麼分階段導入才不會被翻桌?
還在寫「fix bug」「update」這種 commit message?CommitLint + Husky 幫你守住底線,這篇教你從零裝到會。
DEV、SIT、UAT、PROD 四個環境到底在幹嘛?搞懂多環境策略,讓你不再把測試資料推上 production。
付款方式有 3 種、付款流程有 2 種,用繼承要寫 6 個 class。Bridge Pattern 用組合取代繼承,讓抽象和實作各自獨立變化,3 + 2 = 5 個 class 搞定。
想自己寫一個迷你語言解析器?Interpreter Pattern 教你怎麼把語法規則變成可執行的程式碼。從 Markdown 轉 HTML 到自訂 DSL,看看它怎麼運作。
檔案和資料夾、產品和分類、元件和容器——Composite Pattern 讓你用同一套介面處理「單一」和「組合」,不管是葉子還是整棵樹,操作方式一模一樣。
reset --hard 按下去的那一刻你會怕,但學完 reflog 你就不怕了。版本回退、stash、cherry-pick、tag 一次搞定。
資料結構穩定但操作一直變?Visitor Pattern 把操作抽出來,新增報表不用改資料 class,但代價是新增資料類型會很痛。
Ctrl+Z 的背後是什麼?Memento Pattern 讓物件保存狀態快照,需要時一鍵回到過去,而且不破壞封裝。
五個模組互相呼叫、耦合成一坨——Mediator 讓它們只跟中介者溝通,把蜘蛛網變成星狀結構。
一個請求要經過庫存檢查、折扣計算、付款驗證——Chain of Responsibility 讓你像串珠子一樣串起處理器,每個只管自己那一關。
hexo new 打完收工?才怪。Frontmatter 的 description、keywords、category_map 沒設好,你的文章 Google 根本搜不到。
SEO 不是玄學,就是把基本功做好。Google Analytics、簡短網址、404 頁面設計、圖片壓縮——這篇教你用 Hexo 把 SEO 基本盤做滿。
constructor 參數多到要看文件才知道第五個是什麼?Builder Pattern 讓你用 method chaining 一步步組裝,程式碼讀起來像在寫規格書。
訂單從 pending 到 shipped 到 completed,每個狀態能做的事不一樣——你打算全寫在 if-else 裡嗎?State Pattern 讓每個狀態自己管自己。
想要 undo/redo、操作排程、批次執行?Command Pattern 把「做什麼事」包成物件,讓操作可以被記錄、排隊、撤銷。
流程固定、細節不同?Template Method 讓父類別定好骨架,子類別填入差異。處理 CSV 和 JSON 的步驟一樣,只是 parse 的方式不同。
一個訂單要查庫存、扣款、出貨——你要讓呼叫端自己串這三個服務嗎?Facade Pattern 給你一個 placeOrder() 搞定一切。
新系統要接舊 API、第三方套件介面長得不一樣——Adapter Pattern 幫你包一層,讓不相容的東西能合作。
想在不改原始碼的前提下加 cache、加驗證、加權限控制?Proxy Pattern 幫你在呼叫端和目標物件之間插一個守門員。從經典 class 到 ES6 Proxy 再到 Vue 3 reactive,一次看完。
受夠了 switch-case 地獄嗎?Strategy Pattern 讓你把演算法抽成可替換的模組,新增行為不用改舊 code。
「資料變了,誰需要知道?」——Observer Pattern 讓你用訂閱機制取代手動通知,從 EventEmitter 到 RxJS 都在用的核心概念。
想幫物件加功能但不想改原始碼?Decorator Pattern 讓你像疊漢堡一樣一層層加上去,不改 class 也能擴充行為。
你的程式碼裡有超過三個 if-else 在決定要 new 哪個 class 嗎?恭喜,你需要 Factory Pattern。從支付系統到動態擴充,一次搞懂工廠模式。
全域只要一個實例就夠了——但你確定你真的需要 Singleton 嗎?從 config manager 到 DB connection,聊聊這個最常被濫用的設計模式。
實戰踩坑後整理的 Claude Code 配置心法——CLAUDE.md 怎麼寫、Skills 怎麼拆、Memory 怎麼管,讓 AI 不再每次都像失憶。
SAST、DAST、SCA 這些縮寫聽起來很嚇人,但設定起來只要 10 分鐘。這篇講 SDL 的後半段——安全測試工具、部署 checklist、DevSecOps pipeline——以及一個人也能做的最小可行安全流程。
安全不是開發完的審查,是從需求階段就開始的事。這篇講 SDL 的前三個階段——威脅模型、安全設計、安全編碼——以及為什麼「事後審查」模式會讓你的安全團隊變成全公司最討人厭的部門。
你的 AI 不該只在你開瀏覽器時才能工作。這篇教你怎麼從零搭建一個 24/7 運行的 AI Bot——Gateway、System Prompt、Context 管理,踩過的坑全部寫出來。
你會用 ChatGPT 不代表你有 AI 工具鏈。Skills 是 AI 的技能包、MCP 是 AI 的萬能接頭——搞懂這兩個東西,你就能讓 AI 從「聊天機器人」升級成「能幹事的助手」。
SSRF 讓你的 server 變成攻擊者的跳板,CORS 不是你以為的安全機制,而 security headers 是最容易被忽略的免費防禦。
每一種 Web 攻擊的本質都一樣——系統信任了不該信任的東西。這篇用實際的 code 告訴你 XSS、SQLi、CSRF 到底怎麼運作,以及為什麼你的 code 可能正在裸奔。
從 Docker Compose 過渡到 Kubernetes 的概念指南:核心概念、基本清單範本、生態工具與選型建議。
紅隊不是教你當駭客,是教你用攻擊者的腦袋看自己的系統——然後你會發現,那些你覺得「應該沒問題」的地方,全都有問題。
從 TabNine 到 Claude Code,AI coding 工具走過四個世代。這篇聊聊每個階段我的真實體驗,哪些工具真的有用,哪些只是在賣焦慮。
四套即用的 Docker Compose 模板:Web App、監控、日誌、開發環境,附最佳實踐指南。
應用安全的完整視角,從 OWASP Top 10 到 AI 安全風險,貫穿 Infra、Application、AI 三個層面的安全收斂。
你寫的每一行 code 都是攻擊面。資安不是資安團隊的事,是你的事——因為 80% 的漏洞是開發者寫出來的。
從 DNS 策略、L4/L7 負載均衡到 CDN 快取與回源保護,建立穩定且低延遲的網路層架構。
從踩坑經驗出發,分享工程師每天實際在用的 4 個 Prompt 技巧,讓 AI 不再答非所問。
當服務分散在多台節點時,監控必須可集中、可擴展、可追蹤,包含指標、日誌與告警治理。
建立 dev/staging/prod 隔離,確保配置、資料與權限分離,避免測試事故影響正式環境。
ChatGPT、Claude、Gemini、Copilot、Cursor、Midjourney——工具這麼多,到底該用哪個?這篇從工程師角度幫你快速判斷。
Serverless 讓你專注在業務邏輯而非伺服器管理,理解 cold start、事件觸發與成本模型才能安全上線。
上一篇講了怎麼選,這篇教你怎麼做。n8n Docker 部署、AI 節點實戰、LangChain RAG chain、Agent 範例,附完整 code。
想用 AI 自動化工作流程?n8n、LangChain、Agent 三個層級,90% 的場景用前兩個就夠了。這篇幫你快速判斷你該用哪一個。
建立 API Gateway 統一入口,處理路由、認證、限流與版本管理。
RAG 建好了但回答品質不穩?這篇講搜尋策略(Hybrid Search、Re-ranking)、Prompt 設計、評估方法,還有最常踩的 5 個坑。
RAG 的品質 80% 取決於你怎麼切文件。這篇講 Chunking 策略、Embedding 選型、Vector DB 比較,附完整 code。
想讓 AI 回答你公司的問題?不用重新訓練模型,給它一個圖書館就好。這篇講 RAG 的概念、架構,和為什麼它比 fine-tuning 划算。
建立告警分級策略、通知路由與 ChatOps 整合,讓對的人在對的時間收到對的告警。
想讓 AI 變聰明,你有三條路:改 prompt、塞資料、重新訓練。這篇幫你搞清楚什麼時候該用哪一招。
建立 Harbor 私有 Container Registry,統一映像檔管理、版本追蹤與安全掃描。
你每天都在用 ChatGPT,但 Token 到底是什麼?為什麼中文比英文「貴」?這篇用工程師聽得懂的方式,拆解 5 個最常遇到的 LLM 術語。
工程師不需要會訓練模型,但你得聽懂同事在說什麼。這篇用最白話的方式,幫你搞清楚 AI 到底是什麼、跟 ML/DL/LLM 差在哪。
以 Prometheus + Grafana 建立指標收集與儀表板,搭配 OpenTelemetry 擴展可觀測性。
接手一個陌生專案時,不要從頭開始讀 code。先建立全景,再深入細節。搭配 AI 可以把兩週的理解時間壓縮到三天。
建立 PostgreSQL 單節點部署基線,涵蓋連線池、備份還原、升級策略與效能調校。
工程不是追求完美,而是在限制條件下做出最好的取捨。真正的高手不是技術最強的人,而是做判斷最準的人。
想用 Jekyll 架站,第一步不是裝 Jekyll,是搞定 Ruby。特別是 macOS 使用者——拜託不要用系統內建的 Ruby,會踩到一堆權限問題。
Jekyll 預設首頁只有文章列表,想加分頁?得裝 jekyll-paginate 然後自己寫 home layout。這篇帶你做一個有分頁功能的首頁。
從 image 到 runtime,理解容器如何被啟動、隔離與治理,建立可觀測、可維運的執行環境。
技術債不是壞事,它是一種有意識的借貸。問題不在於「有沒有技術債」,而在於「你知不知道自己借了多少、利息多高、什麼時候該還」。
從 L7 入口開始,理解反向代理、TLS 終止、路由、限流與安全頭的實務設計。
從 Right-sizing 到 Spot Instance,從 Budget Alert 到自動清理腳本,手把手設定雲端成本管理的完整工具鏈。
NAT Gateway 比 EC2 還貴?EBS snapshot 默默吃錢?從第一個月帳單嚇到,到建立成本管理流程的真實歷程。
UML 不是為了畫漂亮的圖,而是為了在寫 code 之前把想法具象化。9 種圖各有適用場景,知道什麼時候該畫什麼比會畫更重要。
SA 不只是「畫圖的人」,而是把模糊需求轉化為可實作結構的翻譯者。理解 SA 的思維方式,讓你在寫 code 之前就問對問題。
Cold Start 到底多慢?Lambda 的隱藏成本在哪?混合部署怎麼設計?從踩坑經驗出發的實戰指南。
別再問「Serverless 好不好」,問「我的場景適不適合」。從成本交叉點到 vendor lock-in,幫你做出不後悔的架構選擇。
TDD、BDD、SDD 不只是測試方法,而是三種不同的「用什麼來定義正確」的思維方式。理解它們的哲學差異,比會寫測試更重要。
手把手設定 GitLab CI 推 ECR、GitHub Actions 推 ghcr.io,以及用 Lifecycle Policy 自動清理舊 image 省儲存費。
你的 Docker image 該放哪?從踩過 Docker Hub rate limit 的痛,到最後搞定 Registry 選擇的完整心路歷程。
從傳統 IT 部門的角色分工,到 AI 時代個人能力邊界的重新定義。不是角色消失,而是理解全貌後的能力躍遷。
Level 3 的 Code Agent 能讀寫檔案、跑指令,威力強大但風險也高。Level 4 工作流自動化風險最高。工具選型看五個維度。
怎麼把 AI 融入日常開發流程而不是被它打斷?AI Sandwich 模式:人做決策、AI 執行、人做審查。核心邏輯自己寫,boilerplate 讓 AI 來。
Prompt engineering 不是什麼神秘技能,就是清楚表達你的需求。CLAUDE.md 和 .cursorrules 怎麼寫才有效。
基礎知識是有效使用 AI 的不可替代前提。團隊層面的 AI 策略、Code Review 在 AI 時代更重要、以及四大風險。
Feature Freeze 是從開發模式切換到穩定化模式的分水嶺。QA 驗證是品質關卡,Bug 嚴重等級決定 Go/No-Go。
Staging 是上線前最後一道防線。Go/No-Go 不是一個人的決定,是基於所有階段結果的共同判斷。
Go 了之後怎麼安全部署?部署完之後怎麼監控?Release 不是部署到 Production 就結束了。
Release 頻率怎麼選?Hotfix 不是萬能藥。六種常見的 Release 反模式以及怎麼避開它們。
Release 和 Deployment 是兩件完全不同的事。Release 是產品決策,Deployment 是技術動作。從 Feature Planning 和開發紀律開始建立 Release 流程。
Git Flow 太重、GitHub Flow 太輕?GitLab Flow 是那個「剛剛好」的選擇 -- 多了環境分支的概念,讓部署更可控。
技術品質是使用者看不見但會深刻影響體驗的維度。效能、可靠性、安全性、可擴展性——這些才是「看起來能用」和「真正好用」的差距。
可維護性是好產品的隱藏維度——使用者看不到,PM 不在乎,但它決定了產品能活多久。程式碼品質、文件、技術債、部署能力、Bus Factor。
工程師常忽略的事實:產品存在的目的是創造商業價值。以及好產品不只是好程式碼,更是好團隊用好流程做出來的。
產品在不同階段有不同的品質標準。DORA Metrics、SLO、NPS 怎麼看。技術完美主義、快速交付陷阱、指標遊戲、英雄文化——四種讓你偏離正軌的反模式。
好專案不等於好產品。如期交付但沒人想用的系統,專案成功但產品失敗。從使用者體驗開始定義什麼才叫好產品。
覺得 Git Flow 太複雜?GitHub Flow 只要六步:開分支、寫 code、開 PR、review、merge、deploy。完事。
Monorepo 工具鏈比較(Nx、Turborepo、Lerna、Bazel),以及 GitLab CI 搭配 Monorepo 的受影響偵測設定。
版本庫策略的演進是一個鐘擺,從單體到微服務到 Monorepo 再回到混合策略。沒有銀彈,只有 trade-off。
Monorepo 跟 Multirepo 各自解決什麼問題、創造什麼問題,以及決策框架。
Proto 完整性的 10 大面向:專案結構、多環境設定、容器化、安全基線、錯誤處理、日誌、測試、CI/CD、文件、程式碼品質。
B2E、F2E、App 三個 Track 的 Proto 標準。通用的 10 維度是基線,但不同 Track 有不同的重點。
用四步驟的 Gap Analysis 找出 Proto 規劃與實作之間的落差,確保規劃文件不只是漂亮的擺設。
從黃金版本延伸到多語言 Proto 的策略、版本管理、長期維護,以及常見的 Proto 陷阱。
Proto 不是 Hello World + 框架,是生產環境等級的起始點。搞清楚 Proto vs Boilerplate vs Scaffold 的差異,以及 COPY not Reference 原則。
Runbook 的撰寫規範、結構化範本,以及生產環境最常見的四種問題場景。
Blameless Post-mortem 文化、5 Whys 根因分析、行動項目追蹤,以及災難復原演練的實務做法。
事故生命週期、嚴重等級分類、On-call 輪值制度設計,以及事故指揮官的角色。
JWT、OAuth 2.0、API Key 的適用場景與安全注意事項。Access Token 要短、Refresh Token 要藏、localStorage 不要碰。
Express.js RESTful Router、JWT 認證 Middleware、Rate Limiter 的完整程式碼範例。
RESTful API 設計的命名慣例、HTTP 方法語義、狀態碼使用,以及分頁排序的正確姿勢。
單元測試和整合測試的適用場景、工具選擇,以及一個電商折扣的完整測試範例。
把測試塞進 CI/CD pipeline 的正確姿勢,以及 Flaky Test、過度 Mock 等常見陷阱的解法。
技術選型用決策矩陣不用感覺,架構設計用文件不用通靈。聊聊怎麼在這兩個階段避免踩坑。
容量規劃不是猜謎遊戲,從用戶數推算 QPS、估資料庫容量。上線不是按一個按鈕,是一份嚴謹的清單。
系統規劃不是寫文件,是讓你少加班的保險。從需求收集開始,聊聊那些「邊做邊想」最後爆炸的真實故事。
TUI 元件標準、現代 TUI 框架比較、真實世界工具分析,以及發布前的設計檢查清單。
Terminal User Interface (TUI) 的設計規範,涵蓋設計原則、色彩系統、佈局模式與互動模式。
從 Callback Hell 到 async/await、從原生 CSS 到 Tailwind、從全域變數到 Zustand。每一層抽象都沒有消滅上一層,而是在上面蓋了一個更友善的介面。
從 SOAP 到 tRPC、從 FTP 到 Serverless。API 設計和部署方式的演進,以及如何根據場景做出正確的技術選型。
每一代技術的誕生都是為了解決上一代的痛點。理解 DOM 操作和前端架構的演進,才能做出正確的技術選型。
介紹布隆過濾器的概率型判斷原理、最佳參數計算及快取穿透防護等應用場景
介紹 LRU Cache 的 HashMap + 雙向鏈表實作原理、核心操作及與 LFU 的比較
介紹 Fenwick Tree 的 lowbit 原理、前綴和查詢、單點更新及 2D 擴展
介紹線段樹的建樹、區間查詢、單點更新及 Lazy Propagation 等核心操作
介紹 AVL Tree 的平衡因子、四種旋轉操作、插入刪除步驟及與其他平衡樹的比較
雜湊表的 hash function 原理、碰撞處理策略、負載因子與擴容機制
前綴和與差分陣列筆記,涵蓋一維與二維前綴和、差分陣列與 HashMap 技巧
字串匹配演算法(KMP、Rabin-Karp、Z Algorithm)與回文演算法(Manacher)
拓撲排序原理與在 npm、CI/CD pipeline 等工程場景的應用
Dijkstra、Bellman-Ford、Floyd-Warshall 與 A* 最短路徑演算法
六個經典 DP 問題詳解:費波那契、爬樓梯、LCS、背包、硬幣找零、LIS
OAuth 2.0 是一個開放標準的授權框架,允許第三方應用程式在使用者授權下存取其資源,而不需要暴露使用者的帳號密碼。常見應用包括「使用 Google 登入」、「使用 Facebook 登入」等。
WebSocket 是一種在單一 TCP 連線上進行全雙工通訊的協定,讓伺服器可以主動推送資料給客戶端,適用於即時聊天、股票行情、遊戲等需要即時更新的應用場景。
後端架構設計的最小可行產品原則,涵蓋 Event、Pipeline、Queue、Exception Handler 等核心概念。
實際上後端程式基於 model2 MVC 結構建構專案以後,所有跟前端有關的東西理論上都集中在 view 層相關的資料夾,早期所有人都會後端語言,但是要額外花時間熟悉 html/css/js 需要的成本太高,因為會壓縮到開發後端需求的時間,後來才分出部分的人力專職在設計前端程式。
第一次用 Composer 建 Laravel 專案?這篇幫你五分鐘搞定,順便避開新手最常踩的坑。
TypeScript 的原始型別其實就那幾個,但 any 和 unknown 的差別、null 跟 undefined 的恩怨,搞不清楚遲早踩坑。
JavaScript 寫到出事才知道痛。TypeScript 不是信仰,是保險——用真實 bug 場景告訴你為什麼值得。
現代前端開發使用打包工具(如 Webpack、Vite)來處理模組化、程式碼轉換、資源優化等任務。了解打包工具解決的問題,有助於理解現代前端工程化的核心概念。
Swagger(現稱 OpenAPI)是業界標準的 API 文件規範,提供互動式文件、程式碼生成和測試功能。透過 Swagger UI 和 Swagger Editor,團隊可以更有效地設計、開發和維護 API。
瀏覽器是一個複雜的軟體,包含多個處理程序和執行緒。了解瀏覽器的內部架構,包括渲染引擎、JavaScript 引擎、事件循環等,對於前端效能優化至關重要。
當你在瀏覽器輸入網址按下 Enter,背後經歷了 DNS 解析、TCP 連線、HTTP 請求、伺服器處理、回應渲染等複雜過程。了解這個流程對於前端效能優化和問題排查非常重要。
前後端之間透過各種機制傳遞資料,包括 Cookie、Session、Token、LocalStorage、SessionStorage 等。了解它們的差異和適用場景,對於實作認證授權和狀態管理至關重要。
什麼是 RESTful API?了解 REST 架構風格如何透過 HTTP Method 統一 API 設計規範。
React Hooks 是 React 16.8 引入的特性,讓函式元件可以使用狀態和生命週期等功能。常用的 Hooks 包括 useState、useEffect、useContext、useRef、useMemo、useCallback 等。
MVC(Model-View-Controller)是一種軟體架構模式,將應用程式分為三個核心元件:資料模型、使用者介面和控制邏輯,實現關注點分離,提高程式碼的可維護性和可測試性。
現代網頁由 HTML、CSS、JavaScript 三大核心技術組成,再加上各種資源檔案(圖片、字型、影片)和元資料。了解網頁的組成結構,是前端開發的基礎。
寫好 README 是專業工程師的基本功。這篇整理了 Markdown 最常用的語法,讓你的 README 不再只有一行 Hello World。
前後端對接架構從早期的 Server-Side Rendering 發展到現代的 SPA、SSR、ISR 等模式。了解各種架構的優缺點,有助於根據專案需求選擇最適合的方案。
前端與 API 互動的方式從早期的 XMLHttpRequest 演進到現代的 Fetch API、Axios,搭配 Promise、async/await 等非同步處理機制。了解這些工具的特性和使用時機,是前端開發的基本功。
DOM(Document Object Model)是 HTML 和 XML 文件的程式介面,將文件表示為節點樹結構,讓 JavaScript 可以動態存取和操作網頁內容、結構和樣式。
CRUD 是 Create、Read、Update、Delete 的縮寫,代表對資料的四種基本操作。這是資料庫和 API 設計的核心概念,幾乎所有的應用程式都圍繞著這四種操作建構。
容器化是一種將應用程式及其依賴項打包在一起的技術,使應用程式可以在任何環境中一致地運行。Docker 是最流行的容器化平台,而 Kubernetes 則用於容器編排。
BOM(Browser Object Model)是瀏覽器提供的 JavaScript API,讓我們可以操作瀏覽器視窗、導航、歷史紀錄、螢幕資訊等,是網頁與瀏覽器互動的橋樑。