技術 營養師不開菜單的第十六天 - TypeScript 不夠？使用 Zod 做型別驗證

在上篇文章中，我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具，就像人體的免疫系統，確保資料結構在...

技術 Day14：將 Firebase 加進 React 專案之前置準備

比賽好快進到中間時期，剛好適逢中秋佳節與教師節，先祝各位佳節愉快、順利完賽！ 這個連假應該會將專案的元件都完成，並且將註冊、登入與基本頁面先行組裝，後續樣式細節...

技術 營養師不開菜單的第十五天 - 為什麼從 Formik 跳槽到 React-Hook-Form

React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...

技術 營養師不開菜單的第十四天 - 為什麼要用 React-Beautiful-Dnd 做拖曳效果

React-Beautiful-DnD 是由 Atlassian 開發，也就是 Trello、Slack、Jira 的母公司，但這邊要澄清一下，雖然 Trel...

技術 營養師不開菜單的第十三天 - 不需要 React Provider 管理狀態的 Zustand

吃水果好麻煩，買來之後洗完還要削皮去籽再切一切，但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好？在使用 Redux 跟 Context API 的...

技術 營養師不開菜單的第十二天 - OAuth 權限申請：Facebook、Twitter、Google 及 Github

昨天介紹完 NextAuth.js 的基本設置，但我們還需要取得第三方驗證廠商的 ID 及金鑰，每個提供者的申請方式不同，有複雜也有簡單。在 NextAuth...

技術 營養師不開菜單的第十一天 - NextAuth 開箱即用的身分驗證套件

NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式，我們就不需要編寫繁...

技術 Day10：使用 Wireframe 線稿拼接網站的功能與畫面(四)

有了服務項目後，顧客已經可以開始預約，進入這個網站的重頭戲。上一篇文章中，眼尖的朋友們一定會發現，對比原先的 Flow Chart 後，好像少了「顧客預約當下沒...

技術 營養師不開菜單的第十天 - 為什麼要用 Tailwind CSS + Headless UI

TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...

技術 Day09：使用 Wireframe 線稿拼接網站的功能與畫面(三)

上一篇我們已經完成了兩種主角色的註冊與登入畫面，也有將 Flow Chart 中所提到的店家角色稍微提及(如果忘記規則的話，可以回頭看下列文章)。本篇將重點放在...

技術 營養師不開菜單的第九天 - 新世代 ORM 工具 Prisma 現學現賣

Prisma 就像人體中的消化酵素 (enzyme)。就如消化酵素幫助我們分解和吸收食物中的營養，將大的複雜分子轉化為我們身體容易吸收的小分子，Prisma...

技術 Day08：使用 Wireframe 線稿拼接網站的功能與畫面(二)

有了主畫面後，我習慣先從主功能將 Wireframe 線稿依照原先的 Flow Chart 畫出來，細節功能會陸續繪製(有先想到的會以 Todo 標示)，並於後...

技術 營養師不開菜單的第八天 - 為什麼要用 MongoDB

食物進入身體後，經過消化系統分解為能量儲存：葡萄糖給予快速能量，而脂肪提供長期儲存。考慮資料庫時，我們也會選擇適合的“能量”來源。像葡萄糖那樣，有些資料庫適合...

技術 Day07：使用 Wireframe 線稿拼接網站的功能與畫面(一)

在本系列文的第二篇「用最短時間完成 side project 規劃」中有提到，我認為規劃一個作品，一定要先將 Flow Chart 確定、且資料欄位也規劃好後，...

技術 Day06：依照 Firebase 數據庫規劃專案資料欄位

本文同步刊載於 我的個人部落格 NoSQL 在 Firebase 數據庫中是如何應用的？ 在前一篇章節中，我們稍微認識了 NoSQL 這個新朋友，所以現在讓...

技術 Day05：Firebase 服務中的資料架構

本文同步刊載於 我的個人部落格在規劃專案之資料表前，想先插播介紹關於 Firebase 的資料庫運作原理，此部分並不影響專案規劃之順序，因為這是在規畫專案前也...

技術 Day04：side project 必備的 Flow Chart(二)

本文同步刊載於 我的個人部落格 針對網站角色將 Flow Chart 再延伸 上一篇文章中有提到，此次專案主要區分兩個角色，本篇將針對「顧客」角色進行 Fl...

技術 Day03：side project 必備的 Flow Chart(一)

本文同步刊載於 我的個人部落格 一、Flow Chart 是什麼？ 流程圖(Flow Chart)是一種圖形化表示流程或過程的工具，通常用來展示一个系统、流...

技術 Day02：用最短時間完成 side project 規劃

本文同步刊載於 我的個人部落格 從 user story 開始思考網站功能 延伸第一天的主題發想，我將自己視為使用者，站在使用者角度出發後，初步規劃網站功能...

技術 Day01：在 side project 開始之前

本文同步刊載於 我的部落格 30天可以做什麼？ 身為一位工程師，最需要的就是以 side project 來展示自己的技能，在一年一度的鐵人賽中看見 sid...