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

0 Like 0 留言 754 瀏覽

鐵人賽自我挑戰組 DAY 2

中年大叔(40+)前端自學筆記系列第 2 篇

技術 DAY02 - 建立Next.js專案就踩到坑

前言：這次鐵人賽的內容是以我學習React+Next.js 的過程中所記錄的筆記與心得教材是在Udemy上面，隨機挑選比較新的課程且好評數量高的購買證明：...

不惑的胖虎 ‧ 2023-09-17

0 Like 0 留言 722 瀏覽

鐵人賽自我挑戰組 DAY 1

總是學不來的中年大叔，孤獨的自學之旅第二年系列第 1 篇

技術 DAY01 - 今年是第二次參賽(開場廢話)

前言: 今年是第二次參賽，在去年完成iT鐵人賽初體驗後原本今年早早就有規劃要繼續參加鐵人賽早在七月中就開了參賽的資料夾，並且開始搜集內容素材本來以為這次會比去年...

不惑的胖虎 ‧ 2022-09-15

0 Like 0 留言 713 瀏覽

鐵人賽自我挑戰組 DAY 17

總是學不來的中年大叔，孤獨的自學之旅第二年系列第 17 篇

技術 DAY17 - 一連做了五個UI @@

前言：這次鐵人賽準備了我之前在Youtube上面看完且實做過的React Native範例一連貼了五篇，如果有跟著實做，應該會有些許收穫吧?這些範例看起來都差...

不惑的胖虎 ‧ 2022-10-01

0 Like 0 留言 651 瀏覽

鐵人賽自我挑戰組 DAY 22

總是學不來的中年大叔，孤獨的自學之旅第二年系列第 22 篇

技術 DAY22 - 今天忙著搬家...

來薄荷島之前原本預計今天 (10/6 星期四)要回去宿霧市沒想到意外的順利簽下租約，所以需要多待幾天處理一下新的租屋處圖1: 圖2: 圖3:旁邊的空地預計要來...

不惑的胖虎 ‧ 2022-10-06

0 Like 0 留言 611 瀏覽

鐵人賽自我挑戰組 DAY 23

總是學不來的中年大叔，孤獨的自學之旅第二年系列第 23 篇

技術 DAY23 - 忙著採購家具打掃屋子

圖1: 圖2: 圖3:菲律賓的人均所得跟台灣有段不小的差距，物價一般而言都比台灣低很多but有一些東西卻比台灣貴...比如這個660公升塑膠水塔這個價錢在台灣買...

不惑的胖虎 ‧ 2022-10-07

0 Like 0 留言 600 瀏覽

鐵人賽自我挑戰組 DAY 21

中年大叔(40+)前端自學筆記系列第 21 篇

技術 DAY21 - Strapi API Parameters

前言: 今天這篇還是在測試程式(scripts\strapi-request.mjs)裡，寫有關API對接的範例是獨立的程式，並不會動到專案裡的程式碼。安裝套...

不惑的胖虎 ‧ 2023-10-06

0 Like 0 留言 584 瀏覽

鐵人賽自我挑戰組 DAY 20

中年大叔(40+)前端自學筆記系列第 20 篇

技術 DAY20 - Fetch Api (內容未整理)

http://localhost:1337/api/reviews資料格式測試api (在前端資料夾) 後端需要啟動ironman_2023\scripts\...

不惑的胖虎 ‧ 2023-10-05

0 Like 0 留言 561 瀏覽

鐵人賽自我挑戰組 DAY 22

中年大叔(40+)前端自學筆記系列第 22 篇

技術 DAY22 - 從cms的資料庫撈資料到前端 1

前言：昨天的內容是在單獨的js檔案中，完成API的對接，從Strapi的資料庫中，撈出資料，今天的內容就是把寫在測試程式裡的程式碼拿到專案中實作。編輯 li...

不惑的胖虎 ‧ 2023-10-07

0 Like 0 留言 555 瀏覽

鐵人賽自我挑戰組 DAY 25

中年大叔(40+)前端自學筆記系列第 25 篇

技術 DAY25 - 從cms的資料庫撈資料到前端 4 (end)

前言： lib\reviews.js 裡面的 getReview getReviews 兩隻函式有很多重複的地方另外寫一隻函數來取代，重複的地方有兩個，拆成兩隻...

不惑的胖虎 ‧ 2023-10-10

0 Like 0 留言 544 瀏覽

鐵人賽自我挑戰組 DAY 24

中年大叔(40+)前端自學筆記系列第 24 篇

技術 DAY24 - 從cms的資料庫撈資料到前端 3

前言：昨天把Review頁面完成後，接下來要做單獨的頁面API資料串接現在點選個別的遊戲頁面連結是會跳出錯誤的，今天就完成這個部分先在測試程式裡實作 sc...

不惑的胖虎 ‧ 2023-10-09

0 Like 0 留言 530 瀏覽

鐵人賽自我挑戰組 DAY 27

中年大叔(40+)前端自學筆記系列第 27 篇

技術 DAY27- ESLint

影片 68 ESLintvs code 安裝微軟出的 ESLint 外掛 npm i --save-dev eslint eslint-config-next...

不惑的胖虎 ‧ 2023-10-12

0 Like 0 留言 519 瀏覽

鐵人賽自我挑戰組 DAY 5

中年大叔(40+)前端自學筆記系列第 5 篇

技術 DAY05 - 完成APP路由設定

在vs code 底下直接創建資料夾/檔案的小技巧操作方法:直接新增檔案資料夾名稱/檔名.副檔名接下來要用上面的方法在專案裡多建立幾個頁面 app/ab...

不惑的胖虎 ‧ 2023-09-20

0 Like 0 留言 513 瀏覽

鐵人賽自我挑戰組 DAY 28

中年大叔(40+)前端自學筆記系列第 28 篇

技術 DAY28 - next/image

啟用 next/image C:\mylab_2023_9\ironman_2023\app\reviews[slug]\page.jsx import Ima...

不惑的胖虎 ‧ 2023-10-13

0 Like 0 留言 502 瀏覽

鐵人賽自我挑戰組 DAY 7

中年大叔(40+)前端自學筆記系列第 7 篇

技術 DAY07- 在Next.js的專案中使用Tailwind CSS

安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...

不惑的胖虎 ‧ 2023-09-22

0 Like 0 留言 501 瀏覽

鐵人賽自我挑戰組 DAY 16

中年大叔(40+)前端自學筆記系列第 16 篇

技術 DAY16 - 增加排序功能

lib\reviews.js export async function getReviews() { const slugs = await get...

不惑的胖虎 ‧ 2023-10-01

0 Like 0 留言 489 瀏覽

鐵人賽自我挑戰組 DAY 14

中年大叔(40+)前端自學筆記系列第 14 篇

技術 DAY14 - Review頁面重構

編輯 app\reviews\stardew-valley\page.jsx 檔案內容如下: import { readFile } from "no...

不惑的胖虎 ‧ 2023-09-29

0 Like 0 留言 482 瀏覽

鐵人賽自我挑戰組 DAY 3

中年大叔(40+)前端自學筆記系列第 3 篇

技術 DAY03 - 從零開始建立Next.js專案

前言：手動建立專案流程：在C槽(windows系統)底下建立一個資料夾作為專案名稱如: C:\ironman_2023 在ironman_2023 底...

不惑的胖虎 ‧ 2023-09-18

0 Like 0 留言 477 瀏覽

鐵人賽自我挑戰組 DAY 23

中年大叔(40+)前端自學筆記系列第 23 篇

技術 DAY23 - 從cms的資料庫撈資料到前端 2

缺少圖片重點把圖片顯示在網頁上 const CMD_URL = "http://localhost:1337"; const...

不惑的胖虎 ‧ 2023-10-08

0 Like 0 留言 472 瀏覽

鐵人賽自我挑戰組 DAY 15

中年大叔(40+)前端自學筆記系列第 15 篇

技術 DAY15 - 在動態路由下產生靜態網頁SSG

app\reviews[slug]\page.jsx // 產生靜態頁面 export async function generateStaticParams(...

不惑的胖虎 ‧ 2023-09-30

0 Like 0 留言 469 瀏覽

鐵人賽自我挑戰組 DAY 1

中年大叔(40+)前端自學筆記系列第 1 篇

技術 DAY01 - 中年大叔第三年參加鐵人賽

前言：這次我第三次參加鐵人賽，去年因為意外而中斷連續發文(停電&沒網路)連參加獎(30天鐵人練成)都沒有...TT 簡單自我介紹一下(雖然以前的鐵人賽...

不惑的胖虎 ‧ 2023-09-16

0 Like 0 留言 426 瀏覽

鐵人賽自我挑戰組 DAY 30

中年大叔(40+)前端自學筆記系列第 30 篇

技術 DAY30 - 三十天功德圓滿

終於到了第三十天，算是草草的結束這次的鐵人賽...文章寫到後面水分比西瓜還多，看來了下次的鐵人賽還是要把內容都預先準備起來，如果要每天寫文章變數太大一下停電一下...

不惑的胖虎 ‧ 2023-10-15

0 Like 0 留言 422 瀏覽

鐵人賽自我挑戰組 DAY 18

中年大叔(40+)前端自學筆記系列第 18 篇

技術 DAY18 - 線上部署

今天的內容是要把進行中的專案部署到網路上Next.js 是由Vercel這家公司所開發的所以可以把Next.js專案免費部署到Vercel基本上只要先將專案gi...

不惑的胖虎 ‧ 2023-10-03

0 Like 0 留言 420 瀏覽

鐵人賽自我挑戰組 DAY 26

中年大叔(40+)前端自學筆記系列第 26 篇

技術 DAY26 - Static Build with CMS Data

前言：所有的資料都改用CMS後端原本存放markdown文件檔的 content 資料夾可以整個刪掉這邊要檢視 npm build 所產生的靜態網頁之前St...

不惑的胖虎 ‧ 2023-10-11

0 Like 0 留言 394 瀏覽

鐵人賽自我挑戰組 DAY 4

中年大叔(40+)前端自學筆記系列第 4 篇

技術 DAY04 - 建立App路由

接下來在app 資料夾底下建立 reviews資料夾底下建立 page.jsx 內容如下 function ReviewsPage() { retur...

不惑的胖虎 ‧ 2023-09-19

0 Like 0 留言 385 瀏覽

鐵人賽自我挑戰組 DAY 8

中年大叔(40+)前端自學筆記系列第 8 篇

技術 DAY08- 初步完成網頁layout

編輯 app\layout.jsx 檔案內容如下: import Link from "next/link"; import "....

不惑的胖虎 ‧ 2023-09-23

0 Like 0 留言 382 瀏覽

鐵人賽自我挑戰組 DAY 12

中年大叔(40+)前端自學筆記系列第 12 篇

技術 DAY12 - 建立最簡響應式頁面

編輯 app\page.jsx 檔案內容如下: import Link from "next/link" import Heading fr...

不惑的胖虎 ‧ 2023-09-27

0 Like 0 留言 373 瀏覽

鐵人賽自我挑戰組 DAY 6

中年大叔(40+)前端自學筆記系列第 6 篇

技術 DAY06 - 使用Link取代a標籤

加入Link 在Next.js 裡使用Link來取代原本的 <a> 標籤編輯 app\layout.jsx 內容如下 import Link fro...

不惑的胖虎 ‧ 2023-09-21

0 Like 0 留言 364 瀏覽

鐵人賽自我挑戰組 DAY 17

中年大叔(40+)前端自學筆記系列第 17 篇

技術 DAY17 - 網頁metadata 設定

app\page.jsx import Link from "next/link" import Heading from "@/...

不惑的胖虎 ‧ 2023-10-02

0 Like 0 留言 362 瀏覽

鐵人賽自我挑戰組 DAY 10

中年大叔(40+)前端自學筆記系列第 10 篇

技術 DAY10 - 引入靜態資源

在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...

不惑的胖虎 ‧ 2023-09-25

0 Like 0 留言 356 瀏覽

鐵人賽自我挑戰組 DAY 9

中年大叔(40+)前端自學筆記系列第 9 篇

技術 DAY09- 自訂可重複使用的組件(components)

在導入TailWind Css之後，網頁的樣式被清除了，如h1需要使用者重新定義標籤的樣式編輯 app\page.jsx 檔案內容如下: function H...

不惑的胖虎 ‧ 2023-09-24