KD's Tech Blog

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

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

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

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

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

Git Flow 介紹與 GitHub Flow 介紹入門教學筆記 | 學習筆記

前言在軟體開發中，版本控制是協作開發中至關重要的工具。Git 作為當前最受歡迎的版本控制系統，其強大的分支管理和版本控制功能，使得開發團隊能夠高效地進行協作。兩種常見的 Git 工作流是 Git Flow 和 GitHub Flow，這些工作流提供了清晰的分支管理策略，讓團隊可以更加有序地開發和部署代碼。本文將介紹 Git Flow 和 GitHub Flow 的基本概念、使用方法，以及它們......

Posted by kdchang on 2024-12-04

滾動視差（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

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

一、什麼是 Nuxt.js？Nuxt.js 是一個基於 Vue.js 的漸進式框架，專為構建伺服器端渲染（SSR）和靜態站點生成（SSG）應用程式而設計。它提供開發者一個強大的開發體驗，並簡化 Vue.js 應用的架構與設定，適合 SEO 優化、效能最佳化以及提升開發效率。 Nuxt.js 的核心特性包括： 伺服器端渲染（SSR）：增強 SEO 並提升初始載入速度。 靜態站點生......

Posted by kdchang on 2024-12-01

Tailwind CSS 入門教學筆記 | 學習筆記

一、什麼是 Tailwind CSS？Tailwind CSS 是一款以「工具類別優先」（Utility-First）為核心設計理念的 CSS 框架，與傳統的 CSS 框架（如 Bootstrap、Bulma）不同，它不提供預設的 UI 元件，而是提供大量的樣式工具類別，讓開發者可以快速組合來建構 UI，而不需要額外撰寫自訂 CSS。 相較於傳統 CSS 框架，Tailwind CSS ......

Posted by kdchang on 2024-11-30

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

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

FRIENDS