KD's Tech Blog

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

JavaScript 練習挑戰紀錄 | 學習筆記

Longest Word當我們執行 paragraph.match(/[a-z]+/gi) 時，這段 JavaScript 程式碼的意思是： 目的：從 paragraph 字串中找出所有連續的英文字母（不分大小寫）組成的片段，並以陣列形式回傳。 語法拆解：paragraph.match(/[a-z]+/gi) 部分 意思 paragraph 要處理的字串（變數名） .ma......

Posted by kdchang on 2018-02-01

Jest 使用 ES Module 入門教學筆記 | 學習筆記

前言在 JavaScript 開發中，ES Modules (ESM) 已成為標準。從 Node.js 12 開始，ESM 已獲得原生支援，而前端開發（如 React、Vue、Svelte 等框架）早已全面採用 ES Module。然而，當我們使用 Jest 來撰寫與執行測試時，若要直接使用 ES Module，會遇到一些設定上的挑戰。本篇筆記將說明如何在專案中讓 Jest 正確執行 ES ......

Posted by kdchang on 2018-02-01

Jest AAA 測試原則入門教學筆記 | 學習筆記

範例測試：saveMoney 方法atm.js： class ATM { constructor(balance) { this.balance = balance; } saveMoney(amount) { if (amount <= 0) { throw new Error('Amount m......

Posted by kdchang on 2018-02-01

Google Lighthouse 介紹與入門教學筆記 | 學習筆記

一、什麼是 Lighthouse？Google Lighthouse 是 Google 開發的開源自動化工具，主要用來評估網頁的品質，包含 效能 (Performance)、無障礙 (Accessibility)、最佳化 (Best Practices)、SEO、漸進式網頁應用 (PWA) 等五大面向。透過 Lighthouse，開發者可以快速找到網站問題與優化建議，幫助網站在使用者體驗與搜......

Posted by kdchang on 2018-02-01

Progressive Web App（PWA）入門教學筆記 | 學習筆記

一、前言在行動裝置普及的今天，使用者越來越期待 Web 應用程式能提供與原生 App 相近的使用體驗。然而，傳統 Web 應用程式在離線支援、效能與通知推送等方面仍有所不足。為了彌補這些缺點，Progressive Web App（PWA） 應運而生。 PWA 結合了 Web 技術與原生 App 的優勢，使網站具備離線可用、快速載入、可安裝、推播通知等功能，進而提升使用者體驗與互動黏著度。對......

Posted by kdchang on 2018-02-01

React Compound Component 模式介紹與入門教學 | 學習筆記

前言在開發大型或複雜的 UI 元件時，傳統的 props 傳遞方式很容易導致元件層層嵌套、可讀性差與維護困難。Compound Component（複合元件）是一種設計模式，能提升 React 元件的可組合性與彈性。它讓父元件扮演「邏輯控制中心」的角色，子元件則能共享上下文資訊，專注於呈現。這種模式常見於設計系統或第三方 UI 套件（例如：<Tabs>、<Accordion......

Posted by kdchang on 2018-02-01

SQL 入門語法教學筆記 | 學習筆記

SQL 是操作關聯式資料庫使用的語法。以下介紹常用 SQL 入門語法： 一、資料庫基本概念資料庫 (Database)：儲存資料的容器。資料表 (Table)：儲存資料的表格，每列 (row) 為一筆紀錄，每欄 (column) 為一種資料屬性。 二、基本 SQL 語法1. 建立資料庫CREATE DATABASE my_database; 2. 使用資料庫USE my_database......

Posted by kdchang on 2018-02-01

將 Vue 3 應用部署到 GitHub Pages 入門語法教學筆記 | 學習筆記

要將 Vue 3 應用部署到 GitHub Pages，這裡有一個詳細的步驟說明，指導你如何使用 gh-pages 部署你的應用。 1. 安裝 gh-pages 套件首先，你需要安裝 gh-pages 套件來將你的專案部署到 GitHub Pages。 在專案目錄中執行以下命令： npm install --save-dev gh-pages 2. 配置 vite.config.js為了將......

Posted by kdchang on 2018-02-01

JavaScript ES6 入門語法教學筆記 | 學習筆記

ECMAScript 6 又稱 ECMAScript 2015，是 JavaScript 語言的新一代標準，讓 JavaScript 可以更容易撰寫大型複雜的應用程式並避免不必要的錯誤。 以下介紹常用 ES6 入門語法： 一、let & const 變數宣告 let：用於宣告變數，可重新賦值。 let name = 'John';name = 'Mike......

Posted by kdchang on 2017-02-01

Web 資訊安全（Security）簡明入門教學指南

前言隨著越來越多的服務和資料連上網路，Web 資訊安全已經是 Web 開發中一個重要的環節，然而許多開發者往往希望專注在應用程式的研發，而忽略了資訊安全的重要性。不過若是沒有嚴謹地考慮資訊安全的問題，等到事情發生後反而會造成更嚴重的財務和名譽上的損失。本文希望整理一些 Web 常見資訊安全（Security）的議題和學習資源和讀者一起教學相長，下次建構網路服務時可以更留心 Web 的資訊安全......

Posted by kdchang on 2016-10-10

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

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

FRIENDS