KD's Tech Blog

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

常見 Web Frontend 前端工程師面試準備題目清單

前端工程面試準備清單 掌握基礎知識：在開始解決複雜問題之前，您需要確保對前端開發的基礎知識有扎實的理解，包括 HTML、CSS 和 JavaScript，以及它們如何協作來創建響應式和互動式的網頁。如果您認為自己在這些主題上仍需學習，請參考前端學習路線圖。 練習寫程式：通過小型專案或在 LeetCode 和 HackerRank 等平台上解決問題，來提升您的前端寫程式技能。專注於與前端開發......

Posted by kdchang on 2024-01-22

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

前言在 React 中，每次元件重新渲染時，元件內部定義的函式也會被重新建立。這會導致某些子元件即使其 props 沒有變動，卻仍然會被重新渲染，造成效能浪費。useCallback Hook 是 React 提供的工具，用來記憶（memoize）函式的參考，以避免不必要的重新渲染。它的使用情境與 useMemo 類似，不同之處在於：useMemo 記憶的是「值」，而 useCallback......

Posted by kdchang on 2024-01-21

10 key terms related to backend engineering

Here are 10 key terms related to backend engineering, covering essential skills, tools, and work methodologies: Node.js / Python / Java / Ruby / PHP – Common backend programm......

Posted by kdchang on 2024-01-21

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

前言在 React 中，useState 是管理狀態的基礎 Hook，但當應用的狀態邏輯越來越複雜，像是涉及多個欄位更新、交叉依賴或分支邏輯，使用 useState 可能變得難以維護。這時，React 提供的 useReducer Hook 是一個更合適的選擇。 useReducer 的概念與 Redux 類似，它讓你將狀態管理邏輯集中在一個 reducer 函式中，透過 dispatch ......

Posted by kdchang on 2024-01-20

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

前言在 React 中，useRef 是一個非常實用的 Hook，它提供了一個方法來在元件重新渲染之間保留值。不同於 useState，當 useRef 的值改變時不會觸發元件重新渲染，這使它成為追蹤狀態變化、儲存 DOM 參考或避免不必要重新渲染的理想選擇。 本文將深入說明 useRef 的三種主要用途： 避免重新渲染的狀態儲存 直接操作 DOM 元素 追蹤先前的狀態值 重點摘要 u......

Posted by kdchang on 2024-01-19

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

前言在 React 應用程式中，當需要在多個巢狀元件之間共享資料時，傳遞 props 是最基本的做法。但當元件層級變深，這樣的資料傳遞會變得繁瑣且難以維護，這種情況被稱為「props drilling」。為了解決這個問題，React 提供了 Context API，搭配 useContext Hook 可以讓你在不需要一層層傳遞 props 的情況下，輕鬆地在深層元件中讀取共享的狀態。 重......

Posted by kdchang on 2024-01-18

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

前言在 React 函式型元件中，useEffect 是一個強大且常用的 Hook，用來處理副作用（side effects）。副作用指的是那些不直接涉及元件渲染的操作，例如：發送 API 請求、操作 DOM、設定或清除計時器等。 傳統上，這些操作會在 componentDidMount、componentDidUpdate 或 componentWillUnmount 等生命週期函式中進行......

Posted by kdchang on 2024-01-18

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

前言在 React 函式元件中，useState 是最常用的 Hook 之一，能讓我們在無需使用 class 的情況下新增與管理元件的「狀態」（state）。狀態是指會隨著使用者互動或應用邏輯變化而更新的資料，例如：輸入框的內容、按鈕點擊次數、切換的主題顏色等。 重點摘要 useState 是 React 提供的 Hook，用來在函式型元件中儲存與更新狀態。 使用前需先從 react 匯入......

Posted by kdchang on 2024-01-17

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

前言Hooks 是在 React 16.8 版本中加入的新功能。Hooks 讓你可以在「函式元件（function components）」中使用狀態（state）以及其他 React 功能。因此，自從有了 Hooks 之後，類別元件（class components）通常就不再是必要的了。 儘管 Hooks 幾乎取代了類別元件的使用方式，但 React 團隊目前並沒有打算移除 class ......

Posted by kdchang on 2024-01-16

在 React 中使用 Sass 進行樣式設計教學 | w3schools 學習筆記

前言在現代前端開發中，維護與管理 CSS 樣式是一項重要任務，尤其當應用程式日益龐大、元件複雜時，單純使用原生 CSS 經常會遇到樣式難以重用、命名衝突等問題。這時候，Sass（Syntactically Awesome Stylesheets）這類 CSS 預處理器便顯得格外實用。Sass 提供變數、巢狀語法、Mixin 等強大功能，有助於讓樣式更具模組化與可維護性。 本篇教學將說明如何在......

Posted by kdchang on 2024-01-15

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

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

FRIENDS