KD's Tech Blog

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

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

前言Cookie 是一種儲存在使用者瀏覽器上的小型文字檔案，用於保存使用者的狀態或資訊。常見用途包含： 紀錄登入狀態：讓使用者在網站上保持登入，不需每次重新輸入帳號。使用者偏好設定：保存使用者選擇的語言、主題等個人化設定。追蹤使用者行為：例如分析網站流量、廣告投放追蹤等。 重點摘要Cookie 依據不同的分類方式，可以分為以下幾種常見種類： 一、依用途分類： 功能性 Cookie（Funct......

Posted by kdchang on 2024-11-01

Alpine.js 入門教學筆記 | 學習筆記

1. 什麼是 Alpine.js？Alpine.js 是一個輕量級的 JavaScript 框架，專為增強 HTML 標記而設計。它的語法靈感來自 Vue.js，但更加簡潔，適用於需要簡單互動的網頁。 它的主要特點包括： 使用 HTML 屬性直接定義行為 不需要額外的構建工具 易於學習和使用 與其他框架（如 Vue、React）兼容 2. 安裝與引入使用 Alpine.js 最簡單的方法......

Posted by kdchang on 2024-10-16

整合 Tailwind CSS 與 daisyUI 的入門教學筆記 | 學習筆記

一、前言：為什麼選擇 Tailwind CSS 搭配 daisyUI？在現代前端開發中，Tailwind CSS 提供了高度自訂、原子化的 CSS class，使得開發者能夠以更模組化與語意化的方式撰寫樣式。然而，Tailwind 並不內建 UI 元件，這就使得一些常見元件（如按鈕、表單、卡片）仍需手動組裝樣式。 這時，daisyUI 就成為極佳的搭檔。daisyUI 是一個基於 Tailw......

Posted by kdchang on 2024-10-16

Web 前端效能優化入門教學筆記 | 學習筆記

前言在網頁開發中，效能優化是一個不可忽視的重要課題。無論是企業網站、單頁應用（SPA），或是電商平台，效能表現都直接影響使用者體驗與轉換率。 本篇筆記將介紹 Web 前端效能優化的核心概念、常見策略與實務範例，幫助你為專案建立良好的基礎。 為什麼需要前端效能優化？前端效能不佳會導致： 首次載入時間過長 使用者等待過久，產生跳出行為 SEO 表現不佳（Google 會參考 LCP、CLS、......

Posted by kdchang on 2024-10-16

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

Vue.js 3 官方入門語法教學筆記 [13] - Slots 插槽 | 學習筆記

Slots 插槽除了透過 Props 傳遞資料外，父元件還可以透過插槽將模板片段傳遞給子元件： <template> <ChildComp> 這是一些插槽內容！ </ChildComp></template> 在子元件中，可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容： <template> &......

Posted by kdchang on 2021-02-13

Vue.js 3 官方入門語法教學筆記 [12] - Emits 事件傳遞 | 學習筆記

Emits 事件傳遞除了接收 Props 之外，子元件也可以向父元件觸發事件： <script setup>// 宣告要觸發的事件const emit = defineEmits(['response'])// 觸發事件並傳遞參數emit('response', 'hello from child')</scrip......

Posted by kdchang on 2021-02-11

Vue.js 3 官方入門語法教學筆記 [11] - Props 屬性 | 學習筆記

Props 屬性子元件可以透過 Props 接收來自父元件的輸入。首先，子元件需要宣告它所接收的 Props： <!-- ChildComp.vue --><script setup>const props = defineProps({ msg: String})</script> 注意，defineProps() 是一個編譯時的......

Posted by kdchang on 2021-02-10

Vue.js 3 官方入門語法教學筆記 [10] - Components 元件 | 學習筆記

Components 元件到目前為止，我們只使用了一個單一的元件。實際的 Vue 應用程式通常是由巢狀元件所組成的。 父元件可以在其模板中渲染另一個元件作為子元件。要使用子元件，我們需要先匯入它： import ChildComp from './ChildComp.vue' 然後，我們可以在模板中使用該元件，如下所示： <template> <Ch......

Posted by kdchang on 2021-02-09

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

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

FRIENDS