当前位置: 首页 > 資訊 >

[Day 7]想不到有梗的標題LA(前端篇)

沒有想到連假結束後的第一天就要冨樫了...,我工作的公司在新加坡,而我在台灣full remote,我們中秋放連假而新加坡那邊沒放假,導致一開工就滿多事情要處理的(汗


這邊先講一下我要怎麼refactor,昨天我寫了Nav但有發現Bug跟寫得不好的地方,
https://ithelp.ithome.com.tw/upload/images/20210922/20140358HW3YsESvPZ.png
這是Bug,因為我是用複製同一個li所以一個地方onMouse其他地方也會觸發,是可以寫很醜就是新增相對應的isHovering和useState,但這太醜了,所以會將li抽出來成為獨立的component,然後將table的資料弄成List[Object]的格式,我現在還在想是直接hardcode在Nav.js還是放在config中亦或者是呼叫API取得list。
後兩者比較彈性,要改config或改API存list的地方,我可能傾向使用config,然後list拿到後去foreach Object,將名稱照片url使用prop傳進去component裡,這是目前想到的解法。


這邊分享一下我學前端的歷程好了,工作四年多,前三年都在寫jsp、servlet但主要還是在後端開發,當時只會照著前面專案的用法使用,一直對於CSS很苦手以及覺得虛無飄渺,但當時第三年時是知道現在三大主流框架Vue、React和Anglur,有嘗試使用過vue但一下子就放棄了,覺得前端離我很遠,後來到第四年到了一家新創工作,做的是Python後端工作,雖然不會寫前端,但之前工作時會使用瀏覽器的開發者工具去檢查錯誤是在前端還是後端,遇到問題時可以比較快的知道是前端還是後端出問題,然後那時幫公司進行AWS的架構規劃,讓所有前端專案以靜態檔的方式部署到S3的static website hosting,但當時的我也對前端抱持著敬而遠之的感覺。
第四年中間時接到了一個案子,是需要做一個呈現dashboard的網站,那時候才真正強迫自己學前端,那時候開發是使用Vue3 + Vite,因為Vue3出來才一陣子我查找網路上的教學,寫的都是Vue2 options api的寫法,再加上使用Ant的組件,完全不知所以然的靠著同事幫忙debug和Vue的黑魔法完成了網站,但後面透過Vite要部署上Server時,可是費了很多勁,有問題是真的不好搜尋到解法。

今年到了新加坡公司上班後,主要是開發API gateway使用JAVA Spring開發,大概onboard三個月後有天老闆slack我

Morris how familiar are you in developing a web portal?

就這樣踏入了一人全端開發之旅,老闆和我討論要選用哪個框架時,我諮詢了前端工作者的朋友們意見,最後是因為時間與熟悉度和入門難度而選擇了使用VueJS,但我心中還是嚮往著React,只是沒那個勇氣選擇。
這個Web portal是個執行三個多月的專案,從零開始的前後端之旅
前端使用Vue3因為我是CSS苦手,本想著使用element ui可以解決畫面,但事實證明只是浪費時間走歪路,因為沒辦法做出符合PM出的設計圖,加上我覺得我寫的架構非常的菜,完全沒有邏輯可言,那時後可能每兩個禮拜就大修整個架構,我記得拯救我CSS的是我跟著Youtuber的活動一起寫NextJS + Tailwinds CSS的活動,那個五天活動後我把element ui的頁面(整個專案)全部使用Tailwinds CSS打掉重練成PM出的設計,滿推薦這系列的影片。
專案雖然是使用Vue3但是都是在寫options api眼看因為對Vue的不熟悉快要被需求給虐爆的時候,我看了這個Build Web Apps with Vue JS 3 & Firebase,從沒系統的看過Vue的教學,這個課程的Composition API教學讓我週末看完,就把整個專案的options api都改成了Composition API,直到現在仍然覺得在前端上還很菜,但至少也讓我有一點信心自己應該是個還可以的Junior前端吧...