KD's Tech Blog

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

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

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

Posted by kdchang on 2024-12-15

CSS font-size 單位介紹入門教學筆記 | 學習筆記

在 CSS 中，px、rem、em 和 vh 都可以用來設定 font-size，但它們的用途和適用場景不同。以下是詳細解析與使用建議： 1️. px（像素，固定單位）特性 絕對單位，與螢幕解析度無關。 不會受父元素影響，設定多少就是多少。 適用場景精確控制字體大小，例如： Logo、按鈕字體 小型 UI 元素（如標籤、提示訊息） 避免字體大小變動的情境 範例h1 { fo......

Posted by kdchang on 2024-12-14

Vue 正確新增或修改物件屬性入門教學筆記 | 學習筆記

前言在 Vue 2（Options API）中，this.$set 是用來在響應式系統中正確新增或修改物件屬性的方法。這對於動態新增屬性或修改陣列的指定索引值特別有用。 語法this.$set(target, propertyName/index, value) target：要修改的對象或陣列 propertyName（物件）或 index（陣列） value：要設的值 為什麼需......

Posted by kdchang on 2024-12-14

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

1. JSX 是什麼？JSX（JavaScript XML）是一種語法擴展，主要用於 React 函式庫中，它允許在 JavaScript 代碼中撰寫類似 HTML 的語法，使 UI 組件的編寫更加直觀。JSX 並非原生 JavaScript，需要透過 Babel 轉譯成標準 JavaScript 代碼。 2. 為什麼使用 JSX？JSX 提供了一種更加可讀、直觀的方式來描述 UI 結構，相......

Posted by kdchang on 2024-12-13

正規表達式（Regex）入門教學筆記 | 學習筆記

1. 正規表達式簡介正規表達式（Regular Expression，簡稱 Regex）是一種用於字串匹配與處理的強大工具。它廣泛應用於文字搜尋、資料驗證、文字替換等場景。正規表達式透過特殊的語法模式來描述字串結構，並可被多種程式語言支援，如 Python、JavaScript、Java、C# 等。 2. 基本語法與範例2.1 字面量匹配正規表達式最基本的形式是字面量匹配，意即直接搜尋特定字......

Posted by kdchang on 2024-12-13

Backend For Frontend（BFF）入門教學筆記 | 學習筆記

前言當今前端與後端開發越趨分離，加上行動裝置、多樣化的使用者端（Web、App、IoT 等）快速成長，Backend for Frontend（BFF） 架構逐漸成為微服務與現代應用中不可或缺的一環。本文將介紹 BFF 的基本概念、優缺點、使用情境與實際範例，幫助你快速理解並在專案中應用。 一、什麼是 Backend For Frontend？Backend For Frontend（簡稱 ......

Posted by kdchang on 2024-12-12

React Redux 介紹入門教學筆記 | 學習筆記

1. 什麼是 Redux？Redux 是 JavaScript 應用程式的狀態管理工具，最常與 React 搭配使用。它提供一個單一的全域狀態樹，使應用程式的狀態變更更可預測、可測試、可維護。Redux 遵循 單向數據流 和 不可變狀態 的概念，適合管理大型應用的複雜狀態。 2. Redux 核心概念Redux 的運作基礎主要由三個部分組成： Store（存儲狀態的地方） 整......

Posted by kdchang on 2024-12-12

前端渲染技術全解析：SSR、SSG、ISR、SPA 入門教學筆記 | 學習筆記

前言在現代網站開發中，前端技術日益進步，如何選擇合適的渲染方式，將直接影響網站的效能、SEO、開發效率與使用者體驗。本文將介紹四種常見渲染技術：伺服器端渲染（SSR）、靜態網站生成（SSG）、增量靜態再生（ISR）、以及單頁應用（SPA），並搭配實例幫助理解。 一、伺服器端渲染（SSR：Server-Side Rendering）原理說明：伺服器在每次收到使用者請求時，根據當下的資料即時產......

Posted by kdchang on 2024-12-12

Cypress 測試入門教學筆記 | 學習筆記

1. Cypress 基礎概念Cypress 是一款現代化的前端自動化測試工具，主要用於測試 Web 應用程式，支援端對端（E2E）測試、元件測試等。 1.1 為何選擇 Cypress？ 簡單易用，直接運行於瀏覽器。 提供即時回饋，方便 Debug。 內建等待機制，避免手動處理異步問題。 支援截圖與錄影，方便測試分析。 2. 安裝與設定2.1 安裝 Cypress使用 npm 或 yarn......

Posted by kdchang on 2024-12-08

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

1. Node.js 簡介Node.js 是一個基於 Chrome V8 JavaScript 引擎的運行環境，可讓開發者使用 JavaScript 來撰寫後端程式。它適合用於構建高效能、非同步的網路應用。 1.1 為何選擇 Node.js？ 非同步 & 事件驅動：適合 I/O 密集型應用，如 Web 伺服器。 單一語言開發：可用 JavaScript 同時開發前端與後端。......

Posted by kdchang on 2024-12-08

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

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

FRIENDS