KD's Tech Blog

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

Monorepo 入門教學筆記：使用 npm Workspaces 管理多專案 | 學習筆記

一、什麼是 Monorepo？Monorepo（Monolithic Repository） 是一種將多個相互關聯的專案（如前端、後端、共用函式庫等）統一放在同一個 Git 倉庫中進行版本管理的架構策略。這種做法可提升跨專案開發效率、共用程式碼的一致性，並簡化 CI/CD 流程。 相較於 Multi-repo（每個專案獨立倉庫），Monorepo 具有以下幾項優勢： 優點 統一依賴......

Posted by kdchang on 2024-11-16

React 與 Next.js 入門教學筆記 | 學習筆記

1. React 簡介React 是由 Facebook（現 Meta）開發的 JavaScript 前端函式庫，主要用於構建 UI 元件。它採用組件化開發方式，並透過 Virtual DOM 提升效能。 2. Next.js 簡介Next.js 是一個基於 React 的框架，提供伺服器端渲染（SSR）、靜態網站生成（SSG）等功能，讓開發者能夠更輕鬆地開發 SEO 友好的應用程式。 3.......

Posted by kdchang on 2024-11-16

軟體工程專有名詞彙整學習筆記

軟體工程專有名詞 Agile 敏捷開發 DbC 契約精神 SOLID 原則 TDD 測試驅動 KISS 原則 YAGNI (避免過度設計) DRY (模組化、擅用設計模式) 迪米特法則(降低依賴和耦合) 依賴注入 關注點分離 無暇程式碼 clean code 設計模式 ...

Posted by kdchang on 2024-11-16

Vue Router 入門教學筆記 | 學習筆記

前言Vue Router 是 Vue.js 官方提供的前端路由解決方案，專為構建單頁應用（SPA, Single Page Application）而設計。它讓我們可以根據網址變化動態切換畫面而不重新載入頁面，是開發 Vue 應用不可或缺的工具之一。 本文將介紹 Vue Router 的基本概念、安裝方式、核心語法，並透過簡單實作幫助我們快速入門。 一、什麼是前端路由在傳統網頁架構中，網址......

Posted by kdchang on 2024-11-16

Vuex 入門教學筆記：集中式狀態管理實作入門教學筆記 | 學習筆記

前言在 Vue.js 開發中，當應用程式變得複雜，元件之間需要共享的狀態越來越多時，僅靠 props 與 events 傳遞資料會變得混亂與難以維護。這時，我們就需要一個集中式的狀態管理方案，而 Vuex 正是官方為 Vue 提供的解決方案。 Vuex 是一個專為 Vue 應用開發的狀態管理模式。它將應用中所有的狀態集中管理，並以可預測的方式更新，便於追蹤與維護。 一、Vuex 是什麼？V......

Posted by kdchang on 2024-11-16

Webpack 入門教學筆記：現代前端建構工具的基礎與實戰 | 學習筆記

前言在前端專案日益龐大與模組化的今天，建構工具（build tools）扮演了極其關鍵的角色。而 Webpack 作為目前最主流的模組打包器（module bundler），廣泛應用於各類前端應用與框架中（如 React、Vue 等）。本篇筆記將介紹 Webpack 的基本概念、核心組件與實際範例，協助你快速理解與實作。 一、什麼是 Webpack？Webpack 是一個靜態模組打包器，它......

Posted by kdchang on 2024-11-16

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

前言Cookie 是一種儲存在使用者瀏覽器上的小型文字檔案，用於保存使用者的狀態或資訊。常見用途包含： 紀錄登入狀態：讓使用者在網站上保持登入，不需每次重新輸入帳號。使用者偏好設定：保存使用者選擇的語言、主題等個人化設定。追蹤使用者行為：例如分析網站流量、廣告投放追蹤等。 重點摘要Cookie 依據不同的分類方式，可以分為以下幾種常見種類： 一、依用途分類： 功能性 Cookie（Funct......

Posted by kdchang on 2024-11-01

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

1. 什麼是 Alpine.js？Alpine.js 是一個輕量級的 JavaScript 框架，專為增強 HTML 標記而設計。它的語法靈感來自 Vue.js，但更加簡潔，適用於需要簡單互動的網頁。 它的主要特點包括： 使用 HTML 屬性直接定義行為 不需要額外的構建工具 易於學習和使用 與其他框架（如 Vue、React）兼容 2. 安裝與引入使用 Alpine.js 最簡單的方法......

Posted by kdchang on 2024-10-16

整合 Tailwind CSS 與 daisyUI 的入門教學筆記 | 學習筆記

一、前言：為什麼選擇 Tailwind CSS 搭配 daisyUI？在現代前端開發中，Tailwind CSS 提供了高度自訂、原子化的 CSS class，使得開發者能夠以更模組化與語意化的方式撰寫樣式。然而，Tailwind 並不內建 UI 元件，這就使得一些常見元件（如按鈕、表單、卡片）仍需手動組裝樣式。 這時，daisyUI 就成為極佳的搭檔。daisyUI 是一個基於 Tailw......

Posted by kdchang on 2024-10-16

Web 前端效能優化入門教學筆記 | 學習筆記

前言在網頁開發中，效能優化是一個不可忽視的重要課題。無論是企業網站、單頁應用（SPA），或是電商平台，效能表現都直接影響使用者體驗與轉換率。 本篇筆記將介紹 Web 前端效能優化的核心概念、常見策略與實務範例，幫助你為專案建立良好的基礎。 為什麼需要前端效能優化？前端效能不佳會導致： 首次載入時間過長 使用者等待過久，產生跳出行為 SEO 表現不佳（Google 會參考 LCP、CLS、......

Posted by kdchang on 2024-10-16

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

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

FRIENDS