KD's Tech Blog

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

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

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

前言：什麼是 Angular？Angular 是由 Google 支持與維護的前端框架，採用 TypeScript 開發，用於建構單頁應用程式（SPA）。Angular 提供了強大的資料繫結（Data Binding）、組件化設計（Component-based Architecture）、模組化管理（Modules）、路由（Routing）等功能，適合用來開發大型且可維護性的應用。 Ang......

Posted by kdchang on 2024-12-19

金流使用 Hash 原因入門教學筆記 | 學習筆記

在金流（第三方支付或自建金流）系統中使用 Hash（雜湊） 的原因，主要是為了安全性與防止資料被竄改。以下是更詳細的解釋： 一、為什麼金流需要 Hash？金流交易涉及敏感資料（如金額、訂單編號、使用者資訊、驗證參數等），若這些資料在傳輸過程中被竄改，將造成： 金額錯誤（被調整為更小金額） 偽造付款成功通知 使用者資料外洩 金流詐騙行為 因此，金流平台與商家之間需要一種方式來驗證資料完整......

Posted by kdchang on 2024-12-18

LINE Pay API 入門教學筆記 | 學習筆記

一、前言在電子商務與線上交易日益普及的今天，提供穩定又方便的金流服務已成為網站與應用程式不可或缺的一環。LINE Pay 是由 LINE Corporation 推出的行動支付平台，除了在線上與實體店面支援消費者付款外，也提供開發者 API 介面來整合第三方商務服務，使開發者可以在網站或應用程式中無縫串接付款功能。 本篇教學筆記將帶你了解 LINE Pay API 的基本觀念、運作流程，以及......

Posted by kdchang on 2024-12-16

Vue ref 與 reactive 入門教學筆記 | 學習筆記

前言在 Vue 3 中，ref 與 reactive 都是用來創建響應式資料的工具，但它們適用的情境略有不同。以下是清楚的比較與實際使用範例，幫助你理解什麼時候該用哪一個。 ref 使用情境適用於： 原始資料型別：如 Number、String、Boolean、Date 等。 你只需要追蹤單一值。 當你需要某個變數傳遞到 <template> 或函式中。 語法：import ......

Posted by kdchang on 2024-12-16

JavaScript 模組系統：CommonJS 與 AMD 入門教學 | 學習筆記

前言在 JavaScript 早期，所有程式碼通常寫在單一文件中，這樣的方式在小型專案中或許可行，但當應用程式變得更大、更複雜時，這種結構會導致管理困難。因此，模組化的概念被引入，允許開發者將程式碼拆分成可重複使用的獨立部分，提高可維護性與擴展性。 在 ES6 標準推出之前，JavaScript 主要依賴 CommonJS（CJS） 和 Asynchronous Module Defin......

Posted by kdchang on 2024-12-16

JavaScript 模組（Module）入門教學筆記 | 學習筆記

1. 什麼是 JavaScript 模組？JavaScript 模組（Module）是一種將程式碼拆分成多個獨立文件，並在不同文件間共享和管理程式碼的方式。透過模組化的設計，可以讓程式碼更具結構性、可讀性與可維護性。 在 ES6（ECMAScript 2015）之前，JavaScript 主要透過 IIFE（立即執行函式）、CommonJS 或 AMD 來模組化程式碼。而 ES6 之後，Ja......

Posted by kdchang on 2024-12-16

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

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

FRIENDS