大貓的第一個家

關於我

我是 Sean，網路上常用「大貓」這個名字。從前端出發的全端工程師，主要寫 React 與 Next.js，關注效能與 SEO；後端用 Node.js（Express、NestJS）搭配 PostgreSQL，並持續往 AWS 雲端部署延伸。日常開發大量使用 Claude Code 等 AI 工具協作。

這裡從 2019 年開始記錄技術筆記，也收錄電影、遊戲等生活點滴與旅遊見聞。文章多半是學習過程的整理，有錯誤或想討論的地方，歡迎在文章底下留言。

📚 系列文章

部落格裡有幾個系列文章，建議從第一篇依序讀起；點開就能看到整個系列的文章清單。

開發心法6 篇從需求確認、設計協作到合併節奏與交接文件，小團隊裡的開發流程心得
  1. 小步合併，讓 CI 早一點說話：一次 Semgrep 掃描教我的事
  2. 設計稿還沒定案，開發可以先做什麼
  3. 需求先講清楚：User Story 與驗收標準怎麼幫團隊少走冤枉路
  4. 一個人做專案，也要寫給下一個人看的文件
  5. 領域知識太重的案子：工程師怎麼邊做邊學
  6. 跟 AI 一起寫程式：從一份 CLAUDE.md 到 Skills 跟規範
相關標籤
Understand JavaScript26 篇從執行環境、作用域、閉包到原型鏈，重新理解 JavaScript 的運作方式
  1. Understand JavaScript #0 目錄
  2. Understand JavaScript #1 How JS Reads Code
  3. Understand JavaScript #2 語法作用域 (Lexical Scope)
  4. Understand JavaScript #3 Name-Value Pair
  5. Understand JavaScript #4 Execution Context - How JS Works Behind The Scenes
  6. Understand JavaScript #5 範圍鏈 (Scope Chain)
  7. Understand JavaScript #6 Event Loop
  8. Understand JavaScript #7 型別 (Types)
  9. Understand JavaScript #8 運算子 (Operators)
  10. Understand JavaScript #9 物件實體語法 (Object Literal Syntax)
  11. Understand JavaScript #10 函式就是物件 (Functions Are Objects)
  12. Understand JavaScript #11 傳值和傳參考
  13. Understand JavaScript #12 物件 × 函式 × this
  14. Understand JavaScript #13 函式參數與 arguments、spread
  15. Understand JavaScript #14 立即呼叫的函式表達式 (IIFEs) 與安全程式碼
  16. Understand JavaScript #15 閉包 (Closure)
  17. Understand JavaScript #16 函式工廠 (Function Factory)
  18. Understand JavaScript #17 回呼函式 (Callback Function)
  19. Understand JavaScript #18 bind()、call() 與 apply()
  20. Understand JavaScript #19 Functional Programming ft. Underscore, Lodash
  21. Understand JavaScript #20 物件導向與原型繼承
  22. Understand JavaScript #21 使用建構式自定義原型
  23. Understand JavaScript #22 內建的函式建構子
  24. Understand JavaScript #23 使用 Object.create 建立多層繼承
  25. Understand JavaScript #24 ES6 Class
  26. Understand JavaScript #25 解析 toString() 方法 ft. typeof, instanceof
演算法與資料結構18 篇用 JavaScript 練習常見的演算法題目與資料結構
  1. [Algorithms] Fizz Buzz
  2. [Algorithms] Time Complexity & Big O Notation
  3. [Algorithms] Harmless Ransom Note
  4. [Algorithms] Is Palindrome
  5. [Algorithms] Caesar Cipher
  6. [Algorithms] Reverse Words in a Sentence
  7. [Algorithms] Reverse Array In Place
  8. [Algorithms] Mean Median Mode
  9. [Algorithms] Two Sum
  10. [Algorithms] Binary Search
  11. [Algorithms] Fibonacci vs. Memorized Fibonacci
  12. [Algorithms] Sieve Of Eratosthenes
  13. [Algorithms] Bubble Sort
  14. [Algorithms] Merge Sort
  15. [Algorithms] Max Stock Profit
  16. [Data Structures] Linked Lists
  17. [Data Structures] Binary Search Trees
  18. [Data Structures] Hash Tables
相關標籤
React35 篇Hooks、狀態管理、路由與元件設計的學習筆記
  1. [React] 正確地使用 State 與 useState Hook
  2. [React] Lifting The State Up
  3. Styling React Components
  4. Cleaner Code with React Fragments & Portals
  5. 關於 React Refs 的概念，以及如何 Forwarding Refs
  6. Forms in React
  7. Understanding React's useEffect Hook
  8. 更強大的 React 狀態管理工具 useReducer Hook
  9. 使用 React Context 處理全域狀態
  10. Introducing React.memo
  11. Introducing useMemo
  12. Sending Http Requests feat. Star Wars API
  13. Introduction to Class-based Components
  14. React Class-based Components 的生命週期（Lifecycle）
  15. 在 React Class-based Components 中使用 Error Boundary 處理錯誤
  16. React Code Reuse - Custom Hooks
  17. React Redux 基本配置與概念介紹
  18. React Redux with Functional Components
  19. React Redux with Class-based Components
  20. 使用 Redux Toolkit 更有效率地撰寫 Redux
  21. Redux Toolkit with Action Creator Thunk
  22. 瞭解 React Router V5 基礎知識
  23. 升級 React Router v6 筆記
  24. Deploying React Apps over Firebase Hosting
  25. 為什麼 React State 在 Event Listener 中沒有正確更新
  26. 為什麼在 Ant Design 使用 styled-components 傳遞 Boolean Props 會出現警告
  27. [React] Debouncing with useCallback Hook
  28. React Router V6 - Setup Routes
  29. React Router V6 - Fetch data with Loader
  30. React Router V6 - Form & Action
  31. 一起來試試看 NextJS 的 "useSWR" Hook 吧！
  32. React Code Reuse - Higher Order Component (HOC)
  33. 為你的 React Apps 加上動畫效果
  34. 使用 TanStack Query 輕鬆處理 HTTP Requests
  35. 把聊天室做成一個套件：Clouda 的前端架構與運作方式
相關標籤
Next.js12 篇從 Pages Router 到 App Router 的實作紀錄
  1. 基於檔案的 Next.js 頁面路由
  2. Next.js 預先渲染頁面與資料取得方式
  3. 一起來試試看 NextJS 的 "useSWR" Hook 吧！
  4. Next.js 的 "_document.js" 檔案使用紀錄
  5. 使用 Next Image 最佳化圖片
  6. 透過 Next.js API Routes 新增後端程式碼，實現 Fullstack React
  7. Next.js v12 到 v14 版本升級紀錄！有何不同？
  8. Next.js 15 Featured-based Folder Structure
  9. Next.js 15 (App Router) - Rendering
  10. 在 Next.js 中串接 Google Maps API
  11. 小步合併，讓 CI 早一點說話：一次 Semgrep 掃描教我的事
  12. 我這兩年在用的全端架構：monorepo、微服務與多租戶是怎麼組起來的
相關標籤
Vue16 篇Vue 2、Vuex 與 Quasar 的筆記
  1. Vue.js 呈現資料的幾種方法
  2. Vue.js Event Modifier
  3. Vue.js v-for 使用細節
  4. Vue.js Methods、Computed 與 Watch 的差異
  5. Vue 生命週期 (Lifecycle)
  6. Vue.js Props - 由外到內的資料傳遞
  7. Vue.js 使用 Emit 由內向外傳遞資訊
  8. Vue.js 使用 Filter 自訂資料呈現格式
  9. 使用 Vuex 管理資料狀態
  10. 使用 Vuex 模組化管理資料
  11. 客製化修改 Quasar Framework 元件樣式
  12. 在 Quasar 使用全域 Filter 過濾器
  13. Vue.js 使用 v-bind 動態綁定 Class、Style 與各種屬性
  14. 使用 vue-tribute 實作標記功能
  15. 使用 Quasar CLI 建構 SSR 網站
  16. Vue 3 Methods × Computed × Watch
相關標籤
Git6 篇基本指令、分支操作與遠端協作
  1. 基本 Command 操作與 Git 指令
  2. Git 分支、標籤、暫存檔案
  3. Git 同步遠端數據庫
  4. Git 常用指令大全
  5. Learn Git Branching - 學習 Git Branch 的小遊戲
  6. 一個人做專案，也要寫給下一個人看的文件
相關標籤
作業系統5 篇大學作業系統課程的整理筆記
  1. Operating System: Introduction
  2. Operating System: Process
  3. Operating System: Multi-programming
  4. Operating System: Scheduling
  5. Operating System: Synchronization
相關標籤
旅遊8 篇台灣各地走走，以及首爾、關西、釜山的行程與心得
  1. 台灣走走 2020
  2. 台灣走走 2021
  3. 台灣走走 2022
  4. 冬季首爾八天自由行
  5. 夏季關西八天自由行
  6. 春季首爾七天自由行
  7. 秋季釜山五天員工旅遊
  8. 冬季東京九天自由行
相關標籤

🛠️ 作品

  • 楓葉工具箱 ToolMaple

    楓之谷玩家的懷舊工具集：經典村莊 BGM、村莊巡禮、物品圖鑑、掉落物查詢與職業推薦，另附 BMI、時區、QR Code 等日常小工具，純前端即開即用。

  • 楓之谷商城 MapleStory Shop

    以經典道具為主題的電商練習作，從 2020 年的 Vue 版本一路重寫成 Next.js 前端搭配 NestJS 與 PostgreSQL 後端的全端專案。

  • 楓之谷翻卡小遊戲 MapleStory Match Cards

    30 張楓之谷主題卡片的翻卡配對小遊戲，用 React 19 與 Vite 打造，練習狀態管理與互動動畫。

📆 年度回顧

📮 訂閱與聯絡

新文章可以透過 RSS 訂閱；有任何想法或錯誤回報，歡迎寄信到 castle2668@gmail.com，或直接在文章底下留言。