跳到主要內容

KNOWLEDGE JOURNAL

一本寫給自己的技術書 —— 從前端基礎讀到部署與面試，一章一章長出來。

117 篇11 章

01前端基礎8 篇

  1. 書庫「皮膚」設計：書脊書架(bookshelf spine)與暖色 editorial替 BoboBlog /readingList 探索過的兩種視覺手法,最後沒上站(暖 cream / dark midnight 跟全站 info-track …
  2. iframe 嵌入iframe 兩大痛點:無法自動抓內容高度 + 跨域時無法直接存取 DOM。前者用 iframe-resizer 解,後者用 postMessage 解。
  3. SCSS 編譯 前綴問題別擔心、別手寫 vendor prefix。Next.js / Vite / CRA 都內建 Autoprefixer,會根據 browserslist 自動加…
  4. 拖曳事件 (DragEvent)三個核心事件:dragstart(來源)、dragover(目標,必須 preventDefault())、drop(目標完成接收)。沒呼叫 preventDe…
  5. html link作法連結用 <a href>、行為用 <button>,永遠不要把它們互相包。語意正確 = 鍵盤可達 + 螢幕閱讀器友善 + SEO 給分。
  6. 滑鼠滾輪事件 (WheelEvent)用 Math.sign(e.deltaY) 取得方向(+1 下 / -1 上)。需要阻止頁面捲動時必須 { passive: false },否則 preven…
  7. 監聽 passive 屬性addEventListener('event', handler, { passive: true }) 告訴瀏覽器「這個 listener 不會 呼叫 pr…
  8. 載入圖片的方法 base64 跟 require載入圖片 哪一個比較快小圖標(<5KB)用 base64 inline、內容圖用一般 <img src> + 現代格式(WebP / AVIF)+ lazy loading。別把整個…

02程式語言5 篇

  1. tsx 轉 jsx用 npx tsc --jsx preserve 把 TS React 檔降級成 JS,用於需要 交付給非 TypeScript 環境 的場景。2026 年比較…
  2. JavaScript 浮點數問題0.1 + 0.2 ! 0.3 不是 JS bug,是 IEEE 754 浮點數標準 的本質限制。所有走 IEEE 754 的語言都有這問題。金錢計算永遠用 D…
  3. Python Self learning個人 Python 環境設定 + 常用指令 + ML / 多媒體相關套件記錄。2026 年首選包管理 uv(Rust 寫的,比 pip 快 10-100 倍),…
  4. Class-Based & Prototype-BasedOOP 兩大流派:Class-based(Java / C++ / C#)有「類」跟「實例」清楚二分;Prototype-based(JavaScript)沒有…
  5. Java SE 6 技術手冊OOP 的第一步是「以物件為中心思考問題」:從需求中找 名詞 → 識別物件、屬性,找 動詞 → 識別方法。Java 用 class 定義物件規格、new 建立實…

03前端框架19 篇

  1. Ladle 前端測試工具元件 playground / dev-only 預覽工具,看 component 在不同 props / state 下的樣子。比 Storybook 輕巧 …
  2. Swiper 踩坑Swiper.js 在 React / Next.js 上的常見地雷:圖片底部空隙(display: block)、centerMode 露出半張的設定、動態更…
  3. Mdx Next.jsNext.js + MDX 兩條路:官方 @next/mdx(輕量、純 file-based)vs Contentlayer(較重、有 type-safe me…
  4. Human套件教學vladmandic/human 是 純瀏覽器執行 的 AI 套件,做人臉、姿勢、手勢、情緒、年齡、性別、物件偵測。重點是 backend 選對(WebGL /…
  5. HTML React 打字機效果純 React state + setTimeout 實作。核心是 三個 state:typedText(目前顯示)/ currentTextIndex(輪到第…
  6. live 2d 在網頁上Web 端載 Live2D 需要兩個 script:live2dcubismcore.min.js(官方 SDK runtime)+ live2d.js(載入器…
  7. Next.js Add Font Awesome走 Font Awesome 官方 React 整合,不要用 CDN link。三個必要套件(fontawesome-svg-core + 圖示包 + reac…
  8. Framer Motion 打造比最棒還要棒的動畫declarative API,把動畫寫成 props(initial / animate / exit / whileHover)。內建手勢(drag、tap…
  9. Redux三層套件分工:redux(狀態容器本身)+ react-redux(綁進 React 的 hooks)+ @reduxjs/toolkit(現代寫法首選,大幅簡…
  10. 上一步 下一步 與 清除的邏輯規則用 history 陣列 + currentStep 指標 實作。每次操作都把新狀態 push 到 history、step+1。Undo = step-1 取…
  11. react-app-env.d.tsCRA(Create React App)專用的 TypeScript ambient type 宣告檔,告訴 TS「你可以 import 圖片、CSS、SVG…
  12. 語言切換Next.js i18n 三條主流路:next-i18next(Pages Router 標配)、next-intl(App Router 首選,2026 推薦…
  13. React-Router-Dom V6 Anchor LinkReact Router v6 原生不支援 hash link 的捲動行為(<Link to="/about#team"> 不會自動捲到 #team)。用 re…
  14. 從現在開始改用Next.jsNext.js 三大殺手鐧:檔案即路由(pages/about.tsx → /about)、多種渲染策略(SSR/SSG/ISR/CSR 同專案混用)、內建優化…
  15. React-Use套件react-use 是 React Hooks 集合,提供 100+ 個常用 hook(useDebounce / useLocalStorage / useO…
  16. React-Spring 打造最棒的動畫啊~~基於物理彈簧模型 的 React 動畫庫,動畫不是「線性插值 + duration」,而是 tension(張力)/ friction(摩擦力)/ mass(質…
  17. npx create-react-app test --template cra-template-bobonext.js把專案的「常用設定 + 套件 + 樣板程式碼」打包成 cra-template-xxx npm 套件,以後 npx create-react-app my-ap…
  18. 新版的react-router-dom 與 tsconfig.json升級到 React Router v6 後 TS 編譯失敗?把 tsconfig.json 的 target 從 "es5" 改成 "ES2016"(或更新),…
  19. index key 請使用 uuidkey={index} 在「列表會新增/刪除/排序」時會讓 React reconciler 認錯元件,造成 state 錯置、不必要的 re-render、輸…

04開發工具17 篇

  1. github 多個帳戶 SSH登入同一台機器要用 個人 + 公司 兩個 GitHub 帳號 → 用 SSH config 設不同 Host alias,clone / push 用對應的 hos…
  2. lodashLodash 提供大量 utility 函式(陣列 / 物件 / debounce / throttle / 深拷貝)。2026 年觀察:多數 method 已…
  3. github 大小寫問題Windows / macOS 預設 case-insensitive filesystem(File.tsx 跟 file.tsx 視為同檔),Git 預設配…
  4. 方便你的SideProjectSide Project 開發提速三件套:dotenv(環境變數)、nodemon(自動重啟)、babel(支援新語法)。2026 年:nodemon 改用 t…
  5. npm --save 到底是什麼 --save-dev 不一樣嗎--save = dependencies(生產環境也需要),如 React、axios。--save-dev (-D) = devDependencies(只…
  6. Git教學涵蓋:基本操作(init / clone / add / commit / push / pull)、分支管理(branch / checkout / merg…
  7. Npm 與 Yarnnpm(預設,Node 內建)、Yarn(Facebook 出,Yarn 1 已 deprecated,Yarn Berry 重大改動)、pnpm(2026 主…
  8. 複製你的hightlight 程式碼部落格 / 文件站常見的「Copy 按鈕」放在 code block 右上角。現代做法:用 navigator.clipboard.writeText()(原生…
  9. Excel密碼破解遺忘 Excel 工作表保護密碼 時,可以用 VBA macro 暴力破解。只能破 sheet protection(Sheet.Unprotect),檔案開啟…
  10. Webpack遇到的問題常見 ts-loader 錯誤 「TypeScript emitted no output」,原因是 tsconfig.json 設了 noEmit: true…
  11. Webpack介紹Webpack 4 大核心概念:entry(入口)/output(輸出)/loader(處理檔案)/plugin(進階任務)。2026 年 Webpack 已被…
  12. 讓你網頁的Code語法 Hightlight起來Web 端 Syntax Highlighting 三主流:Prism.js(輕量、CSS-based)、Highlight.js(老牌、語言多)、Shiki(…
  13. windows系统下如何安装多版本node - NVM (好棒好用)Windows 用 nvm-windows(跟 Mac/Linux 的 nvm 是 不同套件,別搞混)。2026 年更推薦 fnm 或 volta,啟動快、跨平…
  14. Docker應用Docker 三大元素:映像檔(Image) 是 半成品冷凍食品 / 容器(Container) 是 成品熱食 / 倉庫(Repository) 是 Image…
  15. 創建自己的模板每次新專案都重設 ESLint / CI/CD / 結構違反 DRY。解法:做 Scaffolding Tool / Code Generator。2026 年…
  16. 發布自己的npm包流程:註冊 npm 帳號 → npm login → npm publish。有 scope name(@username/pkg)要加 --access pu…
  17. 網頁上實現markdown編輯React 顯示 / 編輯 Markdown 用 react-markdown 套件。比 dangerouslySetInnerHTML 安全(不直接塞 HTM…

05後端與資料庫8 篇

  1. application-octet-streamContent-Type: application/octet-stream = 「未知二進位流」,瀏覽器看到就 觸發下載(不直接展示)。常用於檔案下載 end…
  2. Firebase 驗證 儲存到useContextonAuthStateChanged listener 監聽登入狀態,放進 Context 讓全 app 元件透過 useAuth() 取用。loading s…
  3. Firebase 前端API 是安全的Firebase 前端 config(包含 apiKey)本來就設計成可以公開。它不是 secret,而是 identifier(像資料庫 URL),用來告訴 …
  4. CORS firebaseFirebase Storage 跨域下載檔案會被 CORS 擋(出現 Access-Control-Allow-Origin 錯誤)。解法是 透過 gsuti…
  5. LocalStorage應用key-value string-only,容量 5-10MB,跨分頁共享但跟瀏覽器綁。適合 使用者偏好 / 快取 / 離線標記,不適合 session tok…
  6. Firebase 資料庫如何建立 與 上傳文章類資料用單一 posts collection + 分類欄位 + 索引 比多個 collection 好維護。內容用 array of map 結構儲存。資…
  7. 一開始就獲取Firebase storage初始值Component mount 後 Firebase async 才回資料,首次 render 沒值 是常見問題。標準解:用 loading state 等待。…
  8. 個人網站怎麼選資料庫 (關聯 非關聯)結構化資料(用戶、訂單、訊息) → 關聯式(SQL):MySQL / PostgreSQL。非結構化或半結構化(文章、log、事件) → NoSQL:Mongo…

06部署與DevOps6 篇

  1. 如何找到你的ip與local三種方法:navigator.language(瀏覽器設定,最簡單)、Geolocation API(經緯度,要使用者授權)、IP 地理查詢(server-si…
  2. 如何布置靜態網站 (免費資源) ⇒ Next.jsNext.js 部署選擇:Vercel(母公司,零設定,動態功能完整)、Cloudflare Pages(全球 edge,免費額度大)、GitHub Pages…
  3. 免費伺服器 介紹2026 年免費伺服器個人推薦組合:Vercel / Cloudflare Pages(靜態 + edge function)、Fly.io / Railway…
  4. 網頁縮圖 - SEOOpen Graph(OG)讓網頁被分享到 FB / LINE / Twitter 時 有 漂亮縮圖、標題、描述。關鍵 4 個 meta tag:og:titl…
  5. 虛擬化技術介紹虛擬化要解決的核心問題:「我寫的程式在我的電腦能跑,搬你電腦就爆掉」。兩大技術:Virtual Machine(系統層,模擬整個 OS,啟動慢但隔離強)、Con…
  6. React專案無法正常Github Action基本 workflow:checkout → setup-node → npm ci → npm run build → 部署 GitHub Pages。最常踩…

07軟體工程5 篇

  1. Memory Leak (記憶體管理)JS 有 GC 不代表沒 memory leak。GC 只清「unreachable」物件,但 global / closure / timer / unrem…
  2. 四種渲染模式四種模式對應「HTML 何時生成」 : - SSG — build 時生成,適合 靜態內容(部落格、文件、行銷頁) - SSR — 每次 request 生成,…
  3. 物件導向分析(OOA Object-Oriented Analysis)OOA 是「需求分析」的 OO 視角:把使用者需求拆解成 物件(類別、屬性、關係、行為),作為設計階段的橋樑。分析「有什麼東西、它們長怎樣、彼此怎麼互動」,還沒…
  4. 物件導向程式設計基本原則 - SOLIDSOLID 是 OOP 設計的 5 條心法,讓程式碼好維護、易擴充。 - SRP: 一個類別只做一件事 - OCP: 開放擴充,封閉修改 - LSP: 子類能無…
  5. 物件導向設計(OOD Object-Oriented Design)OOD 把 OOA 的「世界觀」轉成「設計藍圖」:具體類別關係、介面、設計模式、時序圖。做完 OOD 才開始寫 code。OOD 階段套用 SOLID 跟 設計…

08資安4 篇

  1. Termly 第三方cookie教學Termly 是 cookie consent + 隱私政策產生器,GDPR/CCPA 合規工具。Next.js 的 <Script> 元件 不太能正確載 Te…
  2. cookie & sessionStorage加密 (crypto-js)前端用 crypto-js AES 加密 user/token 後存進 cookie / sessionStorage 是「障眼法」,不是真安全。真正的 sec…
  3. 保護你的API KEY (React 前端)前端能讀到的 env var 都不是 secret。NEXT_PUBLIC_* / REACT_APP_* 前綴變數會 build 時 inline 進 bun…
  4. 限制特定網頁前端 router guard 只是 UX 改善,不是真正的安全層。真正的保護必須在 server side(SSR getServerSideProps / …

09面試考題43 篇

  1. Async function-Await 函式async function 可以用來定義一個非同步函式，讓這個函式本體是屬於非同步，但其內部以“同步的方式運行非同步”程式碼。
  2. BFS和DFS廣度優先搜尋（Breadth-First Search，BFS），是一種逐層往外擴展的搜尋演算法，用 佇列（Queue） 實現。
  3. Class Components 介紹在 React 當中，現在有兩種 components。分別是 Class component、Function component（或稱作 Stateless…
  4. Component介紹在 React 當中，現在有兩種 components。分別是 Class component、Function component（或稱作 Stateless…
  5. diff演算法 與 React的key值Diff 演算法用於比較兩棵虛擬 DOM 樹的差異，只更新需要改變的部分，而非重新渲染整棵樹。
  6. Dynamic ProgrammingDynamic Programming動態規劃是一種解決問題的方法，專門用於解決求最值的問題。通過計算部分子問題的答案，並將這些答案存儲在數組或哈希表中，我們可…
  7. Function Component 介紹在 React 當中，現在有兩種 components。分別是 Class component、Function component（或稱作 Stateless…
  8. Functional Programming介紹命令式 (Imperative) v.s 宣告式 (Declarative)
  9. Generator functions 生成器函式function* 宣告式（function 關鍵字後面跟著一個星號）定義了一個生成器函式（generator function），他會回傳一個生成器（Gene…
  10. JavaScript是原型物件導向物件導向程式語言(Object-Oriented Programming, OOP)將程式設計概念以物件為基礎，而程式導向程式語言(Procedure-Orie…
  11. JavaScript是單線程JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來…
  12. JavaScript的各種函式另一種方式，則是透過 變數名稱 = function([參數]){ ... }; 的方式，將一個函式透過 = 指定給某個變數。
  13. MVC是什麼MVC 設計模式，在這個模式裡，會把軟體分成 Model、View、Controller 三大功能層
  14. Pass by value & Pass by reference傳值與傳參考是傳遞參數給函數的兩種方法。在傳值中，引數的值被複製並傳遞到函數。在傳參考中，引數的記憶體位置的參考被傳遞到函數。
  15. Promise函式Promise 是用來最佳化非同步的語法
  16. React Redux 用過嗎在講解兩者如何配合前，還是得先了解 Redux 的運作模式，九把刀說過：「慢慢來，比較快。」，所以一步一步來走吧！
  17. React 用過嗎在 React 中，props 和 state 是非常重要的概念，它們兩者都是在 React 元件中存儲數據的方法，但他們有著不同的使用場景與特性。
  18. Rest Operator 其餘運算符會用其餘運算符(Rest Operator)的主要意義是因為它會用在兩個地方，一個是比較常提及的在函式定義中的傳入參數定義中，稱之為其餘參數(Rest para…
  19. setInterval 和 setTimeoutsetInterval 和 setTimeout 是 JavaScript 原生的方法，用於定時呼叫函式，它們類似但有一些差異。
  20. Spread Operators 展開運算符arguments是JavaScript中原生的物件，它代表函數中傳遞給函數的參數。它有類似陣列的功能，但並不是陣列。
  21. throw Error用法下面有更好的throw Error例子
  22. Type 和 Interface的差別在 TypeScript 中，Type 和 Interface 都可以用來描述類型。Type 是一種可以命名的類型，而 Interface 是一種描述對象結構的…
  23. TypeScript 宣告很多時候不用手動寫，TypeScript 會型別推斷（type inference）自動推出：const x = 5 就已經是 number。
  24. TypeScript 特性 - Interfaceinterface 用於定義一組預定義的屬性和方法，它是一種型別定義語法，可以用來檢查一個物件是否符合特定的屬性和方法。
  25. TypeScript 資料型別 - 元組(Tuple) & 列舉(Enum)TypeScript 在 array 與 object 之外，提供兩種「結構化常用型別」：元組（Tuple） 把一個陣列的「每個位置」鎖定型別與長度；列舉（En…
  26. 前端學習資源希望上述學習資源可以幫助到你成為一位優秀的前端工程師。加油！
  27. 前端記錄 - 考題 (React TS JS)紀錄一些面試題目相關內容
  28. 匿名函數匿名函數(anonymous function)就是沒有名字的函數。一般直接定義在需要它的地方,通常賦值給變數、當參數傳進去、或定義完馬上呼叫。
  29. 各種console
  30. 型別轉換在 TypeScript 中，有時候需要將一個值的類型「放寬」，因為該值的實際類型比較複雜，或者 TypeScript 無法很好地推斷它的類型。這時候可以使用 …
  31. 堆疊Stack與佇列Queue先入後出(FILO, First-in-Last-out)
  32. 如何取消Event的預設行為event.preventDefault() 是一個 JavaScript 中，Event interface 定義的方法。這個方法可以取消事件的預設行為，例如…
  33. 時間複雜度(time complexity)和空間複雜度(space complexity)時間複雜度（time complexity）指的是程式執行時間隨著輸入數據變大而增長的速度。
  34. 會try{}catch{}嗎JavaScript 中的 try-catch 與 if-else 是兩種不同的錯誤處理方式。
  35. 物件物件(Object)型別是電腦程式的一種資料型別，用抽象化概念來比喻為人類現實世界中的物體。
  36. 箭頭函數 Arrow function expression箭頭函數(Arrow function)是 ES6 引入的更精簡的函式寫法。除了語法短,它跟一般 function 在 this、arguments、能否當建構…
  37. 箭頭函數 和 一般函數的 差別因此，根據需要使用的功能，您可以選擇使用箭頭函數或普通函數。
  38. 聽過Event Loop嗎Event Loop是JavaScript中協調執行緒的一個機制。它保證每次僅執行一個任務，並且在執行任務之間允許訊息佇列中的其他訊息進行排程。事件迴圈是Jav…
  39. 解釋一下 React的各種Hook這個hook可以讓你在函式元件中加入狀態。它接受一個初始值，並返回一個包含「當前狀態值」和「更新該狀態的函式」的陣列。呼叫更新函式會觸發元件重新渲染。
  40. 解題思維先寫出暴力解，再思考如何用資料結構或演演算法最佳化。
  41. 說說reduce() filter() map()的效果accumulator：累加器
  42. 請解釋異步函數Asynchronous非同步函式 (asynchronous function) 是 JavaScript 中的一種特殊函式，它可以在不阻塞主執行緒的情況下執行任務。
  43. 陣列arr1 = 1,1,2,2,3,3去重題目看起來很簡單（一行 [...new Set(arr)] 就過了），但面試官真正想看的是你知不知道每種寫法的取捨：時間複雜度、能不能保留順序、遇到 NaN 跟…

10投資1 篇

  1. Stock Information 公司情報篇 (消息面、營運面、財務面)Stock Information 系列第 5 篇:公司情報三維度(消息面 / 營運面 / 財務面)。把前面四篇的觀察工具,套用到單一公司的全方位分析。核心是 …

11雜學1 篇

  1. 日本旅遊規劃APP大對比 (無業配)三款主流選擇:Google Map(導航之王、規劃弱)、去趣(UI 漂亮、規劃強、無時刻表)、JapanTravel(時刻表 + 費用、進階要付費)。我的組合:…