KD's Tech Blog

Hi, 我是 KD Chang 凱迪，紀錄關於軟體開發/程式設計/工程思維的技術筆記 | KD 技術部落格

Roo Code 詳細介紹：AI VS Code 編輯器外掛入門教學筆記 | 學習筆記

前言Roo Code（原名 Roo Cline）是一款嵌入於 Visual Studio Code 編輯器中的開源 AI 代理，能讀寫檔案、自動執行終端指令、操作瀏覽器，甚至整合多種 LLM 模型。無論是編寫程式、重構、除錯、架構設計，Roo Code 都能協助你提升開發效率，更像是一個智慧且自主的開發團隊成員。 重點摘要 核心功能與定位 像開發團隊的 AI 助手，能讀寫檔案、執行命令、......

Posted by kdchang on 2025-02-20

12 Factor App 入門教學：打造現代雲端應用的十二守則教學筆記 | 學習筆記

前言12 Factor App 是由 Heroku 團隊提出的一套雲端應用架構設計原則，旨在幫助開發者打造可擴展、可維護、易部署的現代化應用程式。這些準則不限語言或框架，廣泛適用於各種 SaaS 應用、API 服務、微服務架構等場景。 以下是每一個 factor 的說明與實際範例： 一、 Codebase（代碼基底）一個應用對應一個代碼庫，多個部署環境共用該代碼庫 一個應用程式不應散落在多......

Posted by kdchang on 2025-02-08

React 效能優化入門教學筆記 | 學習筆記

前言隨著前端應用日益龐大，單頁應用（SPA）在初次載入時常面臨 JavaScript 檔案過大、載入時間過久的問題，導致使用者等待時間過長、效能下降。為了解決這個問題，React 與現代建構工具（如 Webpack、Vite）提供了 Code Splitting（程式碼分割）與 Lazy Loading（延遲載入）兩種策略，協助開發者更有效地管理與優化應用程式的載入流程。 程式碼分割（Cod......

Posted by kdchang on 2024-12-26

React 效能優化入門教學筆記 | 學習筆記

前言React 作為現代前端開發的主流函式庫之一，強調 UI 的組件化與狀態驅動式渲染。然而，隨著應用規模擴大與資料變得動態頻繁，React 應用可能出現重新渲染過多、載入過慢或記憶體占用過高等問題，影響使用者體驗與開發效率。為此，瞭解與掌握 React 的效能優化技巧，成為中高階開發者的重要功課。 本篇筆記將介紹 React 效能優化的核心原則與常見實作方式，搭配簡單的程式碼範例說明實際操......

Posted by kdchang on 2024-12-25

React 效能優化 SOP 檢核清單入門教學筆記 | 學習筆記

前言在大型單頁應用（SPA）與複雜互動式介面中，效能瓶頸常常來自不必要的重新渲染、大型 bundle 導致的載入緩慢，以及過度操作 DOM 所造成的卡頓。建立一份標準化的「效能優化檢核清單」（SOP，Standard Operating Procedure），能夠在開發流程中明確指出應檢查的重點、落實最佳實踐，並透過持續監控與回饋，進一步強化團隊的效能意識與程式品質。 本篇筆記將依照從「程式......

Posted by kdchang on 2024-12-24

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.storage.local vs. localStorage：資料儲存方式差異入門教學筆記 | 學習筆記

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

Posted by kdchang on 2024-12-20

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

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

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