KD's Tech Blog

Hi, 我是 KD Chang 凱迪，我在這書寫我的軟體開發/程式設計技術筆記 | KD 技術部落格

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

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

Posted by kdchang on 2025-02-08

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

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

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

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

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

Node.js Express.js 入門教學筆記 | 學習筆記

1. 簡介Express.js 是一個基於 Node.js 的 Web 應用框架，提供簡潔且靈活的 API，適用於建立伺服器端應用程式。它可以用來開發 RESTful API、Web 應用或後端服務。 為什麼選擇 Express.js？ 輕量且易於學習 擴展性高 內建強大的中介軟體（Middleware）系統 支援各種範本引擎（例如：EJS, Pug） 2. 安裝與專案初始化安裝 Node......

Posted by kdchang on 2024-12-16

Bloom Filter 入門教學筆記 | 學習筆記

前言在處理大數據或需要大量查詢的系統中，「是否存在某個元素」是一個常見的需求。例如：檢查某個使用者是否已註冊、某筆資料是否已儲存、或某個網址是否在黑名單中。這些操作如果都直接查詢資料庫，會造成效能瓶頸，尤其在資料量非常大的情況下。 為了解決這個問題，Bloom Filter（布隆過濾器）誕生了。這是一種空間效率極高且速度快速的概率型資料結構，用於檢查元素是否在集合中。它的特點是可以節省大量記......

Posted by kdchang on 2024-12-15

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

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

FRIENDS