KD's Tech Blog

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

React Render HTML 入門教學 | w3schools 學習筆記

前言React 是一個專門用於構建使用者介面（UI）的 JavaScript 函式庫，其主要目標就是將 HTML 呈現在網頁中。透過 React 的核心函式 createRoot() 和方法 render()，開發者可以將 UI 元件渲染到指定的 HTML 元素中。本文將介紹 React 如何在網頁上渲染 HTML，包括核心函式與方法的用途、應用位置與語法示範，並介紹與 JSX 語法的結合使......

Posted by kdchang on 2024-01-03

React 與 ES6 語法教學入門 | w3schools 學習筆記

前言ES6（ECMAScript 2015）是 JavaScript 的第六版，於 2015 年發布，為 JavaScript 帶來了重大語法革新。React 作為現今最受歡迎的前端框架和函式庫之一，其核心設計與語法極度依賴 ES6 的各項功能。因此，學習 React 前，理解 ES6 的語法特性將大幅提升開發效率與理解深度。 本文將說明 React 常用的 ES6 特性，並透過簡明範例幫助......

Posted by kdchang on 2024-01-02

React 入門教學 | w3schools 學習筆記

前言在當代的前端開發中，React 是最具代表性的 JavaScript 函式庫之一。由 Facebook 軟體工程師 Jordan Walke 所開發，React 被廣泛應用於建構動態使用者介面，尤其適用於大型單頁應用（SPA, Single Page Application）。本篇文章將帶你認識 React 的核心概念、其背後的工作原理、使用前的基礎知識與發展歷史，並透過實例進行初步實作......

Posted by kdchang on 2024-01-01

事件物件屬性 e.target 與 e.currentTarget 的差異與應用 | 學習筆記

前言在網頁開發中，事件處理是前端工程師必須熟悉的基礎知識之一。當我們使用 JavaScript 或框架（如 Vue、React）監聽 DOM 事件時，瀏覽器會提供一個事件物件（event object）給監聽函式，透過它我們能取得觸發事件的相關資訊。而在事件物件中，最常被初學者混淆的兩個屬性就是 e.target 與 e.currentTarget。 這兩者的差別看似微小，但實際上與事件冒泡......

Posted by kdchang on 2023-12-21

Git 指令學習筆記 | 學習筆記

前言Git 是現代軟體開發中最常使用的分散式版本控制系統，它幫助開發者管理源代碼的版本和協作。這篇教學將從基礎開始，介紹 Git 的常用命令並提供實際範例，幫助你熟悉如何使用 Git 來進行版本控制與協作。 1. 初始化 Git 倉庫 (git init)在專案資料夾中使用 git init 可以初始化一個新的 Git 倉庫，這樣就可以開始使用 Git 來管理專案中的檔案版本。 git in......

Posted by kdchang on 2023-12-21

Git 入門教學筆記：從零開始學版本控制 | 學習筆記

為什麼要學 Git？在軟體開發中，版本控制是一個不可或缺的工具。Git 是目前最流行的版本控制系統，它能幫助你： 記錄每次修改的歷史紀錄 回復到任一個過去的狀態 多人協作開發不衝突 管理分支進行實驗性開發 無論是獨立開發者、團隊協作，還是參與開源專案，Git 都是你的好夥伴。 一、安裝 GitmacOSbrew install git Ubuntu / Debiansudo......

Posted by kdchang on 2023-12-21

JavaScript this 使用情境入門教學筆記 | 學習筆記

前言在 JavaScript 中，箭頭函式（arrow function）與傳統函式在 this 的行為上有一些不同。箭頭函式不會創建自己的 this，而是繼承外部作用域的 this，這就是為什麼你會遇到 this 的問題。 傳統函式中的 this在傳統的函式中，this 會指向該函式被調用時的上下文。例如，當函式作為事件處理器時，this 會指向觸發事件的元素。 function regu......

Posted by kdchang on 2023-12-21

JavaScript 多事件處理綁定使用情境入門教學筆記 | 學習筆記

前言在 JavaScript 中，你可以通過事件處理的方式來為多個 input 元素綁定事件處理器。這樣做可以讓你在父容器上綁定一個事件處理器，並通過 event.target 確定觸發事件的具體 input 元素，而不需要為每個 input 元素單獨綁定事件。 事件委派的概念事件委派是一種常見的事件處理技術，它將事件綁定到父元素或容器上，然後通過 event.target 來確定哪個子元素......

Posted by kdchang on 2023-12-21

JWT 使用好處入門教學筆記 | 學習筆記

前言JWT（JSON Web Token） 的好處在於它是輕量、跨平台、無狀態的驗證與授權機制，特別適合用於前後端分離、微服務架構與 API 驗證。以下是它的主要優點： 一、JWT 的 7 大好處1. 無狀態（Stateless）驗證 JWT 本身就包含用戶資訊與簽名，不需要在伺服器端儲存 session。 適合微服務或 Serverless 架構，因為伺服器不用記住誰是誰。 2. 跨平台......

Posted by kdchang on 2023-12-21

React 前端整合 JWT（含 Refresh Token）入門教學筆記 | 學習筆記

前言當你要將 JWT 驗證整合至 React 前端，並搭配 Refresh Token 或整合 OAuth（如 Google 登入）流程，你需要考慮前端的存儲方式、token 的更新機制，以及第三方登入的流程銜接。 以下將分成三個部分講解： 一、React 前端整合 JWT（含 Refresh Token）流程總覽： 使用者輸入帳密登入，發送 /login 請求。 伺服器簽發兩種 tok......

Posted by kdchang on 2023-12-21

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

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

FRIENDS