文科少女學程式

今天想來看個基礎到不行，但之前一直沒有好好認識的 JavaScript 常識，也就是 JavaScript 的模組系統 - CommonJS 和 ES Module。
什麼是 JavaScript 的模組系統？
所謂的「JavaScript 模組系統」是指能將程式碼拆分為獨立、可重複使用之模組（module）的機制。透過模組系統，不同檔案之間可以用標準化的方式進行匯入與匯出，使專案在規模變大時仍然可以保持清晰的結構、良好的維護性與重複使用性。JavaScript 的模組系統也就是大家都有聽過的 CommonJS 和 ES Module。
JavaScript 模組系統的歷史背景
接下來讓我們快速來看一下關於 JavaScript 模組系統的歷史。在 JavaScript 被創造出來的早期，它的用途主要是替網頁加入一些簡單的互動效果，例如按鈕點擊事件或表單驗證。當時的網頁互動仍以整頁重新載入為主，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」。

最近在寫自己的 side project，但發現專案裡面的 VS Code 不會顯示我很習慣會用來提示自己沒寫好的警告黃底線，例如：useEffect dependency 沒寫完整的警告提示。這次也稍微記錄一下自己排除這個問題的過程，以及最後的解決方法。
VS Code 未顯示應該出現的 ESLint 警告提示
實際情境
以下是一段 React 專案中的程式碼，這個專案已經有 ESLint 的相關設定，預期在這個useEffect中，應該會有兩個相依值，所以當沒有把所有應該放入的相依值放入時，應該會有黃底線提示才對，但在這裡的實際情況卻是「沒有顯示任何提示 」(如下圖)。
除錯過程
逐步縮小問題發生的原因範圍：
1. 確認 VS Code 的 ESLint Extension 有無安裝。
2. 透過跑 ESLint 指令，確認 ESLint 規則是否有正常套用。
2. 確認 VS Code 有關 ESLint 的相關設定。

前陣子剛完成了一個讀書會的導讀，內容與React component有關，加上新學校的新同學也有一個跟component相關的優化方式分享，就延伸出了很多我對於component的疑問，而這些疑問也透過讀書會在Zet大大的解答下，稍微有比較明白一些。說好像懂了，但是感覺還是需要更完整地整理過一次對這部分的理解才會更清楚，所以今天也就稍微整理一下那次讀書會自己學到的一些新東西，以及對component的一些理解吧！
什麼是component ？
原本我的認知是
當提到component，以前我的認知都會覺得就是一個component。沒錯！這句話聽起來就是個「廢話」。再更明確地說明我原本的認知的話，也就是原本我以為「component是一個已經變成畫面的某一塊小區塊」，例如畫面中渲染出來的一個表格，是一個表格的component。
但實際上是
產生特定React element的藍圖，或者也可以說是設計稿，也就是我們寫出來的那一個component function本身才是所謂的component。也就是說component只是個可以產出一個React element的底稿，是一個函式，而不是被產生出來的React element本身。
component和React element的差異是什麼？
剛剛已經提到React element了，對於component的定義如果還有點不太理解的人，可能還會有一個疑問，那就是「所以component和React element的差異是什麼？」。
React element是在React中建構畫面的最小單位，也是React內的virtual DOM，而component只是一個可以產生出React element的藍圖。但這裡必須補充一點，產生React Element的方式不只有component，單純用div、p這種標籤名稱一樣也可以創建React element。雖然這兩種方式：「component」和「實際DOM element名稱」都能夠創建React element，但是JSX在轉譯時，會以標籤首字母的大小寫來判斷這是一個實際的DOM element名稱還是component function的名稱。例如以下這樣：