[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前端吧...


<<:  Day7 -104. Maximum Depth of Binary Tree

>>:  [Day 7]从零开始学习 JS 的连续-30 Days---流程图

新新新手阅读 Angular 文件 - Day03

学习内容 这一篇的内容,是纪录阅读官方文件 tutorial: A Hero Editor 的笔记,...

终极密码DC版

撰写大家熟知的终极密码 示意图 开始撰写 # cogs/guess.py @commands.com...

【Day 01】认识资料结构 Data Structure ( 使用 JavaScript )

一、什麽是资料结构 ? 当我们撰写程序时,会宣告变数来存放资料,这些资料会储存在记忆体中,在我们需要...

Day 31 - 迟来的铁人赛心得

某人可能会迟到,但从不缺席 (没x 失踪很久了好吗== 故事原点 在正式参加铁人赛之前,我从不知道...

自动化测试,让你上班拥有一杯咖啡的时间 | Day 16 - 如何选取下拉式选单的值

此系列文章会同步发文到个人部落格,有兴趣的读者可以前往观看喔。 在 E2E 测试中,不仅有选取元素...