React Redux 與 Hooks! slide: https://hackmd.io/p/template-Talk-slide <i class="fa fa-eye fa-fw"></i>自從 v7.1 版以後提供了 hooks 的函式，不再需要仰賴 connect()， 讓取得狀態與 dispatch action 改變 redux 中的狀態變得更容易，也更清楚明瞭 使用者觸發 action 經過中介層，看有沒有事件要觸發 回到 Reducer 更改數據

Docker! Docker 的目標是實作輕量級的作業系統虛擬化解決方案 Docker 讓使用者不需要去關心容器的管理，使得操作更為簡便。:heart: 使用者操作 Docker 的容器就像操作一個快速輕量級的虛擬機一樣簡單 優點 更簡單的管理 更快速的交付和部署 :+1: 更輕鬆的遷移和擴展 :cat:

Next.js Next.js 是一個基於 React 的 SSR 解決方案 Next.js 有兩種 pre-rendering 方式 Server-side Rendering Static Generation (Recommended) Server-side Rendering （服務器端渲染） 針對<font color="#f00">每個請求</font>動態產生HTML頁面， 因為服務器端渲染導致性能比靜態生成慢，所以只有在絕對必要時才使用它。

Webpack ! Webpack 是一個開源的前端打包工具。 Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組， 並從它生成優化過的程式碼，通常都會寫一個 webpack.config.js 來管理各個檔案。 優勢 將你的 js 檔案 Bundle 變成單一的檔案:fish: 壓縮 javaScript、css、html 代碼，壓縮合並圖片 :heart: Minify 或優化程式碼

如何優化LCP! 網站核心指標三劍客 Google 定義出衡量網站使用者體驗最重要的三個指標 – <font color="#f00">LCP, FID, CLS</font> 網站使用體驗三大核心指標 圖片參考網址 什麼是ＬＣＰ LCP 改為評斷整個頁面載入完成後，佔用使用者 viewport 面積最大的元件，可能是一整個文章區塊或是一張大的 Cover 圖片的載入時間，來作為網頁真正地載入完成的判定。

Nginx Nginx 是一款由俄羅斯程式設計師Igor Sysoev所開發 輕量級的網頁伺服器、反向代理伺服器 什麼是反向代理伺服器? 反向代理（Reverse Proxy）方式是指 以代理服務器來接受internet 上的連接請求， 然後將請求轉發給內部網絡上的服務器，

Access token v.s. Refresh Token [TOC] JWT簡短回顧 為了進行身分驗證，Auth Server 頒發 Token 給Client端。Toekn的數據格式是JSON，其中包含特定於用戶的信息。 Client端在與API交談時可以使用此token （通過將其作為HTTP Header傳送），以便API可以識別Token 代表的用戶並採取特定於用戶的操作 JWT 的組成 分成 header、payload、signature/encryption data

Reconciliation (React 效能調整) 在這篇文章中描述了實作 React 底層中「diffing」演算法時， 我們採取什麼策略讓 component 的更新是可預測的， 同時可以滿足要求高效能的應用程式。 當 React 元件遇到效能瓶頸時，可以在重構或解析元件需從 Element、Reconciliation 概念開始了解 [name=cckai] Element X JSX