2021 F2E 鐵人賽心得
本次的鐵人賽任務為串接 TDX api，並且每周要交出一個作品，依序為台灣旅遊景點導覽、自行車道地圖資訊、公車動態時刻查詢，連續三周不中斷，真的是名副其實的鐵人賽 😂，完賽的時候雖然出現了嚴重的黑眼圈，不過這次的參賽經驗對我來說收穫不少，因此想要寫一篇文章來記錄比賽遇到的問題和開發的流程
這次規劃的每周要使用的技術為，不太熟悉、略為熟悉、非常熟悉，評估一開始的題目會比較簡單，所以選擇用比較不熟的技術來開始，一來想要挑戰自己，二來也是因為工作上接觸不太到，所以就透過 sideProject 來實作練習，平常工作開發都是寫 vue2，偶爾穿插 vue3，React 只有寫過簡單的 todoList 和圈圈叉叉並沒有寫過一個完整專案的經驗，所以就趁這個機會好好練習吧!
因此開發用的框架順序為
React、vue3+vite、vue2 + webpack
每周開發前會先用 notion 規劃要實作的功能，排序功能的優先度，如果開發的時候遇到 bug 也會一併紀錄上去，可以更有效率的去管理開發的進度
第一周
先使用 react create app 搭建開發環境，不過跟 vue cli 不一樣的是 node-sass、 router 等等都要另外自己裝，如果想要 build 的時候讀取不同的 env，還要再裝 env-cmd 並且在 package.json 更改 build 指令，如果想要更改 webpack 設定，必須要安裝 react-app-rewired，並且新增 config-overrides 來做修改，因此在建置開發環境上就花了不少時間…
接下來就面臨到一個難題，也是寫習慣 vue 的人在寫 react 會不太適應的地方
那就是寫法很自由，選擇太多，不知該如何是好
光是撰寫 css 就可以有很多種選擇，傳統的寫法、module.css、styled component、UI Framework…看得眼花撩亂，最後採用 styled component 的方式開發，不過遇到一個蠻頭疼的問題，那就是 styled component 沒辦法讀取 scss 設定的變數，這部分我改用 css 原生的變數來解決，但不知道正規的做法是不是這樣，再歡迎有經驗的朋友跟我分享
遇到印象最深刻的兩個 bug，一個關於 closeure 導致的 bug，一個是每次在 input 輸入一個字，畫面就會 re-render，這兩個錯誤都沒有報任何的 error 只能用盡各種土法煉鋼的方式來除錯，而且都卡了兩個小時以上，真的是讓我一度以為是否比賽就到這裡了(誤)，不過還好最後還是有把 bug 解掉，感謝萬能的 stackoverflow，深深體悟到千萬不能用寫 vue 的思維來寫 React，不然會踩到一堆坑
第二周
由於之前未曾用過 vite 開發，趁這次的機會來用用看，vite.config.js 的設定非常簡單明瞭，很好上手，重點是
非 !常 !快 ! 用過就回不去了 !
不像 webpack 傳統的打包方式，vite 採用 ES Modules 載入的方式，可以擺脫套件相依的束縛，雖然 vite 執行速度非常快，不過在開發過程中也是遇到不少匪夷所思的問題
serve 之後打開為空白頁面
打開頁面畫面空空如也只顯示 “cannot get /“ ，完全沒有頭緒，最後爬文爬到有人也有類似的問題，要先 build 過一次，才能正常的 serve，這裡才發現其實自己搞了一個烏龍，因為太習慣在 vue cli 執行 yarn serve 指令了，殊不知在 vite 裡面預設的 serve 指令其實是 preview dist 的功能(預覽打包出來的專案)，在沒 build 過的情況下，自然不會有 dist 資料夾和 dist 裡面的 index.html，因此預覽的結果就會看到 cannot get /，如果要開發的話記得要下的是yarn dev
除此之外也會偶發性的遇到執行 yarn dev 把專案 run 起來之後，用 chrome 打開頁面一直是空白頁，但是用 edge、safari 打開就是正常的，目前還是不知道是哪裡有問題…
vue 3 的話遇到比較有印象的問題就是將 reactive 物件中的一個 key 當作 props 往下傳，但當這個 key 改變了之後會發現失去了響應式，子元件偵測不到值的變化，將物件的 key 用 toRef 包住就解決了，還有就是要取 ref 的值一直忘記用.value 去取，除此之外並沒有遇到甚麼大問題
Tailwind
在還沒使用之前，看著那一長串的 class，覺得這樣寫有夠像 inline-style，不是很喜歡，實際用過之後，只能說..
真香
剛開始用 tailwind 切版的時候速度非常之慢，要一直查語法是甚麼，雖然有搭配Tailwind CSS IntelliSense套件輔助，不過還是要知道關鍵字的第一個字是甚麼 XD，等到大致熟悉後，只能說真的可以切很快，在切 rwd 的時候更是有感，以往要寫`@media screen and (min-width: 768px) {}`，現在只要 `md:w-1/2` 搞定!而且也不需要費心思去想 class 名稱，之前用 BEM 的命名方式開發，光定義 class 的命名就花了不少時間，假設你是用 vite 開發的話，非常推薦這個 package Vitawind ，可以很快地搭建 vite+Tailwind 的開發環境，超方便!
第三周
想要專注在處理資料，因此選擇了最熟悉的 vue cli 來開發，然後…然後就在 api 大海中迷失了方向，看著數十隻 api 完全不知道從哪裡下手，好多次都是接完了才發現資料不合又默默砍掉重練，完全是在考驗哪些 api 的組合才是最佳解的概念，再加上開發時間只有一個禮拜(還要扣除上班的時間 orz)，利用下班和假日的時間衝刺，中間做到一度很阿雜，不過還是撐到完賽了，美中不足的就是沒有時間好好測試功能，不過可以在一周內寫出這個專案，是該給自己一個掌聲了 👏，最後拿了一個小小的佳作獎，沒有入圍有點失落 😂，不過的確也發現自己還有很大的進步空間，這樣的比賽結果已經算是不錯了!
本次最大的收穫除了自己踩到雷獲得經驗值之外，可以觀看別人的程式碼從中學習也是一大收穫，看別人怎麼拆分 component、怎麼管理 api 等等，都是很珍貴的學習機會，尤其是自己不熟 React，剛好有很多經驗豐富的 React 開發者寫的專案可以作為參考，因為 React 寫法自由的緣故，可以看到不同風格的寫法還蠻有趣的，受益良多!
雖然每次遇到很難解的 bug 或問題就會 mur mur，為甚麼不要用我擅長的工具！要做不完啦！怎麼辦啦！(一萬個內心小劇場)，不過解掉 bug 的時候真的很通體舒暢，覺得自己又學到一點東西了!