吃水果好麻煩，買來之後洗完還要削皮去籽再切一切，但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好？在使用 Redux 跟 Context API 的...
在上篇文章中，我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具，就像人體的免疫系統，確保資料結構在...
關於容器化 在科技迅速發展的今日，部署的技術也經歷了不少的變革。從早期的物理伺服器到現代的容器化技術，每個階段都是為了追求更高效率和更好的資源利用率。 在傳統...
TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...
NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式，我們就不需要編寫繁...
Cloudinary 是一個雲端媒體管理平台，主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務，可以藉由平台上傳、儲存及管理資源，並且讓媒體資源在不...
前言 營養師不開菜單系列來到第三十天，首先謝謝有觀看到最後一天的讀者，也恭喜堅持到最後一天的你和我。在部署之後，應用程式上線後，我們就這樣結束了嗎？還是我們可...
前言 SEO，是搜尋引擎最佳化 (Search Engine Optimization) 的簡稱，是一套策略技術，幫助提升網站或網頁在搜尋引擎裡的曝光度。主要的...
前言 專案建置的最後一哩路，就是讓整個應用程式上線，而在我們的專案小作品中，需要一個平台讓我們部署，並公開網站。Next.js 的母公司 Vercel 提供了一...
食物進入身體後，經過消化系統分解為能量儲存：葡萄糖給予快速能量，而脂肪提供長期儲存。考慮資料庫時，我們也會選擇適合的“能量”來源。像葡萄糖那樣，有些資料庫適合...
React-Beautiful-DnD 是由 Atlassian 開發，也就是 Trello、Slack、Jira 的母公司，但這邊要澄清一下，雖然 Trel...
前言 在上一章節，我們對請求數據進行了深入的驗證。透過多層篩選和檢查，對於不同的驗證結果，我們已經設定了相對應的錯誤回應。但是，我們還沒有詳細探討在哪些特定情境...
前言 經過從設計到後端的細緻實作後，我們現在進入了至關重要的前端實作階段。在這個階段，我們不僅要將畫面與資料結合，更要為我們的應用程式注入靈魂。前端不僅僅是視覺...
前言 系列文到二十五天已經大致開發完成，但完成後會開始各種修改及優化，其中也包括效能的優化。效能對於前台網站是非常關鍵的。當網站載入速度緩慢時，可能會導致用戶流...
react-hot-toast 是一個專為 React 設計的輕量級通知提示（toast）套件。預設有成功、失敗、loading(Promise) 三種類型的...
Prisma 就像人體中的消化酵素 (enzyme)。就如消化酵素幫助我們分解和吸收食物中的營養，將大的複雜分子轉化為我們身體容易吸收的小分子，Prisma...
前言 Middleware 在網頁應用程式中的角色，猶如機場的安檢機制。每當我們在機場搭乘飛機時，必須經過嚴格的安檢程序，以確保旅程的安全和暢通。同理，每一個進...
前言 在開發前端應用時，不良的錯誤處理可能導致使用者困惑、挫折，甚至選擇放棄使用你的應用。所以在專案中，我們透過 try-catch 語句捕捉潛在錯誤，並使用...
接續上一篇文章，繼續將 Firebase Authentication 電話驗證的串接完成！ 關於 Firebase Authentication 的電話驗證...
在使用者成功註冊、並且角色為店家時，需先經過電話驗證才可進行刊登服務項目供顧客預約，此故事情境在這篇文章可以回顧，所以今天將重點放在電話驗證的實作上。 使用 J...
本文同步刊載於 我的個人部落格 一、Flow Chart 是什麼？ 流程圖(Flow Chart)是一種圖形化表示流程或過程的工具，通常用來展示一个系统、流...
昨天介紹完 NextAuth.js 的基本設置，但我們還需要取得第三方驗證廠商的 ID 及金鑰，每個提供者的申請方式不同，有複雜也有簡單。在 NextAuth...
本文同步刊載於 我的個人部落格 NoSQL 在 Firebase 數據庫中是如何應用的？ 在前一篇章節中，我們稍微認識了 NoSQL 這個新朋友，所以現在讓...
React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...
本文同步刊載於 我的個人部落格 從 user story 開始思考網站功能 延伸第一天的主題發想，我將自己視為使用者，站在使用者角度出發後，初步規劃網站功能...
在本系列文的第二篇「用最短時間完成 side project 規劃」中有提到，我認為規劃一個作品，一定要先將 Flow Chart 確定、且資料欄位也規劃好後，...
前言 在設計完畫面後，也大概確認了整個專案的頁面功能，在設置完資料夾結構後，就是進入前端後端實作的階段，大部分的頁面我是前後端功能同步進行，但為了避免畫面凌亂，...
前言 接續著上一篇的前端實作分享，我們介紹完 NavBar 的核心功能邏輯以及響應式設計，這篇文章中我們的焦點將轉向「登入/註冊頁面」，深入挖掘使用者認證的細節...
經過前一篇文章的操作與設定，我們已經將 Firebase 引入至 React 專案中，今天就來串接資料庫吧！ 串連 Firestore database 首先先...
本文同步刊載於 我的部落格 30天可以做什麼？ 身為一位工程師，最需要的就是以 side project 來展示自己的技能，在一年一度的鐵人賽中看見 sid...
ysl0628
Annie
iThome鐵人賽
看影片追技術