跳到主要內容
Elio Lee

Technical Notes / 01

技術筆記

從實際問題出發，建立更完整的技術理解。這裡記錄前端開發、問題排查與個人專案中的技術探索，將零散的經驗整理成可以理解、驗證與重複應用的知識。

  • 問題重現 → 歸因 → 驗證
  • 可執行的程式碼範例
  • 持續整理中

最新筆記

  1. 7 min read

    實戰紀錄

    既有系統除錯思路：從重現問題到建立防護

    面對非本人撰寫的舊程式碼時，如何透過清晰的最小重現範例、斷點排查與元件解耦逐步解決問題。

  2. 8 min read

    工程品質與資安

    前端工程化與品質：測試策略、無障礙與 Web Vitals

    測試、自動化驗證、無障礙設計、效能優化與大型專案的維護思維。

  3. 9 min read

    工程品質與資安

    JWT 要存哪裡：從 localStorage 到 Cookie + CSRF Token

    比較 JWT 存在 localStorage 與 HttpOnly Cookie 的差異，說明 XSS 與 CSRF 的風險，並記錄實際專案改用 Cookie 加 CSRF Token 的做法與踩坑。

  4. 10 min read

    實戰紀錄

    用 Notion API 當 CMS：東京自由行旅遊網站的實作紀錄

    為了 9 月的東京自由行，用 Nuxt 4 做了一個旅遊行程網站，把 Notion 當成內容後台，並用伺服器路由、transformer 與快取隔開 Notion 的資料結構。

  5. 5 min read

    工程品質與資安

    同一個修改要改好幾個專案：維護多個前端的心得

    公司同時維護多個 Vue 2 與 Vue 3 前端，同一個需求常要改好幾次。整理實際遇到的問題、漏改的情況，以及什麼時候才值得抽成共用模組。

  6. 6 min read

    實戰紀錄

    在 Nuxt 網站導入 GTM 與 GA4：從載入腳本到自訂事件

    記錄在個人品牌網站導入 Google Tag Manager 與 GA4 的做法，包含延後載入、Cookie 同意機制，以及用 dataLayer 追蹤專案與聯絡行為。

  7. 9 min read

    工程品質與資安

    從退件到通過：網站無障礙檢測的修正紀錄

    網站送無障礙檢測時經歷多次退件，最後通過 A 等級。整理替代文字、標題階層、鍵盤操作、表單標籤、跳過區塊與導盲磚的實際修正方式。

  8. 6 min read

    工程品質與資安

    讓 Vuetify 日期選擇器支援鍵盤與螢幕報讀器

    無障礙改寫時遇到元件庫支援不足的日期選擇器，如何補上鍵盤操作、焦點管理與報讀標籤，並用 NVDA 驗證。

  9. 6 min read

    實戰紀錄

    頁面一片空白：路由 404、初始化 API 與重複登入

    後台系統在幾種情況下會顯示空白畫面。記錄如何補上 404 路由、調整初始化 API 的載入方式，以及處理重複登入與密碼逾期的流程。

  10. 5 min read

    實戰紀錄

    登入後回到原本的頁面：把一堆旗標收斂成一個機制

    原本每個頁面各用一個旗標記錄登入後要去哪裡，新增頁面就要多一個。記錄如何改用 Router Guard 統一處理，以及需要排除的邊界情況。

  11. 5 min read

    工程品質與資安

    弱點掃描的提醒：為什麼不要用 CDN 的 @latest

    弱點掃描回報中風險的跨網域設定問題，追查後發現來自一行 CDN 引入。記錄第三方資源的風險，以及改成自己託管的做法與取捨。

  12. 4 min read

    實戰紀錄

    我寫了姓名拆解，兩個月後把它從註冊流程刪掉

    為了讓註冊姓名支援原住民的名字，我寫了一段拆解規則。記錄這些規則的問題，以及團隊討論後決定不拆、改存單一欄位的過程。

  13. 3 min read

    Vue / Nuxt

    Dialog 按 ESC 關閉後，再也打不開

    Vuetify Dialog 用 ESC 關閉後，再次點擊卻打不開。問題出在元件內部狀態和外部狀態沒有同步，記錄原因與修正方式。

  14. 6 min read

    實戰紀錄

    OpenLayers 影像調整：CSS filter 與彈窗拖曳的互動問題

    在 OpenLayers 地圖上用 CSS filter 做即時的明暗、對比、飽和調整，並記錄彈窗內操作地圖時，後方視窗跟著移動的問題如何修正。

  15. 5 min read

    JavaScript

    從一個 TypeError 看 hasOwnProperty 與原型鏈

    新增資料類型後，地圖資料處理突然報錯。追查時順便釐清原型鏈、hasOwnProperty 為什麼要透過 Object.prototype 呼叫，以及真正造成錯誤的原因。

  16. 6 min read

    Vue / Nuxt

    Vuex 與 Pinia 的寫法差異：從 Vue 2 到 Vue 3

    比較 Vuex 3、Vuex 4 與 Pinia 在建立 store、元件取用、模組拆分上的寫法，並整理遷移時容易出錯的地方。

  17. 9 min read

    Vue / Nuxt

    Vue 2 與 Vue 3 元件生命週期與雙向綁定差異解析

    從 v-model 演進、defineModel 到 reactive/ref 踩坑實錄，整理元件實作的關鍵差異。

  18. 8 min read

    JavaScript

    JavaScript 事件循環、非同步與作用域理解

    梳理 Event Loop、Promise 微任務隊列與閉包機制的實務踩坑心得，建立清晰的底層執行模型。

Methodology / 整理方式

我如何梳理與沉澱技術問題。

在真實專案中，技術坑往往來自對邊界條件或底層機制假設不足。筆記不堆砌零碎片段，而是遵循四步流程，讓解法具備可遷移性。

  1. STEP 01

    問題重現

    排除環境雜訊，提煉最小可運行範例（Minimal Reproduction）。

  2. STEP 02

    底層歸因

    查核語言規範、框架生命週期與渲染機制。

  3. STEP 03

    修復驗證

    設計修正方案，以測試或實際操作驗證效果。

  4. STEP 04

    工程防範

    收斂為規則、元件約束或文件，避免重複犯錯。