KD's Tech Blog

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

SASS 語法介紹入門教學筆記 | 學習筆記

什麼是 SASS？SASS（Syntactically Awesome Style Sheets）是一種 CSS 預處理器，旨在提升 CSS 的功能性，讓開發者能夠以更加靈活和高效的方式編寫樣式表。它提供了許多比 CSS 更強大的功能，例如變數、巢狀規則、混合（mixins）、繼承等。SASS 語法有兩種主要形式：一種是較為常見的 SCSS（Sassy CSS），另一種則是 SASS，本文將......

Posted by kdchang on 2024-06-30

軟體工程師和 Web 前後端開發技能樹/學習藍圖（Roadmap）

前端工程Frontend Roadmap / Frontend Beginner Roadmap HTML CSS JavaScript Version Control Systems/Git/Github npm Vue React Angular TailwindCSS Vitest Cypress/Jest TypeSc......

Posted by kdchang on 2024-06-22

常見軟體工程師/網頁開發工具和學習資源整理

以下彙整常見 Web 網頁開發工具和資源整理： VS Code 套件 emmet Live Server Material Icon Theme Babel JavaScript Prettier CodeSnap JavaScript code snippets Peacock TODO Highlight Code Runner Live Share Color Highlight C......

Posted by kdchang on 2024-03-22

網站效能診斷入門教學：Lighthouse、Chrome DevTools 與 WebPageTest 實戰指南 | 學習筆記

前言現今網站的使用者體驗與載入速度息息相關，無論是 SEO 排名、使用者留存率或轉換率，都受到頁面效能影響。為了協助開發者精準找出網站瓶頸，Google 與其他組織提供了多種強大的診斷工具，其中最常用且具代表性的就是 Lighthouse、Chrome DevTools 與 WebPageTest。 本篇教學筆記將介紹這三種工具的基礎使用方法與診斷技巧，幫助我們從初學者也能迅速上手，實際分析......

Posted by kdchang on 2024-03-20

資料庫索引（Index）介紹入門教學筆記 | 學習筆記

前言在資料庫中，隨著資料筆數的增加，查詢效率成為一個重要的議題。舉例來說，若在百萬筆資料中查找某一筆特定紀錄，如果沒有任何輔助結構，資料庫就必須逐筆掃描（Full Table Scan），效率極差。為了解決這個問題，資料庫系統引入了「索引（Index）」這個概念，來加速查詢與特定操作。索引的設計與使用，是每一位軟體工程師與資料庫設計者都必須掌握的核心技能。 重點摘要一、索引的主要功能： ......

Posted by kdchang on 2024-02-20

瀏覽器渲染優化入門：掌握重繪、重排與合成的效能關鍵 | 學習筆記

前言在現代前端開發中，良好的使用者體驗不僅來自功能與介面設計，更仰賴流暢的渲染效能。網頁在瀏覽器中的呈現涉及一連串複雜的渲染步驟，包含樣式計算、排版、繪製與合成。當我們操作 DOM、修改樣式或觸發動畫時，都可能影響這些渲染流程。如果不了解這些背後的機制，很容易造成畫面卡頓與效能瓶頸。 本篇筆記將介紹瀏覽器渲染的三大核心階段：重排（Reflow）、重繪（Repaint）與合成（Composit......

Posted by kdchang on 2024-02-20

Vue v-cloak 入門教學筆記 | 學習筆記

前言v-cloak 在 Vue 3 依然存在，作用與 Vue 2 相同：在 Vue 實例或組件掛載完成之前，避免模板中的插值語法（如 {{ message }}）閃爍顯示給使用者。搭配 CSS 可在 Vue 掛載完成前隱藏元素，增進首屏體驗。 重點摘要 v-cloak 為特殊屬性，Vue 3 掛載完成會自動移除。 必須搭配 CSS [v-cloak]......

Posted by kdchang on 2024-02-20

TanStack Query 入門教學筆記 | 學習筆記

前言在現代前端開發中，資料取得（Data Fetching）與狀態管理是非常重要的課題。傳統上，我們可能會使用 useEffect 搭配 fetch 或 axios 來手動管理資料請求，並維護載入狀態、錯誤狀態與資料快取等，但這樣往往容易導致重複程式碼、管理複雜以及效能不佳。 TanStack Query（舊名 React Query）是一個專門用來管理伺服器狀態（server state）......

Posted by kdchang on 2024-02-01

React Custom Hooks 入門教學 | w3schools 學習筆記

前言在 React 應用程式中，隨著功能的增加與維護需求的提升，我們常常會遇到多個元件需要共享相同邏輯的情況。為了避免重複撰寫相似程式碼、增加維護成本，React 提供了一個優雅的解法：自訂 Hook（Custom Hook）。 自 React 16.8 版本開始，我們能使用 Hook 來管理狀態與副作用，而自訂 Hook 則是讓我們可以把邏輯封裝起來，像一般函式一樣在多個元件中重複使用。這......

Posted by kdchang on 2024-01-23

React Hooks useMemo 入門教學 | w3schools 學習筆記

前言在 React 的開發中，我們常會遇到一些運算成本高昂（expensive）的函式，例如複雜的計算或操作大量資料。如果這些運算每次重新渲染都會重新執行，可能會導致效能低落，甚至造成使用者界面的卡頓或延遲。此時，我們可以使用 React 的 useMemo Hook，透過「記憶化」（memoization）技術，避免不必要的重新計算，從而提升效能。 本文將說明 useMemo 的用途、使用......

Posted by kdchang on 2024-01-22

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

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

FRIENDS