鐵人檔案
從 UI/UX 設計師轉職前端工程師後，我才發現「看得懂語法」和「看得懂一整段程式在做什麼」是完全不同的事。
這個系列會從跨領域初學者的角度出發，整理我從 JavaScript、React 到實際專案開發過程中，如何學會拆解程式流程、追資料來源、理解 State、Props、Component、API Request / Response，以及遇到問題時如何一步步 Debug。
文章會搭配簡單範例與匿名化的實務案例，不追求一次塞進大量語法，而是希望建立一套「程式碼該怎麼讀、問題該怎麼拆」的思考方式，也記錄我從 UI/UX 麻瓜一路學習工程開發的過程。
以前還是 UI/UX Designer 的時候，我其實很少去想一個畫面背後到底是怎麼被做出來的。 設計稿畫好、互動流程整理好，再交給工程師實作。 那時候如果工程...
上一篇提到，我以前看程式時很容易陷入一個狀況： 第一行懂 第二行也懂 第三行好像也懂 ↓ 整段還是不知道在幹嘛 後來我發現，問題常常不是語法完全不會，而是我一...
上一篇的備忘錄裡，我們把輸入內容暫時放進 JavaScript 的資料裡。 例如： const memos = []; memos.push("買牛...
前幾天一路從： 看流程 ↓ 拆步驟 ↓ 找資料放在哪裡 走到現在，終於可以把同一個概念搬進 React。 如果以前使用原生 JavaScript，我們可能會直...
上一篇我們把備忘錄搬進 React，開始看到： const [memos, setMemos] = useState<string[]>([]);...
上一篇講到 State 和 Props。 當所有內容都還寫在同一個 Component 裡時，其實不太會感覺到資料傳遞有多麻煩。 但真正開始拆 Componen...
上一篇講到 Component 拆分之後，很快會遇到另一個問題。 假設現在有： Page ↓ Section ↓ Panel ↓ Button 而真正需要某份...
開始看 React 專案後，我很常遇到這種程式： useEffect(() => { fetchData(); }, []); 第一次看到時，我會直...
上一篇提到 useEffect 時，我一直在問： 這段程式到底是在什麼時候做事情？ 到了實際 React 專案，又很常看到另一種寫法： const { lo...
