文科少女學程式

事情是這樣的～最近因為原本的租屋處房東要賣房子，所以搬離了一個租了六年的地方，近期剛搬到新房子，就腦洞大開，想說做一個自動提醒房租已經繳的小幫手來嚇嚇(?)新房東好了。於是就使用了 AI 之力，無腦做了一個小小的 line 房租提醒小助手。雖然整個流程是在 AI 幫助下，兩小時就完成的小幫手，但是還是想要稍微記錄一下，也許哪天可以拿來複用到其他情境。
我想解決的問題是？
以前繳完房租後，因為 J 人的愛管理毛病以及以前當 PM 的職業病，都會將房租繳交紀錄整理在 google sheet 裡面，另一方面也是要整理給房東看，讓房東知道我真的有繳房租。但是寫完紀錄後，我依然需要在群組裡通知房東，我已經把房租匯款給他了，請他確認。這個流程沒什麼問題，但我就是懶，想要用更懶(ㄈㄟˋ)的方式在寫完房租繳交紀錄後，就自動通知房東我繳房租給他了，這時候就會需要房租繳費通知秘書。
房租繳費通知秘書實作方向
簡單來說，「我需要把 google sheet 和 line 結合在一起，當我完成 google sheet 的房租繳交紀錄後，就自動提醒房東我繳房租了」。所以觸發點會在完成 google sheet 的填寫，並且需要串接 line 的 push message API，將我想要自動發送給房東的匯款完成通知訊息送出。

今天想來看個基礎到不行，但之前一直沒有好好認識的 JavaScript 常識，也就是 JavaScript 的模組系統 - CommonJS 和 ES Module。

什麼是 JavaScript 的模組系統？
所謂的「JavaScript 模組系統」是指能將程式碼拆分為獨立、可重複使用之模組（module）的機制。透過模組系統，不同檔案之間可以用標準化的方式進行匯入與匯出，使專案在規模變大時仍然可以保持清晰的結構、良好的維護性與重複使用性。JavaScript 的模組系統也就是大家都有聽過的 CommonJS 和 ES Module。

JavaScript 模組系統的歷史背景

這篇文章是啟發於 JSDC 2025 SerKo 大大分享的 「程式碼減重：你的 Tree-Shaking 在偷懶嗎？」，會從 SerKo 分享的內容為起點，補充一些自己本來也是很模糊的地方，以及透過一些實驗來觀察 Tree Shaking 的狀況。

什麼是 Tree Shaking？
從字面上來看就是「搖樹」的意思，但是為什麼要「搖樹」呢？目的就是把樹木上沒用的枯葉搖掉，只保留還有用途的綠葉。延伸到前端開發領域中的話，也就是「在打包的時候，把沒有用到的程式碼移除掉，只保留需要的內容，以縮減打包後檔案的大小，也就不會讓使用者在使用網頁時，因為下載一些不必要的內容，而影響使用體驗。Tree Saking 這個動作，通常都是透過 Webpack、 Rollup 這類的打包工具 (bundler) 來處理。

上次複習完 Docker Container 之後，接著再來複習一下什麼是 Docker Image，一樣從字面認識開始吧！

什麼是 Image？
說到 Image 這個詞，大家對這個英文單字應該都不陌生，因為在一般使用情境下，Image 就是圖片的意思。不過其實 Image 的這個詞，在電腦科學和技術領域中，還有「靜態的、不可變的檔案」的意義在，在這種時候，通常就會把這個詞稱作是「映像」或是「鏡像」。所以 Image 這個詞彙並不單純只有圖片的意思，在 Docker 的世界中，Image 這個詞，也就是剛剛提到的「映像」或是「鏡像」的意思。所謂的「映像」或是「鏡像」通常是一個完整系統或應用程式環境的快照，這樣的檔案包含了系統或軟體執行所需的所有內容，例如：程式碼、設定檔、函式庫、相依套件，甚至作業系統核心等。

今天來寫一個和程式有點關聯，但和我實際工作沒有關聯的東西，單純覺得身邊的人應該會需要知道這個資訊，就寫一篇文章記錄。剛剛無聊收信的時候，發現自己收到一個用自己信箱寄給自己的信件，標題寫著 You have been hаcked，當下就覺得是詐騙了，工程師可是沒這麼好騙的！！但是很妙的是這次寄件者居然不是看起來詭異的信箱，而是我自己的信箱，當下老實說我還是有那麼幾秒覺得該不會真的被盜用了吧！！但還是冷靜下來先 google 一下，一查就發現了一個關鍵字 「SMTP」。

之前已經看過了 CSR 和 SSR 這兩種渲染模式了，今天再我們從回顧什麼是 SSR 開始來看 SSG 和 ISR 這兩種網頁渲染模式。
回顧 SSR 
SSR 指的是「伺服器端渲染 (Server-Side Rendering)」，也就是說渲染 HTML 的這件事情是交由伺服器來處理，所以瀏覽器在發送 request 後，得到的 response 會是完整頁面的 HTML 檔案。SSR 有分舊時代的 SSR 和新時代的 SSR，舊時代的 SSR 就是很單純的一個概念，那就是前面所提到的「發送 request 後，由伺服器回完整頁面的  HTML 及相關的 CSS 給瀏覽器，每次進行互動的動作時，例如：送出表單，都會重新經歷一次這個發送 request，在次取得一份新的 HTML 的動作」。但在新時代的 SSR 中，則是優化了每次做一個操作動作，就要重新發送 request 去得新的 HTML 的部分，只會在第一次進到頁面時，才進行發送 request 取得完整 HTML 及相關的 CSS 等靜態檔案的 response，在這之後的操作、互動動作，會因為 Javascript 有被綁定在 DOM 元素上(hydration)，而可以在不特別向伺服器請求新的 HTML 等靜態檔案的狀態下，就讓畫面呈現操作的效果。
新時代的 SSR 是為了解決舊時代的 SSR 每次做一個操作都要重新等待完整的 HTML 回來的缺點，但又保持著第一次進入頁面時就可以拿到完整的 HTML 頁面，以維持有助於 SEO 的優點。 
什麼是 SSG ？

最近去上了小賴老師的 Docker 課程，在課程過程中，雖然有少許的一些部份對於身為前端的我來說有點不太好懂，會需要稍微花點時間消化一下、思考一下，但在這堂課程中，依然還是收穫滿滿，也發現到自己以前誤解的部分，趁著還有記憶的時候，就來一篇算是上課後的不專業複習文吧！
Container 是容器？
從底層概念來看的話，所謂的 Container 其實是運用兩個 linux 技術所產生的，而這兩個 linux 技術分別是 ：
- Namespace(負責隔離)
- cgroups(負責管理資源)

最近想要好好的來認識實現 SSR 的 next.js 這套框架，所以就想說先回歸根本，仔細來從 CSR 開始理解到 SSR。
什麼是 CSR ？
一樣從字面上粗淺的了解一下，所謂的 CSR 指的就是「客戶端渲染 (Client-Side Rendering)」。這裡的客戶端指的是瀏覽器，再更進一步的來看，也就是在瀏覽器中產生 HTML，然後將這個 HTML 動態插入到頁面中，將畫面顯示出來。想要檢查當前的網站是不是用 CSR 這種渲染方式的話，則可以透過檢視網站原始碼來判斷，當檢視原始碼時，發現是一個和當前顯示畫面不一致、不完整的 HTML 時，就可以知道這是一個 CSR 的網頁。
如同下面這張圖呈現的樣子
就如同前面提到的 CSR 是一種客戶端渲染的渲染模式，所以我們肉眼所看到的完整頁面，都不是一開始對伺服器發送 request，再從伺服器獲得 response 後，就獲得的內容，所以當我們檢視網頁原始碼時，才會發現原始的 HTML 是一個沒有呈現完整頁面內容的 HTML。 

最近在寫自己的 side project，但發現專案裡面的 VS Code 不會顯示我很習慣會用來提示自己沒寫好的警告黃底線，例如：useEffect dependency 沒寫完整的警告提示。這次也稍微記錄一下自己排除這個問題的過程，以及最後的解決方法。

VS Code 未顯示應該出現的 ESLint 警告提示
實際情境
以下是一段 React 專案中的程式碼，這個專案已經有 ESLint 的相關設定，預期在這個useEffect中，應該會有兩個相依值，所以當沒有把所有應該放入的相依值放入時，應該會有黃底線提示才對，但在這裡的實際情況卻是「沒有顯示任何提示 」(如下圖)。
除錯過程

這幾天在看一些之前沒有認真研究過的東西，突然看到了 internal slots 這個詞彙，小女我真的很不才，這是我第一次看到這個詞，就先拋棄自己原本在看的東西，轉向看看什麼是 internal slots 了，這次就來整理一下自己查了一些資料後，對於 internal slots 的理解。這次會先從 object 的 Prototype 開始了解，再進一次回到這次的主題「內部插槽 (internal slots) 和內部方法 (internal methods)」。

原型 (Prototype)
這次的主題雖然不是 Prototype 本人，但和 Prototype 也有一點點關係，就快速從什麼是 Prototype 開始看吧！

前陣子剛完成了一個讀書會的導讀，內容與React component有關，加上新學校的新同學也有一個跟component相關的優化方式分享，就延伸出了很多我對於component的疑問，而這些疑問也透過讀書會在Zet大大的解答下，稍微有比較明白一些。說好像懂了，但是感覺還是需要更完整地整理過一次對這部分的理解才會更清楚，所以今天也就稍微整理一下那次讀書會自己學到的一些新東西，以及對component的一些理解吧！
什麼是component ？
原本我的認知是
當提到component，以前我的認知都會覺得就是一個component。沒錯！這句話聽起來就是個「廢話」。再更明確地說明我原本的認知的話，也就是原本我以為「component是一個已經變成畫面的某一塊小區塊」，例如畫面中渲染出來的一個表格，是一個表格的component。
但實際上是

很久之前有看了Map這個物件，今天來看看跟Ｍap一樣，也是一個很特別的物件，也就是Set。這種物件也是平常比較少會碰到，但學起來，在某些時刻也會有幫助的物件。今天就來好好認識一下Set的吧！

Set是什麼？
從MDN的說明內容可以理解到Set是一個object，可以儲存任何型別的唯一值，不論是原始型別或是物件。