系列文章
DAY 2
D02 - 準備開發環境
今天的進度是準備好開發 Next.js 所需的環境，預計明天開始寫程式，後天才會有開始有一些 FP 相關內容。 安裝 VSCode 下載連結 我喜歡 port...
DAY 3
D03 - 建立靜態網頁
經過了兩天廢話，我們終於要開始寫程式啦~ ✧｡* ٩(ˊᗜˋ)و✧｡** Next.js 的首頁內容由 src/app/page.tsx 決定 const P...
DAY 4
D04 - 設計資料模型
今天我們會用以下表單作為範例來設計資料模型。 需求介紹 課程名稱與課程說明只能有英文與數字，1到50字 結束日期必須大於開始日期，開始日期大於現在日期 課程...
DAY 5
D05 - 設計工作流程
今天的目標是用 function 讓資料模型「動」起來。想像一個 function 串著一個 function ，把資料揉揉捏捏，經過一道道工序的處理最後變成我...
DAY 6
D06 - 測試驅動開發
前兩天介紹的多半是概念性的內容，相信大家已經迫不及待看到程式碼了吧 ？所以今天會從 D03/static-pages的進度開始寫扣囉 `ヽ(\´▽`)/ `...
DAY 7
D07 - 軌道導向設計
今天的目標是跟大家分享「通過昨天測試的程式以及背後的觀念」，在開始看程式碼前我們先來了解一下背景知識吧~ 如何做錯誤處理 ? 我們總是會遇到各種例外、錯誤、副...
DAY 8
D08 - 資料型別盒子
export const textInputOf = ({ minLen, maxLen }: { minLen: number; maxLen: numb...
DAY 9
D09 - 開始元件測試
前面花了不少篇幅講 FP，今天要拉回來講前端技術 - Component Testing (元件測試)。 為甚麼要寫元件測試? 說起元件測試，雖然我知道這東西好...
DAY 10
D10 - 通過元件測試
今天跟大家分享如何通過昨天寫的測試。 原始碼可以參考 D09/component-test 再次回顧整個工作流程，我們在 D06 - 測試驅動開發 把 步...