iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 636 瀏覽

鐵人賽 Modern Web DAY 12

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 12 篇

技術 [Day 12]我也好想成為時間管理大師(前端篇)

挑戰目標: MockNative Camp 挑戰還沒過半就已經覺得自己債越積越深了...今天要來挑戰實作Footer(原本我們可以從開發者工具看到footer...

Moscle.dev ‧ 2021-09-27

0 Like 0 留言 611 瀏覽

鐵人賽 Modern Web DAY 5

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 5 篇

技術 [Day 5]新手村外的首戰是史萊姆應該是定番吧

今天我們來完成Header，不過位置方面我是使用Tailwinds CSS，要花時間客製化位置，但我沒那麼多時間所以沒辦法對的很準，請看官們見諒。這是Nati...

Moscle.dev ‧ 2021-09-20

0 Like 0 留言 610 瀏覽

鐵人賽 Modern Web DAY 4

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 4 篇

技術 [Day4]專案始動-續(前端篇)

今天我們繼續來設定我們的架構，首先先把index.js的預設內容給刪除掉。透過檢視原始碼，可以取得title以及icon，整理一下之後index.js imp...

Moscle.dev ‧ 2021-09-19

0 Like 0 留言 605 瀏覽

鐵人賽 Modern Web DAY 28

React 走出新手村系列第 28 篇

技術 React 走出新手村 — Next App Router

App Router 那我們來說說 app router 的機制吧！App Router 是 Next 13 新介紹的一種 routing 方式，與之相對過去的...

LucianoLee ‧ 2023-09-28

0 Like 0 留言 599 瀏覽

鐵人賽 Modern Web DAY 15

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 15 篇

技術 [Day 15]吶吶，還有一半別想跑(前端篇)

挑戰目標: MockNative Camp 今天繼續來製作我們的Footer，目標前兩天我們已經將這些顯示文字都寫入到config中next.config.j...

Moscle.dev ‧ 2021-09-30

1 Like 0 留言 595 瀏覽

鐵人賽 Modern Web DAY 22

深入淺出，完整認識 Next.js 13 ！系列第 22 篇

技術 Day 22 - 功能性路由 ( 二 )：Parallel Routes & Intercepting Routes

假如我們今天要做一個 dashboard，頁面上包含全域共用的 Header，以及數據分析和團隊介紹兩個區塊，大致 layout 如下：很直覺地，可能...

S.C ‧ 2023-09-22

0 Like 0 留言 589 瀏覽

鐵人賽 Modern Web DAY 9

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 9 篇

技術 [Day 9]人不作死就不會死(前端篇)

挑戰目標: MockNative Camp前端昨天嘗試refactor時遇到了來不及解決的Bug，今天專心的在看一遍官方文件，這次注意到了當時我使用的是se...

Moscle.dev ‧ 2021-09-24

0 Like 0 留言 589 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

tjabi ‧ 2022-09-29

0 Like 0 留言 587 瀏覽

鐵人賽 Modern Web DAY 8

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 8 篇

技術 [Day 8]開賽八天即遭遇難題(前端篇)

挑戰目標: MockNative Camp前端今天原本是要來refactor和解決hover的問題的，但是在將navtab給component化時遭遇難題，...

Moscle.dev ‧ 2021-09-23

0 Like 0 留言 560 瀏覽

鐵人賽 Modern Web DAY 10

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 10 篇

技術 [Day 10]怎麼每天都像在趕末班電車R(前端篇)

挑戰目標: MockNative Camp前端週末也是很多事要做，每天大概都晚上9點到12點是鐵人賽的工作時間，寫code, test, debug和截圖之...

Moscle.dev ‧ 2021-09-25

0 Like 0 留言 536 瀏覽

鐵人賽 Modern Web DAY 3

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 3 篇

技術 [Day 3]專案始動(前端篇)

到底該為一路順暢沒出Bug高興還是遇到難題花時間克服狂喜，都幾來啟動專案囉，使用的IDE為VScode，為什麼不是WebStrom呢，我開發後端都會選擇Je...

Moscle.dev ‧ 2021-09-18

0 Like 0 留言 508 瀏覽

鐵人賽 Modern Web DAY 11

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 11 篇

技術 [Day 11]在你順利的時候來一拳才是標配(前端篇)

挑戰目標: MockNative Camp 今天要來實作Nav Detail的部分，昨天將相關的List放到了config中，也可以成功的hover該tab後...

Moscle.dev ‧ 2021-09-26

0 Like 0 留言 504 瀏覽

鐵人賽 Modern Web DAY 6

Full Stack Web Development 網站實作系列第 6 篇

技術 Day 6 使用Next.js - 開始 coding 一個非常簡單的 blog (1)

Setup 好 Next.js 環境後，可以開始 coding，做一個非常簡單的 blog。首先，在 n02-blog/pages 目錄下，新增一個檔案 i...

tjabi ‧ 2022-09-21

0 Like 0 留言 498 瀏覽

鐵人賽 Modern Web DAY 19

深入淺出，完整認識 Next.js 13 ！系列第 19 篇

技術 Day 19 - Next.js 13 App Router 動態路由 Dynamic Routes & getStaticParams()

Day 17 我們介紹了 App Router 的基本路由定義方式，簡單來說，當 /app 中的資料夾裡有 page.tsx 時，Next.js 就會以該資料夾...

S.C ‧ 2023-09-19

0 Like 1 留言 495 瀏覽

鐵人賽 Modern Web DAY 1

組裝前端開發工具箱，從 NX 入手系列第 1 篇

技術建立 NX 專案

開發累積了些經驗後已經有一些用著趁手的套件，也做了一些將這些套件封裝後的工具，開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...

Jasper ‧ 2023-09-02 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 468 瀏覽

鐵人賽 Modern Web DAY 27

深入淺出，完整認識 Next.js 13 ！系列第 27 篇

技術 Day 27 - JavaScript 載入優化：next/dynamic

昨天有提到，根據統計，圖片和 JavaScript 為整體網頁檔案大小佔比的前兩名，兩者加起來佔了近九成。認識 Next 針對圖片優化推出的 componen...

S.C ‧ 2023-09-27

0 Like 0 留言 454 瀏覽

鐵人賽 Modern Web DAY 17

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 17 篇

技術 [Day 17]獨自一人的全端攻略(前端篇)

挑戰目標: MockNative Camp 最近這兩年在工作上一直想要有同事可以交流進步，或者是遇到可以學習的同事，但終究在這兩份工作中都屬於自己一個人單打獨...

Moscle.dev ‧ 2021-10-02

0 Like 0 留言 454 瀏覽

鐵人賽 Modern Web DAY 21

組裝前端開發工具箱，從 NX 入手系列第 21 篇

技術 Next App Router 設定 i18n

來設定 Next 專案的 i18n 功能。 Next App Router 架構納入了 React Server component ，所以要想辦法設定能夠在...

Jasper ‧ 2023-09-22 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 443 瀏覽

鐵人賽 Modern Web DAY 6

組裝前端開發工具箱，從 NX 入手系列第 6 篇

技術整合 MUI 跟 Tailwind 樣式設定

MUI 有自己的樣式主題系統，tailwind 也有，為了防止之後再套用樣式的時候兩邊出現偏差，要來想辦法同步兩邊的設定。首先建立好 MUI 的自訂主題。 /...

Jasper ‧ 2023-09-07 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 436 瀏覽

鐵人賽 Modern Web DAY 21

深入淺出，完整認識 Next.js 13 ！系列第 21 篇

技術 Day 21 - 功能性路由 ( 一 )：Route Group

昨天最後提到，Next 有提供幾個「功能性路由」，可以在不影響 URL 的前提下，享受 Next 針對提升路由開發體驗的機制。今天來分享第一個情境：分類路由...

S.C ‧ 2023-09-21

0 Like 0 留言 342 瀏覽

鐵人賽 Modern Web DAY 24

React 走出新手村系列第 24 篇

技術 React 走出新手村 — Next SSG

關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想，他們將其分為兩種實作方法，一個是 Rendering，也就是一般的渲染概念，另一...

LucianoLee ‧ 2023-09-24

0 Like 0 留言 340 瀏覽

鐵人賽 Modern Web DAY 27

React 走出新手村系列第 27 篇

技術 React 走出新手村 — React Server Components

緣起官方介紹影片連結，我也是做這個主題才知道，原來這個概念已經存在那麼久了，那我們快速講解他的成因吧！影片整理目的Dan Abramov 說出了我們前端開...

LucianoLee ‧ 2023-09-27

0 Like 0 留言 331 瀏覽

鐵人賽 Modern Web DAY 20

組裝前端開發工具箱，從 NX 入手系列第 20 篇

技術 NX 自定義 plugin 建立客製化的 generator

NX 有提供擴充工具幫助快速生成專案或是元件庫的架構，像是： pnpm exec nx generate @nx/next:application 利用擴充工...

Jasper ‧ 2023-09-21 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 319 瀏覽

鐵人賽 Modern Web DAY 23

React 走出新手村系列第 23 篇

技術 React 走出新手村 — 認識Next

動機主要還是想順著開頭篇章繼續補完 React server component，所以接下來就是會碰到 Next 這個框架，因為他與 React18 合作開發...

LucianoLee ‧ 2023-09-23

0 Like 0 留言 300 瀏覽

鐵人賽 Modern Web DAY 26

React 走出新手村系列第 26 篇

技術 React 走出新手村 — Next SSR

SSR Next 的 SSR（Server-Side Rendering）的概念是在每個使用者請求時動態產生頁面內容，而不是提前產生靜態 HTML 頁面，這樣頁...

LucianoLee ‧ 2023-09-26

0 Like 0 留言 287 瀏覽

鐵人賽 Modern Web DAY 25

React 走出新手村系列第 25 篇

技術 React 走出新手村 — Next ISR

ISR概念 ISR（Incremental Static Regeneration）是 Next.js 在（SSG）的基礎上做出的改進方法，讓頁面在構成之後根據...

LucianoLee ‧ 2023-09-25

0 Like 0 留言 283 瀏覽

鐵人賽 Modern Web DAY 7

組裝前端開發工具箱，從 NX 入手系列第 7 篇

技術表單工具 react-hook-form

網頁常見的功能之一就是表單，像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能，另外最好還有前端能事先對表單的輸入內容進行檢查，通過後才發給後端。...

Jasper ‧ 2023-09-08 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 1 留言 281 瀏覽

鐵人賽 Modern Web DAY 29

React 走出新手村系列第 29 篇

技術 React 走出新手村 — Rick and Morty練習(I)

實作練習經過前面的介紹之後，相信大家應該有基礎的理解和認知了，接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...

LucianoLee ‧ 2023-09-29

0 Like 0 留言 262 瀏覽

鐵人賽 Modern Web DAY 13

組裝前端開發工具箱，從 NX 入手系列第 13 篇

技術部署 Vercel

把 Next.js 專案部署上 Vercel 非常簡單，註冊帳號後選擇連動的 Github 帳號，然後建立 project 選擇要部署的 Repo ，搭配 Ve...

Jasper ‧ 2023-09-14 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 260 瀏覽