2026-06-27
【AI工具】算力自由：為什麼你該用 Ollama 幫 Claude Code 換上「地雲雙軌」的大腦？
說真的，每次看到 Claude Code 的教學文，開頭永遠都是「先去 Anthropic 官網申請 API Key」。但你有沒有想過：我們是不是從一開始就把自己鎖進了一個框框裡？
Blog
文章與筆記
分享前端實作、AI 整合與工程落地的心得與筆記。
2026-06-26
【AI工具】擺脫軟體綁架：為什麼你該改用 Markdown 作為日常筆記格式
不論你現在習慣用什麼數位工具，改用 Markdown (MD) 檔，能讓你徹底擺脫軟體的機制限制，實現資料跨平台且永久保存。
2026-04-29
【LLM應用】第三關：運維評估——批次運行過程中不知道AI做錯了怎麼辦？
你有沒有遇過這種狀況：丟了一批資料進去跑，等它慢慢處理，等了二十分鐘，打開結果一看——
2026-04-17
【LLM應用】第二關：工程落地——開始用架構馴服模型
還記得阿哲嗎？上一篇他把閱讀筆記助理的 Pipeline 架起來了，跑得很開心。
2026-04-16
【LLM應用】第一關：管線編排——先把積木想清楚，再談運行效果
你有沒有遇過這種狀況：prompt 寫得好好的，跑了幾次都沒問題，突然某一次輸出就歪掉了。
2026-04-11
【LLM應用】做 LLM 應用，你在第幾關？
「LLM 應用開發」這個詞，最近是不是感覺被寫爛了？
2025-11-20
【AI工具】從苦行僧到指揮家：前 AI 時代碼農的 Vibe Coding 思維修煉紀錄
你還記得以前被一個 Bug 卡到半夜，在 Stack Overflow 翻了十幾頁、對著官方 Doc 逐字咀嚼的苦行僧日子嗎？
2025-08-22
【React開發中】Barrel File 實戰筆記：整理Components不煩惱
我又浮出水面了，最近一年真的是太忙了．．．（淚 分享一件我在開發React 專案的時候常遇到小麻煩：組件多了之後，import 路徑會變得又長又亂。
2024-10-22
【React News】 緊急插播! Next.js 15 on the road ! (已Stable)
前端技術光速發展 ，Next.js 15 就要來了！各位還記得去年這個時候，我們才在討論 Next.js 14 帶來的改變。結果一年過去，Next.js又把15版推上stable了！我知道很多人可能才剛學會 Next.js 14，或是專案才剛升級完，現在看到新版本可能會想：...
2024-08-21
【Next.js專案】購物網站建構_Layout
Next.js 的 layout 就像是一間房子的基本格局。想像你在蓋房子：主要結構：layout 就是房子的主要結構 — 牆壁、屋頂和地板。這些是每個房間都會用到的基本元素。共用空間：像是客廳或走廊，代表網站上面共用的部分，如導航欄或頁尾。
2024-08-21
【Next.js專案】購物網站建構_建立架構
在建構一個完整的多頁式網站時，首先要先構思一下：我們需要哪些主要頁面？之前，我說過要寫一個簡單的購物網站專案，現在就是出發的時候了！本專案使用Next.js + TailwindCSS建構，因此使用create-next-app專案建立時，記得要選擇TailwindCSS的...
2024-03-01
【React 開發中】從Next.js發展史看技術發展加速度
想起我之前的一篇文章：【React News】Next.js 14!!?講到的，我前一版還沒摸熟，後面的新版本又出來了？
2024-02-29
【無關Coding】人生能擁有什麼？
最近聽到一個故事是這樣的：一個男人走到了生命的盡頭，神提著一卡皮箱來到他面前。「走吧！孩子！」『我還有很多事情沒有完成』男人說道「這也是沒有辦法的事，時間到了…」神說『那皮箱內是什麼？』「你的遺物」『是我努力賺來的錢跟衣物嗎？』「不是，那些不是你的，那是屬於地球的。」『那是...
2024-02-27
【Next.js】框架基礎說明
「React是個優秀的前端框架。」這句話其實不正確。 React嚴格上算是一個library，因為他只有提供功能，但是專案中具體檔案跟檔案之間的相對位置，以及彼此間一些硬性的命名與撰寫規定等等，都無太多規範。所以說他是框架，其實只是方便與vue跟angular並提的說法而已...
2024-02-27
【React作品集】Todo List專案 part.4
今天我們要來加入既有Todo事項的修改功能。若您是第一次到這來，請先至：【React作品集】Todo List專案 part.1 。 我們這次要達成的效果如上面的GIF所示，點選既有todo項目，就可以修改內容，並且儲存起來。
2024-02-24
【React News】React 19 is Coming !
稍稍盤點一下新的改版內容，根據React Team的Andrew Clark 的在Ｘ上的推文： 我的感想幾點如下： 在改動中項目，我最感動的是React因為Compiler的加入將變得更聰明，可以輕鬆解決頁面冗余渲染的問題，而開發者們總算可以擺脫useMemo跟useCal...
2024-02-23
【React作品集】Todo List專案 part.1
今天開始新的系列文章 — 【React作品集】，希望帶著大家一步步建構起一個簡單可運行的React專案。本系列第一個主題是Todo list。 首先我們先建構起一個新的React專案，這邊使用vite： 接著把App.tsx的JSX return內容，以及App.css、index.css內容全部刪除（不要刪掉檔...
2024-02-23
【React作品集】Todo List專案 part.2
本次，我們要來改變Todo List資料流的狀態，並產生與使用者間的互動機制。若您是第一次到這來，請先至：【React作品集】Todo List專案 part.1 開始看起。
2024-02-23
【React作品集】Todo List專案 part.3
在這個階段，我們要讓前端的資料狀態可以被儲存起來。若您是第一次到這來，請先至：【React作品集】Todo List專案 part.1 。由於涉及到後端API的部分篇幅太大了，因此我先以用戶端的localStorage 來操作。
2024-02-22
【React 新手村】在2024年學React！
每年都會有大量的類似標題的文章，似乎都被寫爛了。雖然如此，還是想要跟大家分享，我認為在2024年要入坑React的學習地圖 首先在一開始，若是連HTML都還不會的話，建議先從最基礎的線上BootCamp課程開始。
2024-02-20
【React-Vue】輸入欄位的資料綁定 (v-model)
我們時常需要依照輸入的內容更改網頁狀態（State）（如變換文字內容或背景顏色等）。在React中，若要綁定使用者輸入欄位的資料到狀態值上，我們可以這樣寫： 效果如上方GIF所示。只要改變<input>的內容，就會讓顯示出來的名字不同。
2024-02-19
【React-Vue】Vue.js的state管理-Ref()與DOM
之前，一位精通Vue的前端前輩對我說：「React開發者不就只會用一堆的useState嗎？」。
2024-01-20
【React開發中】2024的React怪怪的？
哈囉，今天是假日，出門看球的同時，也想要跟大家聊聊對React未來發展的看法 我的前端恩師麥西米連（Maximilian Schwarzmüller）在兩天前發了新的影片，他說React最近變得怪怪的，原始影片請看這裡。
2024-01-10
【React-Vue】List Rendering with Vue.js
之前我們討論過React的List Rendering，有Vue的愛用者會對React用戶表示：「這也太不優雅了吧！！！」今天我們就來看看Vue.js怎麼渲染一串資料。（有關React的List Rendering，參考：【React 新手村】如何簡單快速渲染一串資料在頁面上？
2024-01-09
【React-Vue】重複使用的components組件
試想今天你希望某個頁面上的組件（components），有個固定套版來統一視覺感受的話（例如對話框、訊息提示欄位等），那前端框架一定可以幫到你。因為高度可重複性使用的組件，是每個前端框架都重視的事情。
2024-01-09
【React 新手村】如何簡單快速渲染一串資料在頁面上？
這勉強算是個前端術語，每當我們從API fetch資料回來時，有非常高的機率會有很多筆資料。通常多筆資料都會被裝載在Array裏面，我們就需要一筆筆地拿出來把它渲染在頁面上。
2024-01-08
【React 新手村】如何優雅地控制頁面組件
故事發生在一個前端工程師小明的日常工作中。小明正在開發一個電子商務網站，他的任務是在商品列表頁面中顯示每個商品的價格，但問題是，除了商品價格會浮動之外，有時還會碰到商品未定價的問題，那該如何解決呢？
2024-01-08
【React新手村】useEffect要幹嘛？
有個故事是這樣的，有一位名叫尤莉的工程師，她最近被推派負責公司的前端專案。這個專案是一個複雜的前端應用程式，採用了React 框架。 尤莉是一位有經驗的工程師，但而她之前並沒有太多的React經驗。在她開發功能時，遇到了些資料呈現上的問題。
2024-01-05
【React-Vue】Vue components
如同React，Vue.js也可製作重複使用的網頁元件component，在Vue初始專案中的components資料夾就是提供給我們放至網頁子元件的空間。（當然若您很反骨也可以放置在自己喜歡的資料夾內。
2024-01-05
【 React新手村】 React Props-Part.1
當你開始學習 React 時，理解 “props” 的概念是很重要的。本文將為初學者解釋 props 的意義和用法，並提供範例來幫助你更好地理解。
2024-01-04
【React-Vue】Vue.js起手式
Vue.js是許多台灣前端設計人員的首選前端框架，擁有學習曲線平緩，語法精簡易用的優點。我們來建構一個新的Vue.js專案，以React開發者的眼光，淺嚐一下Vue的威力吧！ 接著進入該資料夾安裝npm上的所有相依套件： 最後我們的vue專案就初始設定完成啦！
2023-12-26
【React 新手村】千萬不要這樣使用useState!
下面的案例有個錯誤，您可以把它找出來嗎？ 答案是 setCount(count + 1) 這段寫錯了。
2023-12-01
【React新手村】What is Redux?
若大家有經手過稍微大一點的專案，就會發現跨元件的狀態管理架構是很重要的。它讓每個元件透過一兩行的代碼就可以共享同一個狀態（例如：使用者資訊、購物車內容），讓頁面的更新與炫染有更加一體性的呈現。 我們除了可以選擇React內建的context進行狀態管理外，Redux是很多業界高手的選擇。 在Redux的官網上寫道...
2023-10-27
【React News】Next.js 14!!?
驚天地泣鬼神！Next.js 13 都還沒學透，現在Next.js 14要出來了！？ 驚天地泣鬼神！Next.js 13 都還沒學透，現在Next.js 14要出來了！？ 在今年，我一直苦於習慣next.js 13帶來的變革（app route，就是在說你）。
2023-06-30
Mastering Side Effect Control in React.js
React.js, with its declarative and component-based approach, provides a powerful way to build dynamic user interfaces. However, when working with external data or performing operations that have side effects (such as fetching
2023-05-23
Demystifying React.js State: A Comprehensive Guide
In React, state represents the current condition or data within a component.
2023-05-20
Mastering React.js: Understanding the Virtual DOM
The Virtual DOM is at the heart of React's efficiency. It's a lightweight copy of the actual DOM,
2023-04-19
【React 新手村】Hooks-useState()
React Hooks的辨認方式就是使用use開頭的名稱，像useState就是React工程師最常使用的Hooks之一，也是建構一個互動式React網頁的必要元素。 顧名思義，useState就是用來控制『狀態』的。但非資訊相關領域出身的我當時就有個疑惑：「什麼是狀態？」。
2023-03-27
【React 新手村】Hooks
又來到React時間，也是我最愛的主題。 Hooks是現代React Developer最容易掛在嘴邊的事物，一個好的Hooks讓前端資料與渲染控制變得方便又容易，但什麼是Hooks？ 它是React 16.8版本之後加入的新事物，時間點在2018~19年，在這之前的React壓根沒有Hooks這玩意兒。許多身經...
2023-02-03
Mastering React.js: A Comprehensive Guide
React.js has revolutionized the way we build user interfaces. Deve
2022-11-24
【React 新手村】Props
延續上一篇的內容 在上述Code，<Todo>標籤中的No1~No3如何分別被各自的Component接收?這就必須要針對Component內容進行編輯了。
2022-11-24
【React 新手村】React Component基礎介紹
React這個框架最重要的概念就是Component，因此我想由此開始。 為什麼回頭寫這樣的新手內容呢？原因是我看到自己在Notion上面的筆記實在欠整理。再加上，這些都是我還在探索時期寫的筆記（而且是以一個超級小白的觀點），若是可幫助到剛接觸到 React的夥伴，相信也是非常棒的事情。 現代的React頁面是藉...
2022-08-26
React 的初心者起手式
在剛導入React的初期，很多前輩會建議使用像create-react-app這樣的build tools，簡單地在terminal輸入npx create-react-app，一切事情就像魔法一樣自動發生，它就好了！