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

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

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

滾動視差（Parallax Scrolling）網頁設計入門教學筆記 | 學習筆記

一、什麼是滾動視差？滾動視差（Parallax Scrolling）是一種前端網頁設計技術，透過不同層的背景與內容以不同的速度滾動，營造出立體感與動態視覺效果。這種技術常見於品牌網站、產品介紹頁面或作品展示頁面，能有效提升使用者的沉浸感與互動體驗。 滾動視差的視覺效果 背景與內容滾動速率不同：背景滾動速度較慢，前景滾動速度較快，模擬景深效果。 多層次視覺變化：不同層的元素可以有獨立的......

Posted by kdchang on 2024-12-03

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

一、什麼是 TypeScript？TypeScript 是由 Microsoft 開發的 JavaScript 超集（Superset），提供靜態型別檢查（Static Type Checking），讓開發者在編譯時發現錯誤，提升程式碼的可靠性與可維護性。TypeScript 會被編譯為標準 JavaScript，並可以運行於任何支援 JavaScript 的環境，例如瀏覽器或 Node.j......

Posted by kdchang on 2024-12-02

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

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

FRIENDS