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 助手,能讀寫檔案、執行命令、......

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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