iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2
Modern Web

前端工程師在工作中的各種實戰技能 (Vue 3)系列 第 1

[Day01] 前言:常見的前端實戰技能有哪些?

https://i.imgur.com/NZDr6qV.png
Credit: https://lilly021.com/angular-vs-react-vs-vue-js/

身為一個前端工程師,除了框架 (Vue, React, Angular 等等) 要熟悉以外,可能也會有人說這份 前端 Roadmap 懂一半以上,就能在求職市場上打滾過生活了,但如果你想要在工作中游刃有餘,或者是找到一份好的工作甚至更資深的職位,只會這些基本功是遠遠不夠的,因為實際上可能還會依據產品的性質、面對的客群以及團隊的工作流程或合作的對象,而有許多技能與難題是需要具備與克服的,那到底還有哪些常見的技能是我們應該學會的呢?

Hi,我是 Mia,目前任職於新創軟體公司的資深前端工程師,我想要在這三十天的系列文章中將自己在工作或個人專案中因應各種情境而去摸索的技能,挑幾個實用性比較高的主題寫成筆記記錄下來,此外因為我擅長的框架是 Vue.js,所以大部分的範例程式都會是用 Vue 做呈現。

系列主題簡介

  • 多國語系 (i18n): 隨著現在網路的發達和資訊的流通,開始出現許多跨國的服務和產品,這些服務和產品為了推廣到更深或更多的國家,而必須提供當地的語言或者是多數人能讀懂的語言給使用者。
  • Storybook: 前端工程師早期在接收到 UI 設計師的設計稿之後,將重複共用的元件 (Component) 已沙盒 (sandbox) 的形式產出並與 UI 設計師討論來確保與設計師的設計一致,以及向其他前端工程師展示該如何使用自己做好的元件。
  • Component Testing: 隨著共用元件被廣泛地使用,要如何確保這些組件不會因為不停的迭代或者是人為的失誤而引發多處的 Bug。
  • E2E Testing: 每一次產品上線前都會以人工的方式操作 UI 來確保系統正常,但隨著產品的功能越來越多,人工的測試除了沒有效率以外也可能會有遺漏,所以可以透過 E2E Testing 來進行自動化和增加測試效率。
  • 網站部署:當產品完成開發之後,我們需要把它放到網路上讓產品真的上線,這樣人們才可以搜尋得到。
  • CI/CD : 每次 testing 或是部署如果都要手動帶一堆參數去執行指令是非常麻煩的,所以如果可以透過 git 版控時就能自動去執行這些事,就能省下非常多的時間以及降低出錯的機率。
  • Open Graphic: 將網頁的網址貼至社群平台如 Facebook 或 Twitter 時,要如何讓網頁有較豐富的內容展示,如縮圖、標題、描述等,並提升網站的 SEO。

最後,可能會再視情況增減一些未列在上面但也還算常見的技能,此外每個主題之間是獨立的,大家可以挑選有興趣的主題閱讀即可。


第一天的分享就到這邊,如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章,如果對內容有任何疑問,或是文章內容有錯誤,都非常歡迎留言討論或指教的!

明天開始我們就要來分享實戰技能的第一個主題 Vue i18n ,那我們明天見!


下一篇
[Day02] Vue i18n - 導入 & 基礎用法
系列文
前端工程師在工作中的各種實戰技能 (Vue 3)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
WeiYuan
iT邦新手 4 級 ‧ 2021-09-16 01:03:18

請問前端學不動了怎麼辦?該如何保持想學習的熱情?

TD iT邦新手 4 級 ‧ 2021-09-16 09:28:09 檢舉

想知道 +1

我也潮想知道的~!

Mia Yang iT邦新手 5 級 ‧ 2021-09-17 00:51:58 檢舉

Hi WeiYuan TD windate3411
我覺得好像學任何語言都一樣,如果有一個目的性會比較有動力持續下去,不然單純的去學任一個技術都不會有那種我想解決什麼問題,所以一直不斷挖深的感覺。

0

請問前端正式與測試的Log
想請教大佬該如何記錄與管理

先感謝大佬的經驗分享

我要留言

立即登入留言