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