KD's Tech Blog

軟體工程和產品專案管理現場觀察：關於軟體開發/程式設計/工程思維的技術部落格

useSWR 入門教學筆記：打造高效、簡潔的資料請求方式 | 學習筆記

前言在現代前端開發中，資料的取得與管理是不可或缺的一環。傳統上，我們可能使用 useEffect 搭配 fetch 或 axios 來處理資料請求，但這樣的方式不僅冗長，還需要手動管理 loading、error 狀態與快取邏輯。為了解決這些問題，Vercel 推出的 SWR（stale-while-revalidate）提供了一種簡潔、聲明式且高效的資料取得方式，特別適合搭配 React ......

Posted by kdchang on 2024-12-23

JavaScript 可選鏈接運算符（Optional Chaining）介紹與入門教學 | 學習筆記

前言在 JavaScript 中，處理深層嵌套結構時，我們經常會遇到 null 或 undefined 的問題。例如，當我們需要訪問一個對象的屬性，而該屬性本身可能不存在時，傳統的做法會導致錯誤，這樣的情況會非常繁瑣。為了解決這個問題，JavaScript 引入了 可選鏈接運算符（Optional Chaining），簡化了屬性訪問過程，並防止了因為屬性為 null 或 undefined ......

Posted by kdchang on 2024-12-21

NextAuth.js 入門教學筆記 | 學習筆記

一、前言隨著 Web 開發從傳統伺服器渲染演變為前後端分離架構，處理「使用者認證」變得更為複雜。許多開發者不再單純依賴 session + cookie 的方式，而是轉向 token-based 的 JWT 或 OAuth 解決方案。 如果你正在使用 Next.js，那麼 NextAuth.js 是一套高度整合、彈性高且極為方便的認證函式庫。它支援多種認證方式（如 OAuth、Email、C......

Posted by kdchang on 2024-12-21

React Context API 入門教學 | 學習筆記

前言React Context API 是 React 提供的一種方式，讓我們能夠在組件樹中傳遞資料，而不需要一層層地使用 props。Context API 可以解決多層嵌套組件的傳遞問題，讓我們在深層組件中輕鬆訪問到全局狀態。本文將介紹如何使用 React Context API，並提供一個簡單的範例來展示其實際應用。 什麼是 React Context APIReact Context......

Posted by kdchang on 2024-12-21

Chrome Extension 入門教學筆記 | 學習筆記

前言Chrome Extension（Chrome 擴充功能）是針對 Google Chrome 瀏覽器開發的瀏覽器插件，能夠延伸瀏覽器的功能，提供更高效的使用體驗。你可以用它來自動化操作、強化 UI、增加捷徑、記錄內容、攔截請求等等。 本教學將介紹 Chrome Extension 的基本架構、開發流程與一個簡單的實作範例，協助你快速入門。 重點摘要 基本架構： manifest.js......

Posted by kdchang on 2024-12-20

chrome.storage.local vs. localStorage：資料儲存方式差異入門教學筆記 | 學習筆記

前言在前端與 Chrome 擴充功能（Chrome Extension）開發中，「資料儲存」是一項常見需求。開發者常見的兩種方式為： localStorage：瀏覽器原生提供的本地儲存 API chrome.storage.local：Chrome Extension 提供的本地儲存 API 兩者名稱相似，功能也都能儲存 key-value 結構資料，但其用途、行為、效能與限制卻有顯著差......

Posted by kdchang on 2024-12-20

Claude Code 入門教學筆記 | 學習筆記

前言隨著 AI 編程助手的發展，越來越多開發者開始使用 AI 工具來加速開發流程。由 Anthropic 推出的 Claude Code，是一個專為程式設計任務設計的生成式 AI 模型。它結合 Claude 的強大語言理解能力，專注於代碼撰寫、重構、除錯與文件生成，並支援多種程式語言。 與 GitHub Copilot、ChatGPT 等工具類似，Claude Code 目標是協助開發者更有......

Posted by kdchang on 2024-12-20

GitHub Copilot 與 Copilot Agent 入門教學筆記 | 學習筆記

前言自 2021 年推出以來，GitHub Copilot 已成為全球數百萬開發者的編程助手，能根據上下文即時補全程式碼。2024 年，GitHub 推出進階功能 Copilot Workspace 和 Copilot Agents，進一步從單一代碼補全進化為具備「理解、操作與協作」能力的智慧 AI 開發助理。 這些新功能不僅能幫助你完成程式碼撰寫，還能協助理解需求、分析問題、規劃專案、重構......

Posted by kdchang on 2024-12-20

n8n 入門教學筆記 | 學習筆記

前言在現代軟體開發與數位工作流程中，「自動化」已成為提升效率的關鍵。無論是處理 API 整合、資料同步、通知發送，或是各種無需人工介入的重複性工作，選擇一套靈活的工作流程自動化工具是必要的。 n8n（pronounced “n-eight-n”） 是一個強大的開源自動化工具，具備類似 Zapier 的拖拉式流程設計介面，但更強調可自建、開源、自主掌控資料與程式彈性。它支援超過 400 個內建......

Posted by kdchang on 2024-12-20

React useMemo 與 useCallback 差異介紹與入門教學 | 學習筆記

前言在使用 React hooks 進行開發時，useMemo 和 useCallback 是兩個常被提及的性能優化工具。它們都屬於 記憶化（memoization） 技術，用來避免不必要的重算與重渲染。然而，很多初學者在理解這兩者的用途與差異時常感到困惑。這篇文章將從概念出發，並搭配實際範例，幫助你掌握 useMemo 與 useCallback 的核心用途與實作方式。 一、共通點：記憶......

Posted by kdchang on 2024-12-20

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS