原本表定五月就要開始專心學React了，結果太過懶散的我還是拖到前陣子才終於有比較完整的React學習進度了。所以學習筆記可以來點不一樣的東西了，每天都看Vue也是會膩的，呵呵。
這邊一樣會從建立React專案的部分開始，這次在建立專案時有遇到一些小問題，也會一併記錄到這一篇。接下來就直接進入正題吧！
- 6月 20 週日 202100:02
【前端新手日記】React.js學習筆記 - 建立React專案&安裝VSCode擴充套件
原本表定五月就要開始專心學React了，結果太過懶散的我還是拖到前陣子才終於有比較完整的React學習進度了。所以學習筆記可以來點不一樣的東西了，每天都看Vue也是會膩的，呵呵。
這邊一樣會從建立React專案的部分開始，這次在建立專案時有遇到一些小問題，也會一併記錄到這一篇。接下來就直接進入正題吧！
- 6月 14 週一 202112:22
【亂亂寫筆記】VSCode - 無法用tab鍵自動生成HTML Tag時的解決方式
最近剛換了一台電腦，好不容易把一些該用的工具裝好，準備開始進行一個這幾天構想的內容時，突然發現我習慣使用的【.class】+【按下Tab鍵】來自動產生對應class name的HTML標籤的方式居然失效了！！
應該是因為重新安裝，所以有些設定需要自己額外做設定，但是我實在也忘了當初剛學用VSCode的時候，為什麼可以有這樣的功能，這次既然又遇到了，就把它好好記錄下來吧！
遇到這個問題時，其實只需要簡單的三個步驟就可以解決了！
步驟一、先從VSCode的File裡找到Preferences的Settings點進去。
按下Setting後，就可以看到以下的這個畫面。
步驟二、接著從左手邊的選單中找到Extensions裡面的Emmet
步驟三、點擊Edit in setting.json，打開設定的json檔案，並設定"emmet.triggerExpansionOnTab":true
應該是因為重新安裝，所以有些設定需要自己額外做設定，但是我實在也忘了當初剛學用VSCode的時候，為什麼可以有這樣的功能，這次既然又遇到了，就把它好好記錄下來吧！
遇到這個問題時，其實只需要簡單的三個步驟就可以解決了！
步驟一、先從VSCode的File裡找到Preferences的Settings點進去。
按下Setting後，就可以看到以下的這個畫面。
步驟二、接著從左手邊的選單中找到Extensions裡面的Emmet
步驟三、點擊Edit in setting.json，打開設定的json檔案，並設定"emmet.triggerExpansionOnTab":true
- 5月 29 週六 202115:48
【亂亂寫筆記】JavaScript - 透過陣列處理補齊缺少的月份資料
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，
如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，
不會有太多詳細說明。
用月份陣列和後段取得的資料陣列比對，補齊不足的資料
實作情境
前端畫面固定會顯示六個月的資料，但是後端資料不一定會給六個月的資料，若想要用迴圈方式把資料渲染上去，就會出現問題。但是後端資料給的資料筆數可能是0~6組資料就有，這時候拿到後端的資料就需要另外處理，而且資料的月份順序也必須正確，並不是只要補齊六個月份的共六份資料就可以，顯示基準為五月，需要在前端渲染五月往回推六個月的資料，但是有可能從後端拿到的資料卻只有三月的資料，就需要依照月份另外塞入空的資料。
簡單來說，就是必須處理從後端拿到的資料，必須把確保渲染用資料共用六組，且必須依照月份排序。
實作方式
先拿基準月來組成月份陣列，基準月為後端傳來的月份。
再透過比對月份清單和api取得的單筆資要的月份來補上沒有資料時，應該要顯示的'-'內容。
- 5月 02 週日 202117:25
【菜逼八是我】菜鳥工程師一天的上班生活都在做什麼？
今天想要來分享一個對於軟體工程師這個職務有點好奇的人可能會想要知道的內容，就是「工程師一天的上班生活都在做什麼？」
雖然這個內容會依公司不同而有差異，但是說真的在我自己並沒有實際成為工程師之前，真的對這個部分充滿好奇，所以這次就想說來寫一篇無關乎技術的內容，給想要更了解工程師職務的人一點點的參考資訊。在正式進入主題前，想先提醒大家！因為我是前端工程師，所以這次的內容只會以前端工程師為主，而且每間公司一定多少都會有差異，所以僅以我目前待的這間公司的工作狀況下去分享，另外，因為我現在還是很菜的工程師，如果是更資深的工程師，可能也會跟我遇到的實際狀況有差異，所以內容僅供參考！
一整天大致上的工作內容
每天工作內容會依照實際手上被分配的事項有不同，不過大多數時候，主要都還是進行這些工作內容。
1. 例行的 stand up meeting
2. 修正bug或參與專案開發
3. 查資料找答案
4. 其他會議
早上例行的stand up meeting
每天早上到公司後，大概在10點15分左右，我們部門就會開始進行stand up meeting，stand up meeting的進行方式有別於大多數公司正式開會的方式，並不會待在辦公室裡開上超過30分鐘的會議，就是很簡單地大家圍一個圈，站著簡述昨天上班的一整天大概進行了什麼工作內容，今天又預計進行哪些工作內容。偶爾有一些需要即時同步的事項和提醒內容，相關人員或是主管也會在這個早上的會議告訴大家。
修正bug
如果手上有比較急的bug單，通常就會處理bug單，在我剛進入公司時，比較常會被分派一些bug單，透過找bug的發生原因(Root Cause)，也讓很菜的我對專案比較熟悉。
參與專案開發
前期大多都是支援一些小小的bug單，還既有功能的變更單，最近才開始參與專案的開發。因為是前端工程師，所以在參與專案開發時，主要工作內容分為切版、串接api。切板時會接觸到UI設計師，並依照他們出的設計圖製作畫面；串接api時，會接觸到後端工程師，依照後端工程師給的api contract來進行串接。在參與專案的開發時，有時也會需要和規畫專案內容的BA或PM溝通，因為有時候拿到的開發用文件，可能會不夠清楚，或是有需要釐清的部分。
查資料找答案
不管是在修bug，或是支援專案開發時，偶爾都會出現一些自己不知道該如何解決的問題，這個時候就會花一點時間查資料。目前為止需要查資料時，幾乎都能找到自己需要的資料，或是讓我有靈感想出解決辦法。
其他會議
除了早上的會議外，自己部門每兩個禮拜還會有一個sprint的回顧檢討會議(retro)，在這個會議中，大家都可以輕鬆地發表自己的各種想法。另外，偶爾還會需要參加SRS會議，在會議中，主要是負責的BA說明這次的SRS的內容，和會需要調整、修改、增加的開發項目。
在邁入第五個月的菜鳥前端工程師生活中，其實大多時候的工作內容，主要還是在進行開發和修bug，雖然看起來好像都在做差不多的事情，不過實際上在開發不同功能時，偶爾還是會遇到一些新的挑戰，所以到目前為止，還是都感覺非常有趣、有成就感。這就是菜逼八的我一整天上班生活中，會做的事情。
這次的小分享就到這裡了，大家掰餔！
雖然這個內容會依公司不同而有差異，但是說真的在我自己並沒有實際成為工程師之前，真的對這個部分充滿好奇，所以這次就想說來寫一篇無關乎技術的內容，給想要更了解工程師職務的人一點點的參考資訊。在正式進入主題前，想先提醒大家！因為我是前端工程師，所以這次的內容只會以前端工程師為主，而且每間公司一定多少都會有差異，所以僅以我目前待的這間公司的工作狀況下去分享，另外，因為我現在還是很菜的工程師，如果是更資深的工程師，可能也會跟我遇到的實際狀況有差異，所以內容僅供參考！
一整天大致上的工作內容
每天工作內容會依照實際手上被分配的事項有不同，不過大多數時候，主要都還是進行這些工作內容。
1. 例行的 stand up meeting
2. 修正bug或參與專案開發
3. 查資料找答案
4. 其他會議
早上例行的stand up meeting
每天早上到公司後，大概在10點15分左右，我們部門就會開始進行stand up meeting，stand up meeting的進行方式有別於大多數公司正式開會的方式，並不會待在辦公室裡開上超過30分鐘的會議，就是很簡單地大家圍一個圈，站著簡述昨天上班的一整天大概進行了什麼工作內容，今天又預計進行哪些工作內容。偶爾有一些需要即時同步的事項和提醒內容，相關人員或是主管也會在這個早上的會議告訴大家。
修正bug
如果手上有比較急的bug單，通常就會處理bug單，在我剛進入公司時，比較常會被分派一些bug單，透過找bug的發生原因(Root Cause)，也讓很菜的我對專案比較熟悉。
參與專案開發
前期大多都是支援一些小小的bug單，還既有功能的變更單，最近才開始參與專案的開發。因為是前端工程師，所以在參與專案開發時，主要工作內容分為切版、串接api。切板時會接觸到UI設計師，並依照他們出的設計圖製作畫面；串接api時，會接觸到後端工程師，依照後端工程師給的api contract來進行串接。在參與專案的開發時，有時也會需要和規畫專案內容的BA或PM溝通，因為有時候拿到的開發用文件，可能會不夠清楚，或是有需要釐清的部分。
查資料找答案
不管是在修bug，或是支援專案開發時，偶爾都會出現一些自己不知道該如何解決的問題，這個時候就會花一點時間查資料。目前為止需要查資料時，幾乎都能找到自己需要的資料，或是讓我有靈感想出解決辦法。
其他會議
除了早上的會議外，自己部門每兩個禮拜還會有一個sprint的回顧檢討會議(retro)，在這個會議中，大家都可以輕鬆地發表自己的各種想法。另外，偶爾還會需要參加SRS會議，在會議中，主要是負責的BA說明這次的SRS的內容，和會需要調整、修改、增加的開發項目。
在邁入第五個月的菜鳥前端工程師生活中，其實大多時候的工作內容，主要還是在進行開發和修bug，雖然看起來好像都在做差不多的事情，不過實際上在開發不同功能時，偶爾還是會遇到一些新的挑戰，所以到目前為止，還是都感覺非常有趣、有成就感。這就是菜逼八的我一整天上班生活中，會做的事情。
這次的小分享就到這裡了，大家掰餔！
- 5月 01 週六 202120:19
【前端新手日記】Vue.js學習筆記(6)-Vue2的Option API和Vue3的Composition API
這陣子為了開發新功能，主要都在接觸Vue3，前陣子也在公司內聽了前輩大大準備的Vue3分享，所以這次想要針對Vue2的Options API和Vue3的Composition API寫一篇學習紀錄。
為什麼Vue3加入了Composition API？
在Vue3中，依然可以使用Options API，但為了以下幾個部分，所以在Vue3加入了Compositon API。
1. 提高對TypeScript更好的支援度。
2. 增加元件的易維護性。
3. 讓功能被拆分出來並能重複利用。
Options API的寫法
在Vue2中，元件內在data區塊擺放狀態資料，在methods寫功能邏輯，就是Options API呈現的元件內容。雖然資料被放到一個區塊，功能邏輯被放到另一個區塊，看似有做一個分類，但若想要維護單個功能，就需要在好幾個區塊中，找到對應的資料或是方法進行修改，這也就讓想進行維護修改時，沒那麼便利。
即使是跟某一個功能有關的資料或methods，還是必須被拆分到data、methods裡面。
為什麼Vue3加入了Composition API？
在Vue3中，依然可以使用Options API，但為了以下幾個部分，所以在Vue3加入了Compositon API。
1. 提高對TypeScript更好的支援度。
2. 增加元件的易維護性。
3. 讓功能被拆分出來並能重複利用。
Options API的寫法
在Vue2中，元件內在data區塊擺放狀態資料，在methods寫功能邏輯，就是Options API呈現的元件內容。雖然資料被放到一個區塊，功能邏輯被放到另一個區塊，看似有做一個分類，但若想要維護單個功能，就需要在好幾個區塊中，找到對應的資料或是方法進行修改，這也就讓想進行維護修改時，沒那麼便利。
即使是跟某一個功能有關的資料或methods，還是必須被拆分到data、methods裡面。
- 4月 17 週六 202109:54
【菜逼八是我】成為前端工程師的第四個月，我有什麼不一樣？工程師不只需要會寫程式！
不知不覺已經邁入第四個月了，比起前幾個月，在公司上班的狀況又更自在了，也開始參與更多工作內容。
這段期間一樣不斷地被新的知識衝擊，也一邊不斷地透過工作上的踩雷學習(隔壁的前輩同事大概快被我煩死了吧XD)，雖然這陣子比較少煩我的同事了，但偶爾還是會遇到卡關太久的時候，所以這陣子偶爾還是會尋求前輩的幫助。但比較不一樣的是最近在做手上的任務時，除了把功能做出來以外，已經開始會提醒自己思考用更好的方式完成，雖然被code review的時候，主管前輩還是會留下很多建議給我，但我覺得這樣反而才能讓我繼續改進自己。
另外，這幾個禮拜因為開始參與一些小專案的開發，不再只是打打下手，是真的需要自己完成一個頁面，並且把這個頁面的功能時做出來、串API，所以也開始不只是單純地默默坐著自己的事情，還需要跟BA、設計、後端做溝通，這時候就很感謝過往的經歷，讓內向的我不害怕溝通這件事，甚至可以很熟練地進行溝通，只是自己在技術面還不太有自信，所以有時候溝通上，太過技術類的內容，依然還沒有說明得太清楚。但也因為以前翻譯需求，讓我很擅長(自以為XD)用各種說法讓對方聽懂，所以遇到難解釋的內容，一樣可以想得到用其他方式說明，這時真的很感謝過往的經歷。
最近除了溝通，前幾天也剛完成了一個小專案，並參與專案的demo過程，負責了自己完成的頁面的操作demo。其實我不太習慣很多人面前講話，但是只要一想到反正是用中文發表，就又瞬間覺得這其實沒有那麼困難。這次的demo我也就沒有像以前在做簡報發表一樣，特別寫出講稿並且背起來，只是大概寫了我可能要說明的內容架構，也在家自己大概練習了一下。實際demo的過程，我們整組進行得都很順利，我在進行自己的部分時，也沒想像中緊張，只是被問問題時，依然還是抖了一下，不過我的隊友都很優秀，在我有點疑惑時，就會出來拯救我，真的非常感謝他們。
最後說一下這段期間的心得總結！
除了我自己當然還得加把勁學習外，更多的感觸是～
「工程師不只要懂得寫程式，還要懂得溝通、說話。所以如果是科班出身的人，還是必須磨練這一個部分。如果是後來轉職的人，這一部分的軟實力就能成為我們的優勢！」
各位還在轉職道路上的人！過去的走的路真的不會白費，只是換個方式將這些經歷運用出來而已，大家加油！
這段期間一樣不斷地被新的知識衝擊，也一邊不斷地透過工作上的踩雷學習(隔壁的前輩同事大概快被我煩死了吧XD)，雖然這陣子比較少煩我的同事了，但偶爾還是會遇到卡關太久的時候，所以這陣子偶爾還是會尋求前輩的幫助。但比較不一樣的是最近在做手上的任務時，除了把功能做出來以外，已經開始會提醒自己思考用更好的方式完成，雖然被code review的時候，主管前輩還是會留下很多建議給我，但我覺得這樣反而才能讓我繼續改進自己。
另外，這幾個禮拜因為開始參與一些小專案的開發，不再只是打打下手，是真的需要自己完成一個頁面，並且把這個頁面的功能時做出來、串API，所以也開始不只是單純地默默坐著自己的事情，還需要跟BA、設計、後端做溝通，這時候就很感謝過往的經歷，讓內向的我不害怕溝通這件事，甚至可以很熟練地進行溝通，只是自己在技術面還不太有自信，所以有時候溝通上，太過技術類的內容，依然還沒有說明得太清楚。但也因為以前翻譯需求，讓我很擅長(自以為XD)用各種說法讓對方聽懂，所以遇到難解釋的內容，一樣可以想得到用其他方式說明，這時真的很感謝過往的經歷。
最近除了溝通，前幾天也剛完成了一個小專案，並參與專案的demo過程，負責了自己完成的頁面的操作demo。其實我不太習慣很多人面前講話，但是只要一想到反正是用中文發表，就又瞬間覺得這其實沒有那麼困難。這次的demo我也就沒有像以前在做簡報發表一樣，特別寫出講稿並且背起來，只是大概寫了我可能要說明的內容架構，也在家自己大概練習了一下。實際demo的過程，我們整組進行得都很順利，我在進行自己的部分時，也沒想像中緊張，只是被問問題時，依然還是抖了一下，不過我的隊友都很優秀，在我有點疑惑時，就會出來拯救我，真的非常感謝他們。
最後說一下這段期間的心得總結！
除了我自己當然還得加把勁學習外，更多的感觸是～
「工程師不只要懂得寫程式，還要懂得溝通、說話。所以如果是科班出身的人，還是必須磨練這一個部分。如果是後來轉職的人，這一部分的軟實力就能成為我們的優勢！」
各位還在轉職道路上的人！過去的走的路真的不會白費，只是換個方式將這些經歷運用出來而已，大家加油！
- 4月 02 週五 202122:48
【前端新手日記】Vue.js學習筆記(5)-Vue的v-slot、Named Slot和Scoped Slot
關於Vue的slot用法，雖然以前有查資料了解用法，但是因為沒有實際使用的經驗，其實當初查了相關資料後，還是有看沒有懂，久了也就先把這塊放掉了。直到上戰場，才發現slot的用法其實很常出現，所以也就代表這個東西一定要搞懂了。最近又剛好在重構專案，需要把Vue2改寫程Vue3，有遇到一些slot的內容，花了一點時間去釐清slot的用法，於是就決定好好地寫一篇slot的學習紀錄。
Slot是什麼？
Slot的中文就是「插槽」，可以在子元件中設定一個插槽，當在父元件中使用這個子元件時，就可以從父元件中把想放入的內容放入這個已經在子元件中產生的插槽。這不禁讓有點宅的我想到一個比喻，這其實就跟武器鑲嵌是同樣的概念，在武器上開一個插槽，角色要使用這個武器時，可以自己決定要不要把寶石鑲嵌上去，是說這種武器上的鑲嵌插槽在韓文中真的也叫做slot(슬롯)XD。
- 3月 20 週六 202110:41
【我是前端工程師！？】文科少女的前端工程師面試紀錄
這禮拜收到通過試用期的信件了！（開心）
雖然我還是很菜，很廢，但是主管還是願意繼續用我，我真的很開心也很感謝他們，也希望自己能不忘初心的繼續強化自己。
好啦！回歸本篇重點，其實面試過程的紀錄很早就寫好了，但覺得自己還是過試用期再PO出來比較好，廢話不多說，直接進入我過程有點悲催的面試旅程！
這個面試之旅自己總共投了36封履歷，獲得了9個面試機會(其中包含4間非我主動投遞的公司)。在36封履歷中，有一封透過Yourator，一封透過公司指定的google表單投履歷，其他則是透過104投遞履歷。轉職之路不簡單，很心累又費時，但在這過程中，也讓我學習到不少東西，也接觸到一些以前沒接觸過的事物。
面試公司
以下是這次有經歷面試階段的公司。
雖然我還是很菜，很廢，但是主管還是願意繼續用我，我真的很開心也很感謝他們，也希望自己能不忘初心的繼續強化自己。
好啦！回歸本篇重點，其實面試過程的紀錄很早就寫好了，但覺得自己還是過試用期再PO出來比較好，廢話不多說，直接進入我過程有點悲催的面試旅程！
這個面試之旅自己總共投了36封履歷，獲得了9個面試機會(其中包含4間非我主動投遞的公司)。在36封履歷中，有一封透過Yourator，一封透過公司指定的google表單投履歷，其他則是透過104投遞履歷。轉職之路不簡單，很心累又費時，但在這過程中，也讓我學習到不少東西，也接觸到一些以前沒接觸過的事物。
面試公司
以下是這次有經歷面試階段的公司。
- 3月 13 週六 202110:36
【前端新手日記】Vue.js學習筆記(4)-在自定義元件上使用v-model
一般提到v-model，大家應該都知道它的作用是資料的雙向綁定，也知道他到底有多麼的方便，這次讓我們進一步來了解在自定義元件上該如何使用v-model。
什麼是在自定義元件上使用v-model？
以往使用v-model的時候，都是很單純地在要使用的input標籤上寫上v-model，並且在v-model上綁定一組資料(如下圖)，這就是一種預設好的v-model使用方式。
什麼是在自定義元件上使用v-model？
以往使用v-model的時候，都是很單純地在要使用的input標籤上寫上v-model，並且在v-model上綁定一組資料(如下圖)，這就是一種預設好的v-model使用方式。
- 2月 20 週六 202118:42
【亂亂寫筆記】JavaScript - 陣列與陣列內元素比對
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，
如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，
不會有太多詳細說明。
用Ａ陣列的元素與Ｂ陣列元素進行比對
實作情境
有陣列A和陣列B，裡面會被放入型別為number的元素，
新的元素只會進入陣列B，但是陣列A的元素卻有可能同時存在於陣列A及陣列B，
所以當陣列B出現陣列A中沒有的元素時，就等於有新的元素被新增近來了。
也就是說必須比對陣列B的元素有無存在於陣列A中，若陣列B有不存在於陣列A中的元素，
代表陣列B有新的元素。
簡單來說，就是檢查陣列B中，是否有同時存在於陣列A中的元素。
若陣列B中有著沒同時存在於陣列A的元素，則回傳true(代表陣列B有新元素)；
如果陣列B中的元素都同時存在於陣列A中，則回傳false(代表陣列B的元素都是舊的元素)。
實作方式
利用filter&indexOf重新組出一個新元素的陣列，再用新元素陣列的length判斷是否存在新的元素。
打工仔人森 (3)