第一份工作離職後到現在學了什麼？

突然間，不知道為什麼好想整理一下自己從上份離開後到底學了一些什麼。上一份是在 2021 年 5 月離職，但恰巧碰到疫情爆炸，所以休息到九月我才又開始上班QQ

而這篇，我除了會寫我學了些什麼之外，我還會針對這些技能去撰寫一些心得以及想法。

在目前的公司，雖然有其他同事，不過都是以後端為主，雖然也有少數兩個是前端，但我卻是必須要帶領他們的狀態。所以變成很多東西，即時我不會但我還是硬著頭皮上了，結果有趣的是公司本來的專案有用到 Ant Design，但我完全沒用過，另外兩個前端同事說有相關經驗，結果入職過了兩個禮拜，居然是我告訴他們要怎麼做。

也因為這件事情我發現，其實我的自學能力真的算滿強的，畢竟我自己私底下都還有在進行一些自我進修，像是學一些「學習如何學習」、「如何與人良好溝通」等等的課程，讓我自己的能力變得越來越強，我是還挺喜歡種感覺的！

而在工作用到的 React 上，因為似乎我算學得比較細了，雖然只限在 React 方面就是了XD，但公司前端就是 React，不過因為第一份工作是全端，所以後端我也算懂一些些，在現在公司洗禮之下我才知道，原來並不是所有公司都可以這麼嚴謹。

但這些部分就不用談太多了，來寫寫我最近學了一些什麼吧！

列表

因為這篇算是隨性寫寫的，其實我也不知道詳細要寫什麼，所以就很隨性的取了一個標題，所以就來把我這段期間學到以及本來會，但又更加加強的技能列出來吧！

軟技能

• 能更清楚地討論規格

新技能

• Ant Design
• Tailwind
• Redux toolkit
• Saga
• Prettier
• Husky
• lint-staged
• 專案打包成 package
• Next.js
• TypeScript

舊技能再加強

• Eslint
• React hook
• Redux hook 版
• React Router v6
• Zsh + omz

針對這些技能的心得以及想法

軟技能：能更清楚地討論規格

這個多虧餘我額外去上的課程，在那個課程中，我演練了很多與人溝通的關鍵，而且那個課程有趣的是真的幫你把溝通之間的關鍵分析得很透徹，像是有一些人之間的溝通其實都是要達到「雙向溝通」，這個字其實有它自己的含義，而且在跟別人溝通的時候是要有「意圖」去發送你的話以及接收的。

用個反面例子來舉好了，很多人在溝通，常常會看到兩邊的人講了很久，但其實兩邊都是在雞同鴨講，其實關鍵就是兩個人都沒有接收對方話語意願，甚至彼此雖然嘴巴有在講話，但其實沒有發送「意圖」給對方，而這部分我是覺得挺有趣的，以後有機會可以分享看看。

新技能：Ant Design

這個是一個由中國人發展的 UI 套件，類似 Bootstrap。

只是我在這間公司使用個的時候，我才注意到，原來老師說的都是真的，只要懂其中一套 UI 套件，上手其他的就會很快，我在這邊就如同我前言講的，我很快就上手了，而且還直接根據公司的需要慢慢地改進公司的頁面，從毫無表單驗證，但可以隨著輸入驗證，這些都是我幫我現在公司增加的功能。

在這裡先說說我當時在協助公司增加上述功能的時候的公司前端產品，是一個後台系統，可以用來上架公司客戶的 App 的行銷活動，所以會有大量的表單。

而公司的產品，原本的做法是一直不停地複製貼上表單，然後一個一個欄位改，而這樣其實很不直覺，所以為了可以快速的渲染出表單以及更好增加跟更改功能，所以我演進到最後甚至還開始直接用寫設定檔的方式搭配寫好的 Component，可以直接 Render 出一個頁面的表單。當然，通通都包含表單驗證的功能，所以就不用像原先的方式一樣，要不停地寫著重複的程式碼。

而後來公司要我加入另外一個新產品的開發，所以就停止了對於 Ant Design 的學習了。但我也算是鑽研了不少，像是 Ant Design 的表單設計方式以及用法，他的 Range Picker 很有意思，這些經驗也讓我帶到下一個新產品上，因為在公司下一個新產品，在我建議之下用了 Tailwind。

新技能：Tailwind

這個是一個很有趣的工具，我是在休息那段期間被推坑的，不同於以往的 UI 套件，這個只是提供了一堆的 utility class 供人開發使用，然後就可以直接在 html tag 上寫 css，因為他拆得非常的細緻。

不像傳統上我們都是另外再開個檔案去寫的 class。而在現在公司，因為要我做的是一個 to c 的產品，會需要大量的客製化，但這個 to c 的方式不一樣，我們是有提供客戶行銷 App，讓客戶可以行銷他們的客戶，而公司的這個新產品是希望可以用 Mobile web 來呈現，而我當時就推薦使用 Tailwind 來實作，就是因為會有大量的客製化。

尤其是後來實作的時候，發現真的我們就只需要在 .jsx 檔上面做開發就好，搭配雙螢幕就是直接敲在 tag 上，儲存一下，畫面就改了，開發起來真的有一種說不出的愉快。

而且 Tailwind 還提供一堆注入方式，也就是說可以直接覆蓋原始的設定，所以我公司就可以拿來快速切換專案的主色、副色那些等等。

新技能：Redux toolkit & Saga

我本身來說，其實我只會使用傳統上的 Redux 甚至是我之前用的都是 class 的 reudx，也就是那種需要 connect 的模式，而在這間公司，因為是全新的專案，所以自然就是直接用比較新的技術，而我也在這發現原來我學習能力真的有成長了不少，我在 toolkit 上面大概只花了半天到一天的時間，就大概掌握怎麼使用了，不過這好像還只是小事。

而在 Saga 上，我其實之前真的是完全沒用過，redux 的 middleware，其實我只有用過 Thunk 而已，而且其實我前公司是沒在用 Redux 的 middlewre 的。

而我花了大概兩天的時間，稍微摸索跟學習一下，就開始為了公司的專案特性直接建立起所需要的模式了，包含資料夾結構以及未來要如何建立跟使用這些 API。

而最近也在實作首頁上面，直接套了八隻 Api，這八隻有六隻彼此是有關聯，有的 API 是需要其中的某幾筆資料，因為首頁需要那隻 API 裡面某些資料做一些粗略地顯示，然後我就直接在 Saga 上建立了首頁專用的 API，然後分別把這些資料拉下來以及做整理，變成純粹首頁需要的資訊，然後存進 store，交給首頁使用。中間還包含一些登入後才能會顯示的資料，所以這點真的挺有趣，因為打了這麼多 API 跟這麼多資料要同步，結果寫一寫那隻 Saga 的 function 居然不到一百行，而且是高可讀性的寫法，真的很有意思。

新技能：Prettier & Husky & lint-staged

這個部分其實是我私底下就有在練習使用，前期為了字典這個 side project 而用上的，結果沒想到在這間公司會有需要用到，最主要就是為了要同步 coding style，變成可以搭配這些工具，強制大家的 coding style。

而我也從設定這些當中，學習到了更多的細節設定，像是 lint-staged 可以設定要掃描哪些檔案，然後 pre-commit 的時候可以做一些事情，還有 pre-push 也可以，但這邊沒有實作，因為討論後，需要可以在 commit 就把該擋的都擋了。

新技能：專案打包

在這間公司上專案打包的方式，應該算是個很特別的技能，雖然我沒實作過，但嚴格上來說應該是要使用 webpack 的才對吧？

但在我公司，因為時程的關係，所以我們選擇的是使用 Cra 搭配另外設定 babel 把特定資料夾底下的檔案轉換成提供給其他專案使用的 package。

而在這邊我也學習到，其實是可以上架到 npm 的，但是因為是公司私人在用的專案，在 npm 上，是要付費才可以私有使用，否則要公開，結果最後發現到原來可以直接安裝 GitHub 上的 repository，所以我們目前前期開發階段都是使用這種方式安裝其他的 Repository。

有機會的話，我也要來介紹一下把某些特定東西打包成專案，因為我們算是滿特別的，像是會員相關頁面，我們就是一個 repo 專案都放他相關的頁面跟 Component，然後這樣算是一個 repo，等到要給客戶的專案的時候再把這些模組拼一拼，變成一個完整的專案。

但這種時候就有一個問題，就是很難 debug，所以有機會的話，我會寫一篇文章，介紹一下我後來想到的，比較不太一樣的資料夾結構以及如何直接不要跨 repository 就可以 debug 的方式。

新技能：TypeScript & Next.js

這部分是我私底下在練習的技能，這兩者其實我都嚮往滿久，是我滿想學會的技能。

TypeScript 我前公司是有用在後端，但我當時是完全不了解，然後就直接硬上，所以基本上就直接抄其他的改一改，而我到了後來寫 TypeScript 那篇文章的時候，才正式真的學了 TypeScript 的基本，所以對我來說算是新技能吧XD

而 Next.js 的部分，我是覺得真的是一個很厲害的完成框架，因為 React 其實還只是一個 UI Library(官網說的)，他是要搭配生態系中其他的套件才比較算是一個框架。

讓我比較驚豔的是 filed-base routing 以及他眾多完善的功能，這些我陸續後續都會慢慢的學習。

而不敢說現在很為用，因為我六日上課其實有一段期間，導致我一直沒空去做我的字典 side project，而這些課程預計至少還要再半年左右，但這些課程都可以讓我綜合能力提升，像我現在在公司就可以更容易也更能夠把需求了解清楚，甚至可以更好的優化程式碼，使之更簡潔。

舊技能再加強：Eslint

我從一開始就有在使用 ESlint，拜程式導師實驗計畫的要求，一直以來都處於 ESlint 的磨練之下，而好消息是以前我是只知道如何寫出符合 Airbnb 規則的程式碼，但我到了現在的階段，卻是能夠去了解並且修改 ESlint 的設定，所以我也針對公司的專案需求，去額外新增了所需要的設定，當然是朝向更嚴格的方向了，哈哈。

像是在 API 模組中，因為都是跟 Redux、Saga 相關的設定，所以都是 .js 檔的程式碼，然後 AirBnb 很多時候就沒檢查到(不過我猜可能是 prettier 會關掉一些規則)。

而現在我可以根據所需的設定了，像是強制 Camel Case，後來被我改為強制全部都要等等的。

等於是我更了解 ESlint 以及其相關設定的方式了。

舊技能再加強：React hook

終於，我終於可以在工作上用到 Hook 了XD，雖然我當時在轉職的時候，就已經會使用 Hook 了，但是一直沒有產品級的使用經驗。

因為我在前公司的專案是只使用 Classical component，也只能用，而在進入這間公司的時候，專案更舊，所以也是…。這導致我差點因為這樣就直接想再換工作XD

但後來沒有，因為過了兩個月後就有新專案要給我們去實作，想當然爾，自然就是純粹使用 Hook 了。不過好像也沒什麼好說了，就是 hook，只能說讚，搭配 Tailwind 更讚。

舊技能再加強：Redux hook 版

感覺這個其實同上，因為就是一些 Method 變成 hook 了，終於不再一長串的 connect 、 mapStateToProps 什麼之類的了XD

舊技能再加強：React Router v6

這算是一個新玩意，會有 V6 當初可以說是很有意思，因為是有人出了一個更簡單的 Router 本來要作為競爭對手，但沒想到卻直接兩者合併，當然也就是更簡單更好用了。

我覺得比較讚的就是 useRoutes 可以透過設定檔很簡潔的產生出 Router。而我也利用這項特性去撰寫一個符合公司用途的。

記得前面我說，公司會有一個會員的模組，然後裡面都是放跟會員有關的頁面嗎ＸＤ

這個會員模組，底下可能有一個自己的 Route config，然後我們到了 UI 層，就需要把 member 上 Route config 加上 /member 的前綴，簡直考驗我處理資料的能力。

也就是說本來 member 模組自己有 /、 /register、 /login等等，但等到了 ui 層面，要自動加上前綴變成 /member/、 /member/register、 /member/login ，當然囉，還有一堆模組都要，像是優惠券模組、品牌模組等等相關的頁面模組，聽說至多有 20 幾個，所以就搭配 useRoutes 以及處理資料的 function 來達成。

但其實沒這麼簡單，因為可以高度客製化，所以這個 Route 又要可以被取代，所以可能本來你登陸頁 /member/login 是預設長 A 的樣子，但客戶不要，要變成他自己想要的 B 模樣，所以我們就會在 UI 層刻出他要的 B，然後取代原本的 route，還滿活的XD

舊技能再加強：Zsh + omz

我之前寫了一篇改造 Windows Termial 的文章，那篇讓我受益良多，甚至我在這間公司還推薦同事安裝已解決他們遇到的問題。

不過後來我自己也私底的研究了更多，像是如何撰寫 Bash script。好吧，其實我是透過 Bash script 來學習如何使用 zsh 的 script。

然後是如何撰寫指令的縮寫，甚至發現原來 omz 本身就內建許多的指令縮寫，只要啟用就好。

而且還記得我說我公司是專案是屬於多 repository 嗎？所以我也針對這些 repository 要如何更新，寫了一鍵更新的 script，然後每次只要三個英文字就可以全部更新，還節省滿多時間的XD

然後是 power10k 的主題，我也研究得更透徹，知道要如何變成我喜歡的樣式，這些都是挺有意思的經驗ＸＤ

結語

沒想到我這麼久沒寫文，依然還是一個很會寫廢文的人。

這次總結下來，原來實際上我還學了不少，但礙於篇幅，怕寫下去太多太久，所以就先到此為止。

當然實際上我學的不只這些，還有更多更細節的東西可以詳細地說出來，只是我後來想想，就當時想到的列表的這些寫一寫就好了，不然真的會拖到太長太久。

所以這篇就到此為止了，謝謝觀賞！