KD's Tech Blog

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

Web 資訊安全入門教學筆記 | 學習筆記

前言在現代網頁應用中，資安問題層出不窮，從簡單的跨站攻擊（XSS）到複雜的憑證竊取、身份偽造（CSRF），都可能導致個資外洩、系統遭入侵甚至企業商譽受損。 本篇筆記將從實務角度出發，介紹幾種常見 Web 資安風險及其防範策略，讓你能以最基本的方式保護網站與使用者安全。 一、常見 Web 資安威脅類型1. XSS（Cross-Site Scripting，跨站腳本攻擊）原理：攻擊者將惡意腳本......

Posted by kdchang on 2024-10-16

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

一、什麼是 PostCSS？PostCSS 是一個 CSS 的轉換工具（CSS Transformer），本身不是 CSS 預處理器（如 Sass）或框架（如 Tailwind CSS），但它可以透過「外掛（plugin）」的方式強化你的 CSS 工作流程。 簡單來說，PostCSS 是一個平台，讓你可以用 JavaScript 編寫規則，自動處理 CSS，像是： 自動加上瀏覽器前綴（au......

Posted by kdchang on 2024-09-16

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

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

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

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

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

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

FRIENDS