iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

從 Next.js 開始的 Functional Programming 系列

從建立一個全新 Next.js 專案開始,一邊實作一邊介紹 FP 工具用法與觀念

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊震驚
DAY 1

D01 - 前言

自我介紹 大學開始接觸 Web,研究所也陸續有在寫產學計畫的網頁,用過 XAMPP, Django, Vue, Sprint Boot, Express,...

2023-09-16 ‧ 由 RichardW 分享
DAY 2

D02 - 準備開發環境

今天的進度是準備好開發 Next.js 所需的環境,預計明天開始寫程式,後天才會有開始有一些 FP 相關內容。 安裝 VSCode 下載連結 我喜歡 port...

2023-09-17 ‧ 由 RichardW 分享
DAY 3

D03 - 建立靜態網頁

經過了兩天廢話,我們終於要開始寫程式啦~ ✧。* ٩(ˊᗜˋ)و✧。** Next.js 的首頁內容由 src/app/page.tsx 決定 const P...

2023-09-18 ‧ 由 RichardW 分享
DAY 4

D04 - 設計資料模型

今天我們會用以下表單作為範例來設計資料模型。 需求介紹 課程名稱與課程說明只能有英文與數字,1到50字 結束日期必須大於開始日期,開始日期大於現在日期 課程...

2023-09-19 ‧ 由 RichardW 分享
DAY 5

D05 - 設計工作流程

今天的目標是用 function 讓資料模型「動」起來。想像一個 function 串著一個 function ,把資料揉揉捏捏,經過一道道工序的處理最後變成我...

2023-09-20 ‧ 由 RichardW 分享
DAY 6

D06 - 測試驅動開發

前兩天介紹的多半是概念性的內容,相信大家已經迫不及待看到程式碼了吧 ?所以今天會從 D03/static-pages的進度開始寫扣囉 `ヽ(\´▽`)/ `...

2023-09-21 ‧ 由 RichardW 分享
DAY 7

D07 - 軌道導向設計

今天的目標是跟大家分享「通過昨天測試的程式以及背後的觀念」,在開始看程式碼前我們先來了解一下背景知識吧~ 如何做錯誤處理 ? 我們總是會遇到各種例外、錯誤、副...

2023-09-22 ‧ 由 RichardW 分享
DAY 8

D08 - 資料型別盒子

export const textInputOf = ({ minLen, maxLen }: { minLen: number; maxLen: numb...

2023-09-23 ‧ 由 RichardW 分享
DAY 9

D09 - 開始元件測試

前面花了不少篇幅講 FP,今天要拉回來講前端技術 - Component Testing (元件測試)。 為甚麼要寫元件測試? 說起元件測試,雖然我知道這東西好...

2023-09-24 ‧ 由 RichardW 分享
DAY 10

D10 - 通過元件測試

今天跟大家分享如何通過昨天寫的測試。 原始碼可以參考 D09/component-test 再次回顧整個工作流程,我們在 D06 - 測試驅動開發 把 步...

2023-09-25 ‧ 由 RichardW 分享