KD's Tech Blog

軟體工程和產品專案管理現場觀察：關於軟體開發/程式設計/工程思維的技術部落格

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

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

Posted by kdchang on 2024-12-01

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

1. Emotion CSS 簡介Emotion 是一款強大的 CSS-in-JS 解決方案，提供高效能且靈活的樣式管理方式，適用於 React 應用。Emotion 支援兩種主要的使用方式： CSS Prop（使用 JSX 內嵌樣式） styled API（使用 styled 函式創建元件） 2. 安裝 Emotion使用 npm 或 yarn 安裝 Emotion 核心套件： npm......

Posted by kdchang on 2024-11-30

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

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

前言在現代網頁開發中，動畫是一種強而有力的表現手法，能提升使用者體驗，使介面更加生動、有趣。相比 JavaScript，CSS Animation 提供一種更簡潔、性能更佳的動畫解法，尤其適合製作 UI 中的小型動畫效果。 本篇教學筆記將介紹 CSS Animation 的基本語法、常見屬性與一個實際範例，幫助你快速上手。 為什麼使用 CSS Animation？CSS Animation......

Posted by kdchang on 2024-11-16

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

Element Plus 介紹入門教學筆記 | 學習筆記

前言在現代前端開發中，UI 框架對於提升開發效率、提升用戶體驗具有至關重要的作用。Element Plus 是一個基於 Vue 3 的開源 UI 框架，它提供了豐富的組件，並且與 Vue 3 的 Composition API 完美兼容，能幫助開發者快速構建高質量的前端應用。 在筆記中，我們將使用 Vue 3 的 setup() 語法來講解如何在專案中使用 Element Plus，並展示如......

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

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

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

FRIENDS