React 渲染的順序
前言最近做了不少面試 經過各種自信心的打擊之後 發現自己對 react 其實沒有想像中那麼了解 明明每天跟他朝夕相處，以為很懂他 記錄一下其中一個被問卻觀念錯誤的問題 Render and Com..
Read moreImage onload
前言這算是一直想要處理的 UX 小問題 廢話不多說 Before: After: 簡單來說就是透過 image onload 這個事件去達到這個效果 onload 觸發其實一般要用 imag..
Read more兩年前端職涯覆盤
前言最近在稍微比較主動在準備面試 也因此有了一些面試機會 在準備面試當中就有一個問題讓我想了蠻久 「對自己未來五年的職涯規劃」 想了好久都想不到一個完整的脈絡答案 想說從覆盤的觀點去順一下我真正想..
Read more從 race condition 更了解 useEffect
前言在看 yt 在介紹為啥不建議用 useEffect 去 fetch data 時 從官網他給的解法我 get 不到 稍微研究之後才發現我對 useEffect 不夠瞭解 所以稍微記錄一下 一般..
Read more三元運算子在 React 的行為
前言這是在工作中碰到的一個小問題，做一個小記錄 情境我有一個區塊是透過 state 去判斷目前的裝置更改樣式 直接上 code： {isDesktop ? ( <PageTab t..
Read moreHash Router & Browser Router（Comparison）
前言多了一個新的，「Comparison」 主要是覺得很多實踐，常常會透過不同方式的比較才知道什麼要使用它 而會有標題這個疑問，單純是因為和上一間公司用不一樣的方法 我覺得這也是 software..
Read moreLogin flow(frontend-solutions)
前言這個 frontend-solution 用圖是未來可能遇到相同問題前以來這邊看一下 減少重複從頭思考的過程 登入流程這篇會以我目前正在重構的專案紀錄我整個 login 的 flow 驗證方式..
Read moreReact query 的 fresh, stale
React query 的 stale 機制一直以來沒搞很清楚的 react-query 的兩個機制 在 useQuery hook 中有兩個參數 staleTime 和 cacheTime 這兩..
Read moreMigrate CRA to Vite
場景一個公司管理所有客戶資料的後台 是用 React 寫的 但是當初創建這個專案的時候用的是 CRA(create react app) 而要改成使用 Vite 的目的就是提升 DX(develo..
Read more自定義MUI的主題
前言雖然 MUI 已經用了一段時間了 我自己認為還是對他不是很熟悉 所以想寫一篇來多了解他 MUI with emotionnpm install @mui/material @emotion/r..
Read more創造一個沒有shallow copy的世界
arr.with()怎麼用 ?arr.with([指定的index], [指定的值]); 以往想要更改 array 指定的 index 的值會這麼做 let arr = [1, 2, 3]; ..
Read more了解一下ForwardRef
前情提要 ?其實 React 寫到現在已經滿一年了，還是有不少 React 的東西我不是很了解， 究竟是因為用不到所以不了解，還是因為不了解所以沒用到呢？ 因為我在看一些 document 的時候..
Read more近期的專案前置設定
Eslint x lint-staged x prettier x husky這幾個工具的關聯我一開始也不知道有這麼樣的工具可以尬在一起用， 也是工作夥伴在我們team上推動的， 有一點不太一樣，..
Read morenginx, Dockerfile, docker compose
工作上用到的Dockerfile為何會有這篇？由於目前公司網站都是放在GCP的（還有一些是在Azure，不過目前都在慢慢遷移了） 簡單來說，會有這篇的原因是即使我是前端，還是有要自己設定一些doc..
Read more為什麼React map時需要加上key?
React key的用途作為使用React開發網頁的開發者 必定會用到這個語法 function Mycomponent() { return <> {..
Read more如何在nextjs使用.md
markdown files in Nextjs.MDX其實依照Nextjs官網的solution，他有一個方式可以去讀一個叫做.mdx的檔案格式 他和.md幾乎是一樣的，但是他能做的事情不只是寫..
Read more如何更改commit message ?
更改前一個 commit message以更改「前一個」commit message 來說比較簡單 可以直接用 --amend 參數 git commit --amend -m "mes..
Read more