鐵人檔案
現在每個網站幾乎都需要登入系統，但你對登入的運作了解多少呢？
在這 30 天，我們將一起使用 React 與 TypeScript 從零打造完整的登入系統，逐步學會表單驗證、狀態管理、社群登入與 Token 流程。
如果你也想挑戰自己，跟我一起踏上這段 30 天的學習旅程吧！
登入功能幾乎是每個網站必備的核心，但你真的了解它是怎麼運作的嗎？ 哈囉！ 我是正在經歷 "畢業即失業" 的求職者🤣，目前正朝著競爭激烈的前端...
鐵人賽在今天正式啟程啦🤩！建立新專案，打好基礎是最重要的一步。這也迎來這30天中的第一個主題 — 「打造地基」，這篇內容在網路或歷屆鐵人賽文章中都有非常多資源，...
上一篇我們已經建立好 React + TypeScript 的新專案環境了，但這還只是開始😌。這篇會是初始化專案的重要關鍵，我們要來聊聊 Vite 預設專案裡尚...
上一篇，我們將整體專案做好了初始化，TypeScript 與 ESLint 都能夠正常運作了😌。那麼接下來就要迎接新篇章 — 起大厝。不是哦 不是這樣哦，我們的...
上一篇我們利用 Tailwind 打造了登入頁的基本樣貌，但光有門面還不夠，若沒有鎖與防護，這扇大門依然不安全😣。本篇我們將引入 React 生態系的函式庫進行...
上一篇我們替登入頁加入了基本的驗證功能，但隨著功能增多，程式碼也開始變得雜亂，閱讀與維護的成本逐漸升高🫠。在本篇中，我們會透過 組件化 ( Componenti...
在上一篇我們完成了登入頁的組件化設計，讓程式碼更易於維護。既然基礎結構已經打好，接下來就能專心加入更進階的功能了🥳。這一篇，我們要把表單驗證的部分徹底完成，延續...
在上一篇，我們完成了登入表單的驗證，算是裝好了「基本門鎖」。但如果你常用現代網站或 App，應該會發現：許多平台除了傳統帳號密碼之外，還提供了「社群登入」選項。...
在上一篇，我們加入了「社群登入」，讓使用者不用每次都輸入帳密，就能快速登入。而這一篇會是「 房門與門鎖 」的最後一個篇章🤩，我們要把整體流程補齊，並加點小巧思，...
在上一篇的「房門與門鎖」篇章中，我們已經完成了登入 / 註冊表單的設計，讓使用者能夠順利進出這棟「房子」🙂。但光是蓋好門，還不足以保證整體的品質。接下來就要進入...
