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 的時候真的很通體舒暢，覺得自己又學到一點東西了!