KD's Tech Blog

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

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

前言在現代應用程式開發中，資料儲存已不再侷限於傳統的關聯式資料庫（如 MySQL、PostgreSQL）。特別是在處理非結構化資料、需要高延展性或頻繁 schema 變動的應用場景中，NoSQL 資料庫逐漸成為主流選擇。 其中，MongoDB 是最受歡迎的 NoSQL 資料庫之一。它採用文件型（Document-Oriented）結構，使用 JSON 類型格式（實際為 BSON）儲存資料，讓......

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

Pinia Setup Store 與 Option Store 比較介紹入門教學筆記

前言Pinia 是 Vue 3 推薦的狀態管理工具，作為 Vuex 的繼任者，Pinia 以簡潔且直觀的 API 設計，為 Vue 生態系帶來更輕量且易於維護的解決方案。Pinia 提供兩種撰寫 store 的方式：Option Store 與 Setup Store。兩者皆支援響應式狀態管理，但在語法結構與彈性上有所不同。理解這兩種寫法的差異，對於新手以及想提升開發效率的工程師來說相當重要......

Posted by kdchang on 2024-12-16

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

前端渲染模式入門教學筆記：CSR、SSR、SSG、ISR、DPR | 學習筆記

前言隨著前端框架如 React、Vue、Next.js、Nuxt 的普及，網站渲染方式也變得更加多樣化。不再只是單純地將 HTML 靜態輸出，開發者可依據產品需求選擇合適的渲染模式，如 CSR（Client Side Rendering）、SSR（Server Side Rendering）、SSG（Static Site Generation）、ISR（Incremental Static......

Posted by kdchang on 2024-12-12

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

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

FRIENDS