·5 min read·
前端面試系列ReactHooks
前端工程師面試題：React Key 為什麼重要？useEffect dependency array 為什麼重要？
整理 React 面試常見基礎題：key 如何影響元件身份、index 當 key 的問題，以及 useEffect dependency array 漏寫可能造成的 stale closure 與同步錯誤。
閱讀全文 →
·5 min read·
前端面試系列狀態管理React
前端工程師面試題：MobX、Redux、Zustand 怎麼選？
整理 React 狀態管理面試題：先區分 local state、server state、URL state、global client state，再比較 Redux、MobX、Zustand 的取捨。
閱讀全文 →
·4 min read·
前端面試系列React效能優化
前端工程師面試題：useMemo 和 useCallback 差在哪？什麼時候不該用？
整理 React 效能面試常見題：useMemo、useCallback、React.memo 的差異、使用時機、常見誤區，以及和 re-render 的關係。
閱讀全文 →
·4 min read·
前端面試系列React RouterReact
前端工程師面試題：React Router v5 升級 v6 改了哪些？
整理 React Router v5 到 v6 的升級重點：Routes、element、useNavigate、Navigate、Outlet、nested routes，以及升級時常見踩坑。
閱讀全文 →
·7 min read·
Next.jsVercel AI SDKGroq
用 Vercel AI SDK v6 在 Next.js 加上 AI 聊天助手（免費用 Groq）
從零整合 Vercel AI SDK，搭配 Groq 免費 API，在 Next.js 部落格實作 streaming 聊天介面。解釋為什麼要用 SDK 而不是直接呼叫 API，以及實作過程中需要注意的 API 設計細節。
閱讀全文 →
·6 min read·
前端CanvasReact
用 Canvas 做刮刮樂：destination-out 的原理與實現
透過 Canvas 的 globalCompositeOperation: destination-out，用三個核心步驟實現支援滑鼠與觸控的刮刮樂元件。
閱讀全文 →
·8 min read·
TypeScriptReactAnimation
用 requestAnimationFrame 實作可中途停止的轉盤
CSS transition 做不到中途停止。這篇從這個限制出發，說明 requestAnimationFrame 的逐幀控制思維，以及如何設計動態緩停算法，讓玩家可以自行決定何時停轉。
閱讀全文 →
·8 min read·
JavaScriptTypeScriptReact
從 jQuery 到 TypeScript：打造轉盤抽獎元件
記錄一個外包轉盤抽獎遊戲的重構歷程，從 jQuery DOM 操作，改寫成以 TypeScript 管理狀態、Canvas API 繪製輪盤、React 封裝互動元件。
閱讀全文 →
·5 min read·
Next.js搜尋React
Next.js Blog 不靠後端的全文搜尋
介紹如何在 Next.js Blog 中實作純前端全文搜尋，不需要後端 API，直接在 Client Component 過濾文章。
閱讀全文 →