目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
上個章節探討了單元測試是針對單個function、或是局部小功能的測試這一篇要來了解&學習關於E2E測試是什麼、要怎麼運行 E2E測試簡介 E2E測...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
用了一陣子 NX 後瞭解了些這組工具的基本功能與一些限制，這邊做個整理。 指令工具幫助執行操作與建立元件 NX 提供的 executor 與 generator...
NX 的 React 擴充有提供建立 Module Federation 架構專案的功能，來試試看。 首先簡介一下 Module Federation 架構，相...
目前為止加入工具箱的專案都是 javascript 框架，不曉得 NX 有沒有辦法搭配非 javascript 體系的框架。 來實驗看看吧，嘗試在 NX 中加入...
Astro 的特點之一，就是可以使用各家框架的元件，像是 React, Vue, Svelte 等，能夠將不同來源的元件拼合到一頁上，在 Monorepo 的架...
Astro 最近更新了 3.0 版本，來加到這個玩具箱裡試試看吧。 目前 NX 沒有官方支援的 Astro 擴充，雖然有社群版本的但還沒升級到 Astro 3....
NX 構成的 monorpeo 主要有兩種不同類型的結構，分別是 package-baed 跟 integrated ，這邊來簡介兩者的區別。 Package-...
NX 有提供擴充工具幫助快速生成專案或是元件庫的架構，像是： pnpm exec nx generate @nx/next:application 利用擴充工...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。 首先建立一個基於 Vite 的 js...
來試試看在 NX 中加入 Vue 框架的 Nuxt 專案。 首先目前 NX 還沒有針對支援 Nuxt 的擴充，所以大多步驟要手動進行。 要將 Nuxt 專案建立...
把 Next.js 專案部署上 Vercel 非常簡單，註冊帳號後選擇連動的 Github 帳號，然後建立 project 選擇要部署的 Repo ，搭配 Ve...
NX 可以同步執行多個 target ，並且會依據這些 target 的 dependency 依序執行，這個行為也被稱作 task pipeline，圖解會像...
上一篇提到了 NX 可以顯示專案間的依賴關係，這邊的依賴關係分兩種，project 跟 target 。 project 之間的依賴關係主要由 NX 掃描整個程...
NX 提供了很多的工具，相應的有很多指令，到目前為止建立 project 、添加 storybook 功能、測試，這些都有不同的指令跟選項，而且 NX 可以配合...
NX 的 Next 模板在建立時已經預設有 Jest 跟 React Testing Library ，可以直接寫測試。 import { render } f...
為確保程式碼的格式一致，並且 typescript 的型別都有好好定義跟參照，打算加上 husky 在提交時用 prettier, eslint 跟 tsc 做...
網頁常見的功能之一就是表單，像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能，另外最好還有前端能事先對表單的輸入內容進行檢查，通過後才發給後端。...
MUI 有自己的樣式主題系統，tailwind 也有，為了防止之後再套用樣式的時候兩邊出現偏差，要來想辦法同步兩邊的設定。 首先建立好 MUI 的自訂主題。 /...
現在有了 MUI ，還有跟其相搭配的 emotion，樣式的調整上已經很方便了，但是目前 NextJS 已經開始預設使用 React Server Compon...
現在是把元件從專案中獨立出來了，但還只能從專案上去看到元件所呈現的結果，為了之後開發元件方便，來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...
目前的元件還放在 ironman-nextjs 這個 app 底下，也只有這個 app 能取用到這些元件，為了讓之後的專案可以一起運用這些元件，接下來要把他們抽...
首先是元件庫，目前用的最順手的是 MUI ，先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...
開發累積了些經驗後已經有一些用著趁手的套件，也做了一些將這些套件封裝後的工具，開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...
在上一篇，建立起一個Angular+Nestjs的Nx專案，那麼這一篇就要來好好介紹什麼是Nx。 安裝Nx擴充套件 在認識Nx之前，建議安裝Nx官方的vs co...
前幾篇講的大多都是想法與概念，都還沒有講到跟程式面有關的東西。接下來進入工程的世界了。 在聊到想法與構想的時候，可以非常天馬行空，什麼樣的問題跟什麼樣的解決方案...
一宵三筵
Jasper
tso1158687
iThome鐵人賽
看影片追技術