2021年3月28日 星期日

六角活動:就職三個月以來的開發過程

目前公司使用的技術及工具

React、Next.js、GraphQL、Gitlab、AWS、TypeScript、Styled Components、Trello、Jenkins...等等,還有一些 CI/CD 相關的東西我碰不到。

目前就職剛滿三個月,這篇文章寫完就過了三個月試用期,但是我真的是六角的學生,所以這時候要推薦大神來六角!隨著找到工作之後,接觸越來越多不同的技術,發現大神來六角都找的到基礎教學,可以延伸再去找講師的文章或社群尋找學習資源,剛錄取的時候覺得挑戰很大,公司的技術跟在六角學的 Vue、RESTful API、SCSS 完全不一樣,不過轉念想想公司都不怕了,我有什麼好怕的。

環境建置

剛進公司就是把 VSCode 與套件裝一裝,比較重要的大概是 TSLint 與 Prettier 和 Docker ,主要溝通或問問題是直接走過去說,要留記錄或 OnCall、訂便當就是不同 Line 群,公司提供工作用 Mac 跟螢幕,還有 VPN ,排 OnCall 跟加班要用。

開發流程

目前在支援另一個部門,公司有兩個會需要前端的部門,專案都是 React + Next.js + TypeScript 的主架構,只是 CSS 是 StyleComponent 或 CMS 上傳原生 CSS 的差別,還有 React 版本導致一個可以盡量寫 Hook,作到結構與樣式分離,一個只能用 Class 的 this.State 和 setState。

整體的流程大概是:從 PM 收到需求,通常會連帶跟技術主管一起說或是由技術主管轉達,大概有修改已有資訊、加新功能、改樣式,偶爾會有哪裡顯示有問題需要檢查的時候,討論完要怎麼實作之後開始動手,一開始會弄不清楚檔案在哪裡?桌機、手機有沒有分開?資料呈現的時候有沒有經過什麼計算或處理?作好了以後先單機測試,然後提 PR ,在 Trello 登記,推測試環境自己再看過一遍,然後通知 PM 跟 QA。

注意事項

第一次當前端工程師,一開始作過各種蠢事:

  • 提完 PR 沒問推測試環境的指令
  • 練習 Git merge 到 master 
  • 改了桌機板,結果手機也有一個相同的頁面沒改到...
  • 比例導致畫面黑邊的問題不知道應該用 padding 比例處理,沒有及時求助跟處理
  • 為了檢查畫面需要假資料或是有資料的測試帳號,需要自己做假資料或是測試環境跟正式環境的資料不一樣需要確認
通常只要兩個部門的兩位前端主管沒有全部請假,有人可以問技術問題的話產出還蠻穩定的,通常有 deadline 或上線、demo...等關鍵字就是加班趕完,這三個月加了三天,產品要上線就是立 flag 的概念,總是會出錯要解決。

工作心得


由於公司是在台北內科需要低調的公司,因此專案內容的部分不方便分享,進公司之後是先練習了用 React 實做組件以及做 Unit Test,React 的 Class 生命週期跟 Funtion Component,然後練習接公司的 GraphQL API ,Git 跟 Mac 的使用,我平常有在打 LOL 所以一直都用 windows 開發,Mac 是連觸控板都不會用那種,要從申請 Apple 帳號開始學。

Git 跟六角 Git 直播班還是有差距,情境還是差別比較大,後來自己寫筆記記錄自己使用 Git 的方法,同事比較習慣用終端機打,我是會混合用 SourceTree 辨認現在分支跟曾經修改的版本,或是不小心 commit 到一些在本機修改的設定、假資料,要 revert 的時候;或是從遠端 pull 最新的master,主要遠端分支設定:把 origin 設定成自己帳號的遠端分支,upstream 設定成公司帳號的遠端分支,提 PR 與更新 PR 就用 terminal ,因為會跑 TSLint,可以避免一些預期外的錯誤。

最近作了自己刻完整的頁面跟一些隨著變數改UI、搜尋、串接 iframe ...等等功能,可以做出實用、滿足需求的東西通過測試上線,蠻有成就感的,即使之前開發功能呈現的方法或樣式要討論很久,設計稿只有數張 Line 貼圖或 pptx 簡報,要自己用取色工具取色,對齊的格線也不知道怎麼對,需要通靈自訂格式。

最近寫 CSS,才學會用 var(--xx-xx: #fff) 的變數用法,之前看過 Taliwindcss ,可惜沒辦法通通改寫成變數形式達成一致性,有空作自己的 SideProject 會很想找機會研究跟實作 Taliwindcss 風格,改完一些 UI 細節後,發現完全沒有動到 Code 的部分,代表樣式跟結構有完全分開,也覺得蠻開心的,我跟洧杰老師一樣有色弱,所以什麼我(PM或同事)覺得怪怪的...這種敘述只能看有沒有前人寫的調色工具,或是把 Code 開好直接去 PM 旁邊改。

公司有蠻多下午茶與聚餐時間,薪水也比我當初開的高,希望這幾年隨著自己的進步,可以幫助自己也幫助公司成長,一起賺錢。

活動用連結:六角學院

2021年3月13日 星期六

2020 年底 Junior Frontend engineer 面試記錄暨求職心得

轉職動機:

    在 104 投了大約 30 家履歷,cakeresume 4 家,得到面試機會 5 次。筆者背景是 2019 年底

開始積極準備轉職,原本是象棋教師,觸動我轉行的動機是每個行業的薪資上下限就在那,

結構性問題也不是個人可以改變的,於是選擇六角學院作為主要的學習管道開始學習前端,

理由是對於學習路線描述的很清楚:連結,前端一方面比後端好上手,一方面是作出來的成果

直接在畫面上回饋感強,再來搜尋各家工程師從業心得,大概都是需要不斷學習,剛好我就是

喜歡學習研究的人,於是就入了這個坑。


學習時間及過程:

    配合活動的六角工商,介紹一下六角的學習歷程:在六角有買 jQuery、JavaScript、Vue...

等等,但是後來出的切版直播班跟 Vue 作品直播班比較有衝刺的效果,學習時間的話,在直播

班寫作業的時候,全職的時候就趁半夜沒聲音的時候狂寫,平均八小時,兼職的時候就比較

規劃平均只有兩個小時。最後把作品直播班作品作出來之後,精實修改了 300 條左右程式跟

設計上的建議,配著加碼的履歷健檢跟模擬面試,還有自己趁機寫的一些 F2E、Chart.js 小作品

就開始求職了。

    時間大約從六角最後一次改作業然後模擬面試完,2020/10月底到2020/12月底拿到 offer letter

 為止。職缺都是前端,Vue 或 React 都投,薪資條件都開 4 萬。


面試紀錄:


科技公司A:

    在 cakeresume 上投履歷得到回應。


    作寶寶攝影機,連 APP,母嬰分房照顧之類的時候很方便,覺得我有小孩就會買的一個

產品,第一關電話面試,自我介紹、介紹作品,由於這家是最早面試的,所以履歷上只有六角

的主要作品,作了一些技術問答後,問公司對工程師的配置,前端只有一個人,大部分都是

 APP 或後端,公司直接表明不適合,給了一段發問閒聊時間。


    其中一個建議:作品介紹的時候可以從主題如何發想開始,在我後來的面試中也有很大的

幫助。


準備的對公司問題:

    主管已說明主要負責 Vue 的一些工具 component 跟網站前端。

    前端團隊的配置?1前端,其他都是 APP 或後端。


健身公司A:

    caseresume 投履歷得到回應。

考卷回應後無聲卡。題目主要是 LeetCode 。


博弈公司A:

    104 上公司主動邀約面試。


    遊戲開發部主管、前端主管、資深工程師三人面試,最後HR問常見的面試問題,12/1面試、

預計12月底回復,結果無聲卡。


面試內容:

    自我介紹、ES6 var let const 差異、箭頭函式、.map、怎麼把陣列中重複的東西去掉,有些

忘了。工程師有看過作品,詢問購物車作法,使用 API 或 localstroge 儲存資料的差異,有教我

一般是用 localstroge 儲存購物車資料,最後才 post API。

六角的學習經歷跟製作作品時間,git  commit 怎麼忽略檔案。


準備對公司的問題:

    公司做什麼的?博弈(從在內湖主動邀約大概可以猜測)。

    團隊組織的組成?公司使用的框架?組織:遊戲開發部,兩個各四人的前端 team、以 React 

框架為主。

    哪些地方可以進步?實做作品數量、團隊溝通經驗。


11月中到12月中,中間花了一個星期多邊投邊補了幾個自己作的東西,一方面作自我研究,104 的職缺比較多所以後來都主投 104 為主。

   

接案公司A:   

    104 上投履歷,第二天收到電話聯絡。

    面試過程首先人資,再來業務經理。

    事前有說看作品,所以先接網路把 github pages 弄出來,介紹作品,問轉職的原因,談到公司

有外派或自身開發需求前端,期望薪資開4萬,104上寫5萬~6萬,不過我沒刻意開高,然後找

經理來。再介紹一次作品,經理有想看後台、旅館預約服務、將新研究的 Chart 作小修改。

我後台有顏色跑掉的問題,因為沒在顧畫面,做完自製產品就沒再開跟檢查了,如果要投會做

後台的公司要注意一下,Chart 的圖表製作來源,因為沒 API ,就用 JSON Server 玩看看,結果

差點改到壞掉,好險只是因為 VSCode 開過別的資料夾,JSON Server 要重開。


    公司想作新產品從 0 開始,會用腦力激盪的方式開會討論,產品開發的週期會比一般接案

開發更長,會有加班時間,前期自我研究會比較多,有資深工程師但應該靠自己研究比較多,

表單處理會比較多,有提到缺開給 Junior 是為了研究熱情(加班需求)?

    預計 12 月中有回應,結果無聲卡。


現職公司:


    104 上公司主動邀約面試,一開始傻眼履歷上都是 Vue ,職缺寫 React 工程師,不過抱著當

練習順便試試自己的功力就去了。


  三階段:考試、人資、技術主管

筆試:30分鐘技術問題 10分鐘DISC。應該30分鐘就全寫完了,忘了問能不能 google 就先不用

手機。


考題:

1. for(var i = 0; i < 5; i++){
           settimeout(()=>{console.log(i),1000}
     )} 為什麼出現5次i都相同?怎麼解決?

    考同步觀念。


2. 傳址問題  a = {}  b= {}  c=a  a ===b  a===c true or false?

    考物件傳址。


3.從1-n 之間產生不重覆隨機數生成一個新陣列(邏輯)

    這題最不會,討論最久,應該要用我忘了的 while 迴圈。


4.很多層的元件應該如何傳值?

    剛好有研究平行組件傳值,就用 Vuex 答,對應 react 應該是 Redux ,父子元件傳值 Eventbus

會很多層而且 Vue3 也要改,算近期看得,研究過程跟作法都答得蠻詳細的,只有 Vuex 除了

傳值以外的狀態沒仔細看。


5.如何增加首次瀏覽網頁的載入速度?

Lazyload、檔案大小...之類的。


6. React array .map為什麼 key 最好不要用 index ,用 id 之類的?

    我用 v-for 的觀念答,後來看文件才知道 React 的 map 大概就跟 Vue 的 v-for 差不多。
剩下忘了

人資:問詳細經歷,介紹作品,我比較菜就鉅細靡遺的從首頁講到產品列表講到購物車,聽得

完真的蠻猛的,介紹制度福利。

技術主管:有兩位,從考題錯的或可以改進的透過腦力激盪的方式問答,大概有非同步的

作法,有數十隻 API 分散在不同 component 要如何管理,我之前剛好看過 Mike 的API 管理那篇

文章,詳細作法當然是忘了,因為實作都兩三隻直接套就好了,詳細補完在 blog ,後面幾題

比較偏向 React 框架應用我不知道,都用 Vue 的作法回答,作品改CSS,改呈現方式。

總過程大概兩個半小時,不過有磨練到,後來得到這家的 offer。至今兩個多月的歷險記又是

另一篇故事了...。

心得:

       原本打算拖稿到就職三個月再寫,不過配合六角活動就趁假日寫一寫,旁邊還有要抽空改

的公司專案,建議大概就是欠技術債就是要還,我認為在六角學習,最有價值的就是實戰班

作品作完以後修改的那兩個半月,跟在公司作東西被退回修改的情境有87%像,作業有設計

稿,有時候還會直接給你關鍵字研究,我最近都只拿到一張 line 貼圖就要開始改了,上實戰班

的時候,原本有些技術問題都先繞過,或上課聽不懂得就先放著,結果最後還是全學起來了,

到工作的時候,最有挑戰的不是功能作不作得出來,而是要用符合團隊的作法或技術去達成。


最近活動用連結: 六角學院