轉眼間，即將要邁入一年半的前端工程師人生了！沒錯！我還活著！（是說昨天還夢到自己依然是一位遊戲公司的營運PM，準備被公司派去韓國總公司出差呢。但是會夢到這個夢並不是因為我還沒適應現在的生活啦！可能單純只是有點懷念，呵呵。）
今天突然想來寫一篇心情札記文(?)，除了因為即將邁路一年半這個里程碑，也想透過寫文章回顧過去和展望未來，整理一下自己這段期間的思緒。職場生活概況首先，來講講這陣子工作近況。
最近因為公司內部分組，讓前端的業務量分成兩半，而我所屬的組別剛好又是比較不會有新需求的組別，所以近期大多數時間跟前年不太一樣，不是專注於前端相關需求的開發，而是在碰一些完全沒有學過和碰過的CI/CD和nginx，因為我們預計要把前端的部分，從原本混著api內容的大專案中拆出。雖然因為是我沒有碰過的東西，而遇到不少挑戰和挫折，但會有機會碰這部分也是因為在年底面談時，有跟主管提到想要試試看這些新東西。這段期間真的接觸了好多我從來沒仔細認識和思考的知識，主要是HTTP相關的網路與伺服器連接的內容。真的沒想到原來網頁在向伺服器發送request和接收response的這段，有那麼多神奇的操作方式，可以透過path導轉到別的地方，或去不同地方拉取資料。這幾天應該也差不多會把這部分的任務告一段落，不過昨天上到staging上的時候，因為我自己還沒完全理解staging上CI/CD的運作方式，導致出現了一些問題，還好老大出手相救，我當下真的完全慌了，甚至不知道要怎麼查問題點。總結來說，這段期間雖然不斷地燒腦、查資料，並且獲得許多挫折感，但是完成後的成就感也不少，即使這段期間自己認為不算真正理解公司內部完整的nginx的設計，但的確也從中學到了不少東西。
再來說說前端開發業務量減少後，我們主要都在做什麼。
除了近期的這個調整CI/CD和nginx的任務外，還研究了以下這兩個東西：
領域驅動設計(Domain-Driven Design，縮寫DDD)
原本是預計用這個架構來重構前端專案，但在研究和POC過後，發現如果只放在前端專案中，套用DDD的架構，可能會遇到不少問題。而且整體評估的結果是缺點多於優點，所以暫時不考慮以這個方式進行。不過在研究DDD架構和做POC的這段期間，也有一些收穫，除了了解軟體的設計架構外，為了實作POC，也去接觸了一些design pattern。
微前端框架qiankun
微前端這個詞，其實我原本並沒有聽過，也是在這次的研究後才知道什麼是微前端。因為本來專案的某個部分就有要拆出來獨立成另一個專案維護的打算，所以原本是預計用這個框加下去將專案的不同部分組合在一起。不過在研究和POC過後，發現這個框架其實只是一個強化版的iframe，有一些地方雖然比iframe好用很多，但仍然無法滿足我們所有目前的使用情境，所以最後結果一樣是不考慮使用。但也因為去研究這套框架，才讓菜到不行的我認識什麼是iframe。
老實說在研究這兩個新東西的期間，自己當下感受上會覺得有點恐慌，因為感覺就是單純的研究和POC，沒有任何實質的產出，就會覺得自己好像沒有做什麼事情，但回想起來自己獲得的一些知識也許當下沒有辦法有直接的產出，但在日後需要進行重構，或是切分專案以微前端架構進行開發時，應該還是能帶來一些幫助，因為自己的眼界已經被開拓了。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
前陣子有遇到需要在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都被執行了。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
前陣子剛好需要在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檔案來設定。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
之前偶爾會在公司的專案碰到前人用Rx.js寫的內容，但是天資愚鈍的我幾次自己嘗試去理解Rx.js的概念，都好像通了，又好像沒通。直到前陣子讀書會上，Ken大大分享觀察者模式(Observer Pattern)，這個Rx.js主要運用到的設計模式，才感覺自己應該有比較通了，所以想說這次就試著從上次讀書會中學習到的內容，延伸做一個Rx.js基本概念的學習筆記。觀察者模式(Observer Pattern)是什麼？如果去查相關資料的話，可能會查到類似的說明「observer訂閱observable後，當事件發生，observable就會去通知訂閱這個observable的observer。」
(這不是在繞口令，但看起來很像在繞口令)
雖然這句話，看起來不太難懂，但是對於當初第一次碰到這個pattern的我來說，observer(觀察者)和obervable(可觀察者)這兩個詞其實很抽象。等比較理解了之後，才發現其實沒那麼難。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
這陣子在做內部專案要用的元件，像是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就會有被點選和取消點選的效果。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
雖然每天主要還是使用Vue，不過因為一些需求，而開始接觸到一些跟React有關的東西，也就開始跟同事討論一些React的寫法。這次就來從最最基本的部分開始從Vue與React的比較學習React！也就是基本到不行的state和props！State部分Vue不論是Vue2還是Vue3，在data(state)部分都有一個特點，就是當data(state)有變動時，畫面上也會顯示對應的變動，不需要另用使用set函式去變更data(state)。
Vue2：在Vue2裡，只要將state放在data(黃框的部分)裡面，就會有這樣自動響應的效果，只要呼叫addCount函式(紅框部分)，count數字就會變動，畫面上顯示的count也會是變動後的數字。
Vue3：在Vue3裡，需要另外用ref或是reactive包裝起來，才會有這樣自動響應的效果，在下面的情境，因為count有使用ref(黃框部分)，所以當count有變動，畫面就會同步顯示變動後的數字。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
最近開始嘗試script setup的寫法，雖然少寫了很多東西，但在用的過程中，因為使用前沒先看仔細說明書，所以還是有碰到一些小小的雷，這時候就是該來好好學習＆寫筆記的時候啦！
因為會以實際應用的情境為主，所以基本上會專注在我自己在實務過程中，比較常會碰到的用法，那就直接進入正題。<script setup>是什麼？是一種在SFC(Single File Component)中使用的語法糖，在使用這個語法糖時，大多數時候跟使用<setup>沒有太大的差異，但還是有些地方需要注意。另外，這邊也簡單提一下用這個語法糖比較大的優點是什麼，主要是不再需要透過return，才能在template使用特定的變數或函式(也包含import進來的內容)，也因為如此，能讓程式碼看起來更簡潔。
單純用文字說明，可能感受不出差異，直接看範例吧！一般<script>
<script setup>
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
前陣子在做公司的專案時，遇到一個用 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。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
11月一整個月都沒有寫部落格，不是耍廢去了，而是去挑戰一個讓自己肝超級爆掉的活動，就是六角學院舉辦的【The F2E 前端 & UI 修練精神時光屋】。
會參加這個活動的原因主要是今年就快要結束了，眼看該產出作品的目標尚未達成，就藉由這個活動逼自己產出一些作品了！
其實一開始本來是想用React這三週的三個主題，但在白天需要上班的狀況下，想要一週產一個主題，對於React還沒有這麼熟練的我難度有點高，所以最後還是決定使用Vue3+TypeScript進行。
這三週我完成了哪些主題？第一週：台灣旅遊景點導覽這一週比自己預想還要快完成，因為有特別挑了一個比較好完成的設計稿，但其實這一週自己還算是在熱身階段，所以做的成品不算完整，也還有很多bug。另外，因為想要加快完成的速度，所以部分元件是使用element ui下去調整樣式來完成。
整體成品畫面大概是下面這張截圖的樣子，由於不太完整，就不貼出成品連結了。目前也預計用React重新寫一次這個主題！
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
又來補強自己的基本觀念了！！沒錯～小女不才，已經入行10個月，這個基本觀念還是沒有確實地建立起來。最近踩了一個大雷，不來好好學習不行了，所以就以這個主題來寫學習筆記了！
好啦！廢話不多說，直接進入正題啦！物件型別的特性－傳址(by reference)物件型別是傳址不是傳值，所以跟其他字串、數字不太一樣，在進行複製動作時，並沒有那麼單純。
物件型別因為是傳址，所以其實可以把物件型別用另一種方式去看，就是當宣告一個陣列變數或物件變數時，除了變數的內容，還隱藏著一個東西就是變數內容儲存的位址，也就是物件型別儲存的位址。這部分尤其在進行複製動作的時候，會有更明顯的感受，因為在進行複製時，由於傳址特性，雖然表面上把值複製出來賦值成另一個變數了，但實際上物件型別儲存的位址還是指向同一個，所以這個物件或陣列其實是一樣的東西，直接看一下小小的範例！
文科少女寫程式 發表在
痞客邦
留言(1)
人氣()
貼心小提醒！！
