今天來寫一個和程式有點關聯，但和我實際工作沒有關聯的東西，單純覺得身邊的人應該會需要知道這個資訊，就寫一篇文章記錄。剛剛無聊收信的時候，發現自己收到一個用自己信箱寄給自己的信件，標題寫著 You have been hаcked，當下就覺得是詐騙了，工程師可是沒這麼好騙的！！但是很妙的是這次寄件者居然不是看起來詭異的信箱，而是我自己的信箱，當下老實說我還是有那麼幾秒覺得該不會真的被盜用了吧！！但還是冷靜下來先 google 一下，一查就發現了一個關鍵字 「SMTP」。
- 1月 25 週六 202513:55
【亂亂寫筆記】詐騙案例 - 用你信箱寄信警告信箱被盜用
今天來寫一個和程式有點關聯，但和我實際工作沒有關聯的東西，單純覺得身邊的人應該會需要知道這個資訊，就寫一篇文章記錄。剛剛無聊收信的時候，發現自己收到一個用自己信箱寄給自己的信件，標題寫著 You have been hаcked，當下就覺得是詐騙了，工程師可是沒這麼好騙的！！但是很妙的是這次寄件者居然不是看起來詭異的信箱，而是我自己的信箱，當下老實說我還是有那麼幾秒覺得該不會真的被盜用了吧！！但還是冷靜下來先 google 一下，一查就發現了一個關鍵字 「SMTP」。
- 8月 04 週日 202423:00
【亂亂寫筆記】VS Code - ESLin 應出現的警告提示未顯示
最近在寫自己的 side project，但發現專案裡面的 VS Code 不會顯示我很習慣會用來提示自己沒寫好的警告黃底線，例如：useEffect dependency 沒寫完整的警告提示。這次也稍微記錄一下自己排除這個問題的過程，以及最後的解決方法。
VS Code 未顯示應該出現的 ESLint 警告提示
實際情境
以下是一段 React 專案中的程式碼，這個專案已經有 ESLint 的相關設定，預期在這個useEffect中，應該會有兩個相依值，所以當沒有把所有應該放入的相依值放入時，應該會有黃底線提示才對，但在這裡的實際情況卻是「沒有顯示任何提示 」(如下圖)。
除錯過程
逐步縮小問題發生的原因範圍：
1. 確認 VS Code 的 ESLint Extension 有無安裝。
2. 透過跑 ESLint 指令，確認 ESLint 規則是否有正常套用。
2. 確認 VS Code 有關 ESLint 的相關設定。
- 5月 28 週日 202316:30
【亂亂寫筆記】異常的錯誤 - 版本衝突
這次碰到的問題其實是一個在任何開發情況下都有可能撞到的問題，仔細想想好像以前也曾撞到過一次，但是自己當時卻沒有那麼深刻的印象，為了避免自己再次撞到，所以想說把它給記錄下來。
排除異常錯誤問題
實作情境
這次是在替換元件的時候，碰到這個問題。我們自己有把包一個元件在專案內做使用，主要是在做emoji-picker的元件替換(這個元件是使用emoji-mart結合material-ui的元件組合成我們專案要的樣子和操作方式)，用舊版的元件不會有問題，但是換成新版的元件卻會跳出錯誤(如下圖)，且點擊後無法顯示應該要顯示的emoji popper。
除錯過程
1. 確認是否是新版元件應該帶入的props沒帶或帶錯。
2. 我這裡還有嘗試先把emoji-picker內的emoji的部分拿掉，替換成一般的文字，發現不會跳錯，popper也可以正常顯示，確認到更emoji-mart有關。
3. 近一步確認emoji-mart使用上有沒有錯誤，還是沒排查確切的問題點。
最終問題排除方式
最後發現原來是版本撞到，舊元件使用的emoji-mart版本是3.X.X，新元件使用的是5.X.X，使用的專案內已經有安裝的emoji-mart版本則為3.X.X，所以在使用舊元件的時候不會有問題，替換成新元件時則出現跳錯和無法開啟的狀況。最後把使用專案內的emoji-mart移除掉，單純使用打包好元件內的emoji-mart，才排除了這個問題。
雖然這次是在替換元件的時候發生，但感覺在其他不同但有點類似的情境中，可能也會撞到這個問題，所以當該檢查的方向都檢查過確認無誤時，也許可以往版本是否有衝突的方向下去排查。
貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
排除異常錯誤問題
實作情境
這次是在替換元件的時候，碰到這個問題。我們自己有把包一個元件在專案內做使用，主要是在做emoji-picker的元件替換(這個元件是使用emoji-mart結合material-ui的元件組合成我們專案要的樣子和操作方式)，用舊版的元件不會有問題，但是換成新版的元件卻會跳出錯誤(如下圖)，且點擊後無法顯示應該要顯示的emoji popper。
除錯過程
1. 確認是否是新版元件應該帶入的props沒帶或帶錯。
2. 我這裡還有嘗試先把emoji-picker內的emoji的部分拿掉，替換成一般的文字，發現不會跳錯，popper也可以正常顯示，確認到更emoji-mart有關。
3. 近一步確認emoji-mart使用上有沒有錯誤，還是沒排查確切的問題點。
最終問題排除方式
最後發現原來是版本撞到，舊元件使用的emoji-mart版本是3.X.X，新元件使用的是5.X.X，使用的專案內已經有安裝的emoji-mart版本則為3.X.X，所以在使用舊元件的時候不會有問題，替換成新元件時則出現跳錯和無法開啟的狀況。最後把使用專案內的emoji-mart移除掉，單純使用打包好元件內的emoji-mart，才排除了這個問題。
雖然這次是在替換元件的時候發生，但感覺在其他不同但有點類似的情境中，可能也會撞到這個問題，所以當該檢查的方向都檢查過確認無誤時，也許可以往版本是否有衝突的方向下去排查。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
- 4月 27 週四 202322:00
【亂亂寫筆記】node sass -排除版本不符問題
最近終於有新專案可以碰了，但是碰新專案之前，會需要經歷幾個步驟，要先install在把專案run起來，有時候就有可能會遇到node-sass版本不對的問題。
排除node-sass版本不符問題
實作情境
在clone新專案後，正常的進行install程序後，要把專案跑起來時跳以下的錯誤。(已經切換到應該要使用的node版本，仍然會跳錯)
問題解決方式
可以透過以下方排除這個狀況。
1. 確認已經切換到該使用的node版本。
2. 切換到node module資料夾李。
3. 透過以下指令讓node-sass重新rebuild
npm rebuild node-sass
4. 跳出以下內容時，就代表有順利完成這個動作。
貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
排除node-sass版本不符問題
實作情境
在clone新專案後，正常的進行install程序後，要把專案跑起來時跳以下的錯誤。(已經切換到應該要使用的node版本，仍然會跳錯)
問題解決方式
可以透過以下方排除這個狀況。
1. 確認已經切換到該使用的node版本。
2. 切換到node module資料夾李。
3. 透過以下指令讓node-sass重新rebuild
npm rebuild node-sass
4. 跳出以下內容時，就代表有順利完成這個動作。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
- 7月 18 週一 202222:00
【亂亂寫筆記】Nuxt(SSR) - 從部屬了解Server Side Render
平常都是接觸Vue、React這些CSR的框架，SSR只有透過近期的讀書會稍微了解它的概念，本來以為自己應該差不多理解什麼是SSR了，直到最近要進一步處理nuxt3專案的部屬流程，才發現自己根本沒搞懂啊！這次想說就稍微記錄一下，近期透過規劃nuxt專案部屬流程，所進一步了解到的SSR。
從Nuxt3專案的部屬理解SSR
什麼是SSR？
SSR是Server Side Render的縮寫，用中文來看的話，也就是「伺服器渲染」。有別於「客戶端渲染(CSR)」，HTML的編譯是交由server處理，而不是交由client處理。所以當使用者點進網頁發送request需求後，server會返回完整的HTML內容，而不會像CSR一樣，是一個空白的HTML頁面，需要透過client，才能把頁面內容渲染出來。
SSR頁面產生流程
使用者對server發送request => 在server端fetch資料 => server產生並回覆完整的HTML =>下載所有JavaScript => 將event Handlers綁定到DOM上(Hydrate) =>Hydrate完成後，使用者就可以和頁面互動(點擊頁面才會有反應)
- 5月 20 週五 202222:33
【亂亂寫筆記】Vue2, Webpack 4 - 使用file-loader的同時，避免產生重複的svg檔案
前陣子有遇到需要在build後，把產出的一些js、img、font檔案加上客製化hash，以避免網頁cache住的調整事項。但是透過file loader來客製產出的檔名hash後，實際上完成build，卻發現每個svg檔案都被重複多build出一份沒有被改成客製hash檔名的檔案，font的檔案還有無法被解析的問題，最後和前輩查了很久，才排除了這個狀況。
避免使用file-loader設定時，在build後，產生重複的svg檔案
實作情境
為了客製化build出來的檔案名，我們需要在vue.config檔案中使用file-loader來設定檔案名稱。這時候會在configureWebpack下的module裡面設定rules(除了svg檔外，還可以依照實際的需求設定其他檔案類型的rule)，設定內容如下。
進行yarn build或npm run build之後，會發現build出來的dist資料夾裡面，出現兩個相同，但是名字中的hash不同的檔案。
問題發生原因&解決方式
為什麼會發生這個問題？
會產生兩個相同的檔案，主要是因為build的rule套用到預設的rule和file-loader的rule。預設的rule並沒有被file-loader的rule覆蓋過去，而是兩個rule都被執行了。
- 4月 24 週日 202217:42
【亂亂寫筆記】環境變數 - Vue專案設定環境變數.env
前陣子剛好需要在Vue專案上設定到環境變數，但是卻發現怎麼改都沒有反應，所就又廢廢的寫了這篇小筆記。
在Vue專案上設定環境變數
實作情境
已經用.env檔案設定想要加入的環境變數，卻沒有正確套用這個新增的環境變數。
實作方式
利用想要在Vue專案裡面設定環境變數，要注意以下幾個地方。
1. .env檔案要放在專案根目錄。
2. 環境變數的名稱必須以VUE_APP開頭，例如以下這樣。
VUE_APP_PORT=78784
3. 設定完.env檔案後，需要重新run一次專案。
*這次在設定時，就是沒注意到第一項和第二項才沒有辦法正確
設定完後，就可以在vue檔案中，透過process.env取得設定的環境變數。
這裡是透過console.log()印出來的內容，紅框的部分就是透過.env檔設定的環境變數。
如果要依照development mode或production mode設定不同環境變數的話，可以透過.env.development或.env.production檔案來設定。
貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
在Vue專案上設定環境變數
實作情境
已經用.env檔案設定想要加入的環境變數，卻沒有正確套用這個新增的環境變數。
實作方式
利用想要在Vue專案裡面設定環境變數，要注意以下幾個地方。
1. .env檔案要放在專案根目錄。
2. 環境變數的名稱必須以VUE_APP開頭，例如以下這樣。
VUE_APP_PORT=78784
3. 設定完.env檔案後，需要重新run一次專案。
*這次在設定時，就是沒注意到第一項和第二項才沒有辦法正確
設定完後，就可以在vue檔案中，透過process.env取得設定的環境變數。
這裡是透過console.log()印出來的內容，紅框的部分就是透過.env檔設定的環境變數。
如果要依照development mode或production mode設定不同環境變數的話，可以透過.env.development或.env.production檔案來設定。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
- 3月 05 週六 202216:00
【亂亂寫筆記】Vue - 點擊input label只觸發click事件不觸發input事件(取消默認事件)
這陣子在做內部專案要用的元件，像是radio、checkbox，其中在製作有縮合功能的checkbox時，卻碰到了一個狀況，那就是label裡面包著必須包著一個有縮合功能的icon，但點選這個icon時，卻不能選取到這個checkbox。其實要解決這個問題很簡單，但我當下一時腦袋打結了，還以為必須使用什麼神奇的黑魔法，其實只要回歸根本原理開始解決就好了。雖然這個情境的解法應該算是滿直覺的，但是我想應該也還是有一些人在初次遇到這個狀況時，會有一時想不透的點，所以也就特別記錄下來了。
點擊input label區域不觸發input事件
實作情境
最終期待的結果如同以下這樣。
但是如果單純在icon上v-bind click事件，卻會變成以下這個狀況。
問題發生原因&解決方式
為什麼會發生這個問題？
這個狀況和HTML tag自己本身的預設行為有關(像是 a, input等這些tag都有預設的行為)，因為label和input已經結合在一起了，所以點擊到label範圍內，當然也就會觸發input的預設事件，這裡type是checkbox，當在點擊被包含在label裡面的icon時，check就會有被點選和取消點選的效果。
前陣子在做公司的專案時，遇到一個用 flex 寫的 layout，明明已經用 flex-basis 限制寬度，但還是因為 layout 裡面的內容物的文字和圖片而把某一個區塊撐開。那時一直想不透是為什麼，所以就開始找資料，才發現跟 flex 本身的特性有關。
防止 flex item 因為特殊情況被撐開
實作情境
以下是模擬當初在實作的情境，主要是一個被分為三欄的 layout，每一欄都會被放入一個元件，其中中間的元件因為是放入類似文字編輯器的元件，所以這個元件內容並不是固定的，會動態的變動，也就有可能因為圖片過大，或出現無斷行文字而把中間這欄撐開。
=> container 裡面分別有三個 item，item2 的 flex-basis 設定成 300px，裡面放了一個含有 10 個 30px 的文字的 component。
<範例 HTML>
<範例 css>
<範例實際畫面>
當有比較大的圖片出現時，會出現以下狀況
<HTML (放入圖片後)>
<實際畫面(放入圖片後)>
中間這欄會被撐開，不只有原先我們希望的 300px 寬。
問題發生原因&解決方式
為什麼會發生這個問題？
這邊先來了解一下這個問題發生的原因！會出現這樣的狀況主要是因為設定flex之後，容器裡面的 item 的 min-width(flex-direction: row) 或 min-height(flex-direction: column) 的預設值為 auto，所以當內容物寬度或高度較大時，這一欄就會被撐開。到這裡，腦子動得比較快的人，可能還是會覺得哪裡怪怪的，這邊先暫時不延伸下去思考，先針對 flex item 被預設的特性下去做修改。
*被預設為 auto 的屬性是 min-width 還是 min-height 主要是看現在被設定的 flex 方向(主軸的方向)，也就是 item 的排列方向是 x 軸還是 y 軸。
怎麼解決這個狀況？
前面提到跟 min-width 或 min-height 預設是 auto 有關，那這裡我們就只需要把它設定為 0 就可以了。在這個範例中，因為是主軸為 x 軸，所以要設定為 0 的是 min-width。
設定 min- 的目的是去讓 item 寬度不要隨著裡面的內容物撐大(ex: img)，就可以讓 item 寬度維持在我們希望的 300px 以內。
這樣中間這一欄，就可以恢復成原本我們希望的 300px了。但在這個情境中，圖片會被蓋住，這時候可以依照實際的需求搭配 overflow 來呈現。
(當時我實務中的需求，scroll 的部分是設定在這一欄中的元件)
除了我這次的解法外，依照實際的確切情境，也可以透過 overflow 來解決這個狀況。
延伸思考
重新再回到剛剛前面提到的這個問題產生的原因，應該會有不少人覺得哪裡怪怪的，尤其是這個問題的重要部分-寬度的地方。明明每一欄的 flex-basis 都設定好了，而且合計是 container 的寬度，怎麼中間這欄可以被撐開呢？那其他欄位不就會被擠壓到嗎？
沒錯！這個部分也和 flex 的特性有關，也就是 flex-shrink。當 display 設定為 flex 時，flex item的flex-shrink 預設值會是 1，意思就是當空間不足時，item 就會被擠壓。這也就是讓中間欄位被撐開後，沒有導致其他 item 被擠倒 containe r外的原因。
在這個情況下，如果將另外兩個 item 的 flex-shrink 設定為 0，就會發生以下的狀況，也就是 item 超出 container。
防止 flex item 因為特殊情況被撐開
實作情境
以下是模擬當初在實作的情境，主要是一個被分為三欄的 layout，每一欄都會被放入一個元件，其中中間的元件因為是放入類似文字編輯器的元件，所以這個元件內容並不是固定的，會動態的變動，也就有可能因為圖片過大，或出現無斷行文字而把中間這欄撐開。
=> container 裡面分別有三個 item，item2 的 flex-basis 設定成 300px，裡面放了一個含有 10 個 30px 的文字的 component。
<範例 HTML>
<範例 css>
<範例實際畫面>
當有比較大的圖片出現時，會出現以下狀況
<HTML (放入圖片後)>
<實際畫面(放入圖片後)>
中間這欄會被撐開，不只有原先我們希望的 300px 寬。
問題發生原因&解決方式
為什麼會發生這個問題？
這邊先來了解一下這個問題發生的原因！會出現這樣的狀況主要是因為設定flex之後，容器裡面的 item 的 min-width(flex-direction: row) 或 min-height(flex-direction: column) 的預設值為 auto，所以當內容物寬度或高度較大時，這一欄就會被撐開。到這裡，腦子動得比較快的人，可能還是會覺得哪裡怪怪的，這邊先暫時不延伸下去思考，先針對 flex item 被預設的特性下去做修改。
*被預設為 auto 的屬性是 min-width 還是 min-height 主要是看現在被設定的 flex 方向(主軸的方向)，也就是 item 的排列方向是 x 軸還是 y 軸。
怎麼解決這個狀況？
前面提到跟 min-width 或 min-height 預設是 auto 有關，那這裡我們就只需要把它設定為 0 就可以了。在這個範例中，因為是主軸為 x 軸，所以要設定為 0 的是 min-width。
設定 min- 的目的是去讓 item 寬度不要隨著裡面的內容物撐大(ex: img)，就可以讓 item 寬度維持在我們希望的 300px 以內。
這樣中間這一欄，就可以恢復成原本我們希望的 300px了。但在這個情境中，圖片會被蓋住，這時候可以依照實際的需求搭配 overflow 來呈現。
(當時我實務中的需求，scroll 的部分是設定在這一欄中的元件)
除了我這次的解法外，依照實際的確切情境，也可以透過 overflow 來解決這個狀況。
延伸思考
重新再回到剛剛前面提到的這個問題產生的原因，應該會有不少人覺得哪裡怪怪的，尤其是這個問題的重要部分-寬度的地方。明明每一欄的 flex-basis 都設定好了，而且合計是 container 的寬度，怎麼中間這欄可以被撐開呢？那其他欄位不就會被擠壓到嗎？
沒錯！這個部分也和 flex 的特性有關，也就是 flex-shrink。當 display 設定為 flex 時，flex item的flex-shrink 預設值會是 1，意思就是當空間不足時，item 就會被擠壓。這也就是讓中間欄位被撐開後，沒有導致其他 item 被擠倒 containe r外的原因。
在這個情況下，如果將另外兩個 item 的 flex-shrink 設定為 0，就會發生以下的狀況，也就是 item 超出 container。
- 8月 21 週六 202120:00
【亂亂寫筆記】HTML DOM + web API(scrollIntoView) - 使用web API實現anchor的方式
又是一個因為小文件工具的開發，而遇到的問題。為了優化小文件功能，讓它使用上能更便利，前輩那裡著手加入了API釘選的功能，但是需要加入釘選功能的部分，是用React寫的swagger-ui，而我們的專案又是以vue下去開發的，有些操作上就變成不那麼容易另外進行客製化，而這次就有碰到使用swagger-ui原本有的anchor功能是行不通的狀況，因此需要透過DOM+web API的方式下去呈現anchor效果。雖然這個功能主要不是由我完成，但在看前輩寫的code的時候，覺得是一個自己沒有想過的解法，所以就特別記錄下來了。
使用DOM+web API實現anchor
實作情境
swagger-ui有deepLink的功能，但是我們想要額外實作出一個可以儲存deeplink的功能，並且在點擊這個link的同時，還要能透過anchor導到對應的區塊。不過這個實際實作上卻發現，若是在同一頁，anchor功能會起不了作用，因此最後的做法是透過DOM+scrollIntoView()的方式進行。
實作方式
利用DOM找到我們要設置anchor的區塊，搭配scrollIntoView()實作。
要anchor的區塊分別是#food、#shoes、#decoration，所以個別透過getElementById取得這幾個地方。最後再寫一個讓點擊按鈕時達到anchor效果的function。
最後這樣就可以透過另一個方式達到anchor的效果^^
完整的示範內容請點這裡
小補充：使用scrollIntoView()的時候，可以帶入一個object當作參數，裡面可以使用的參數有behavior、block、inline，可以讓實際呈現的anchor效果做微調，例如調整anchor後，滑動到的區塊是顯示在螢幕最上方、中間，或是最下方。
貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
使用DOM+web API實現anchor
實作情境
swagger-ui有deepLink的功能，但是我們想要額外實作出一個可以儲存deeplink的功能，並且在點擊這個link的同時，還要能透過anchor導到對應的區塊。不過這個實際實作上卻發現，若是在同一頁，anchor功能會起不了作用，因此最後的做法是透過DOM+scrollIntoView()的方式進行。
實作方式
利用DOM找到我們要設置anchor的區塊，搭配scrollIntoView()實作。
要anchor的區塊分別是#food、#shoes、#decoration，所以個別透過getElementById取得這幾個地方。最後再寫一個讓點擊按鈕時達到anchor效果的function。
最後這樣就可以透過另一個方式達到anchor的效果^^
完整的示範內容請點這裡
小補充：使用scrollIntoView()的時候，可以帶入一個object當作參數，裡面可以使用的參數有behavior、block、inline，可以讓實際呈現的anchor效果做微調，例如調整anchor後，滑動到的區塊是顯示在螢幕最上方、中間，或是最下方。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
打工仔人森 (3)