CWChi Wuinhannah1120.hashnode.dev·Nov 15, 2025 · 5 min read使用 TansTack 的 infinite Queries 與 TanStack Virtual 製作 grid 排列的虛擬滾動讀取最近遇到一個需求，UI 為 grid 排列的格狀列表，每個物件可以透過 api 分頁得到。 所以初步分析： 需要根據螢幕斷點，渲染一列不同行數的 grid 需要與 api 進行分頁讀取，每次傳送 page, page_size 列表最大值會非常多，預防 dom 太多造成畫面卡頓，需要使用虛擬滾動 因最近專案多有引入 TansTack ，分頁讀取的部分會用 infinite Queri00
CWChi Wuinhannah1120.hashnode.dev·Aug 31, 2025 · 2 min read使用 bgprogress ， 在 Next.js App router 實現跨頁跳轉的進度條最近專案使用到 Next.js App router，在 UX 體驗上常常有一種很卡的感覺，點擊連結時會有延遲後才會跳轉。這是因為 App Router 渲染機制的原因， 使用 Next Link 或 router.push() 時 App Router 路由切換是漸進式的，當點擊連結時，會有一段資料獲取（Data Fetching）與渲染（Rendering）的過程，跳轉過去時才看到 Hydra00
CWChi Wuinhannah1120.hashnode.dev·Mar 22, 2025 · 2 min readReact官方文件導讀|為什麼我們需要ServerComponent這已經是 2020 年 12 月 React 官方公佈 RSC (React Server Componet) 時的文章，以前端世界的更新速度來說是很久遠的資料，但可以讓第一次接觸 RSC 的開發者明白為什麼會創造出這項更新。 主要引用內容皆來自於🔗 2020/12/21-Introducing Zero-Bundle-Size React Server Components 並且整理該 Yo00
CWChi Wuinhannah1120.hashnode.dev·Jun 16, 2024 · 1 min read專案筆記|2024 六角學院NodeJS 入門班結業終於把三個月左右的直播班上完，並繳交期末作業了，趁記憶還猶新時把這次直撥班的作業記錄下來。 前言動機 從今年開始比較積極為了累積作品開始做side project，但目前線上有的開源API 能做寫入的實在太少，且雖然工作上有與後端工程師配合所以大概有DB與Modal的概念，但還是希望自己能親自寫過一次CRUD，所以報名了今年六角學院Node.js入門班，也趁機拿一個前後端較為完整的side Pro00
CWChi Wuinhannah1120.hashnode.dev·Feb 4, 2024 · 5 min read影片筆記|如何優雅地避免程式碼巢狀筆記來自於今天晚放學的Youtube影片，收穫非常大！但影片速度很快，希望自己把程式碼保存下來一份仔細閱讀與進行額外的筆記✏️。 前言 當我們程式碼超過三層的縮排，說明你的程式碼已經開始混亂： // Typescript 申請適合的職位 function applyForSuitablePosition(positions: Array<JobPosition>): void { fot (lef position of positions){ if(position....00
