KD's Tech Blog

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

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

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

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

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

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

FRIENDS