文章目錄
- 前言
- 個人背景
- 面試前的準備
- 面試分享
- 個人觀點
- 總結
- 後記
前言
這篇文章主要會分享我最近（10 月這段時間）的面試心得與準備，裡面的內容不會到很專業（因為我也沒有很專業😂），單純想要把自己的所見所聞還有親身經歷分享給大家，希望對於非本科系並且有意願轉職到網頁前端這個領域的人有幫助。
如果有什麼其它疑問在這篇文章中沒提到的，歡迎私訊我（eilin0603@gmail.com），或者是在下方留言區留言讓我知道，我會盡己所能提供微薄的淺見與分享。
個人背景
過往背景
國立高職製圖科畢業，製圖科的專業科目曾經被當過兩科。國立科大機械工程系畢業，在校成績前三年都在中段班，畢業後即在做機械相關領域的工作，傳統產業、半導體產業都待過。曾經短暫準備並考過地方特考的行政統計類組，統計學當時考 0 分。
大學一年級時，在一門課程學過 C++，只是那是個不太好的經驗，有學等於沒學，當時不僅沒有燃起心中想要 Coding 的那把火，甚至想把那本《無X學習 C/C++》的書給燒了。在大學期間，有一些使用程式撰寫或是圖形程式編譯的分析軟體的必修課程，比如 Matlab、LabVIEW、Vissim。學習 Matlab 的那門課，當時的期末成績未及格，在暑假的時候重補修兩個月。
大四到今年初這段期間斷斷續續在線上課程學習平台學了幾次 Python 這門程式語言，真正有興趣並主動接觸程式語言就在這個時候，只是並沒有很系統性地在學習，每陣子學完之後沒再接觸就會忘記基礎，又得重頭學一遍，然後也沒有學得很深，只會一些基礎語法和簡單的資料分析語法，總之要以這樣的 Python 能力出去找工作幾乎不太可能被錄取😂
網頁前端背景
真正開始接觸網頁前端這門領域的時間是在今年（2019）的 2 月，我報名線上學習平台 ALPHA CAMP 的網頁全端課程，他們是採學期制，我上過學期一與學期二（沒上完），這是我對於網頁前端感興趣的開端。在課程中學到基本的前端工具與技術，好比 HTML5、CSS3、JavaScript、AJAX、Bootstrap 等等，同時也有一些寫程式碼時的好習慣與簡潔性的觀念記在腦海裡。
我在 ALPHA CAMP 的學期二上到一半時，轉去上了另一門線上全端的課程，課程名稱為程式導師實驗計畫第三期，這一門課程是在前端領域上很有名的一位大大 Huli 所開設的程式課程，如果你曾經猶豫要不要轉職網頁前端而去 Google 了「前端 轉職 非本科」這些字眼，第一頁就會有這位大大所寫的文章。這門課程為期半年（4/15 ~10/15），所教的課程內容包括了前後端的基礎、進階、框架之外，還有部署（自己架網站）、基礎網路概念與資訊安全和 Git 版本控制等寫程式會用到的工具與觀念。除了上述這些技術學習之外，老師特別看重在這半年之間所學的基礎紮實度，還有自我解決問題和分析問題的能力。
因此我在 10 月初的時候，也就是課程接近尾聲的時候，開始準備自己的履歷。
面試前的準備
履歷
我在 CakeResume 這個平台打造自己的履歷，整個版面以簡潔、重點資訊呈現為主，和這領域較無關的技能我都沒有寫在裡面。另外也有使用 104 和 Yourator 的平台求職，不過會在附件加上 CakeResume 的履歷。
作品集
我上的那門課程最後兩週是製作 Final Project 的時間，不過當時我的課程進度 delay，因此沒有做，想說就先投履歷試試水溫，要是真的沒有面試邀約的話，再回頭過來做 Final Project。不過我個人強烈建議沒有求職時間壓力的話一定要做一個作品，很多公司會先看過你的作品才決定要不要找你去面試，而作品也可以作為談薪資的手段。更好的情況是找幾位夥伴一起開發，這樣你就會有共同作業的經驗，這點可以在面試當中點出來是非常加分的。
而我的履歷裡面的那兩個小作品是課程當中某兩週的作業，是極簡的小作品，一個是使用前端框架 React 開發的 SPA（單頁式應用）Blog（也有使用 Redux 和 Middleware），API 串接就是基本的 CRUD 功能都有。另外一個作品是使用 PHP 後端程式語言還有 AWS EC2 雲端 Server 所架設的一個會員系統留言板的網站，這個網站有加入幾項資訊安全的保護措施。
記得要熟悉自己作品使用了哪些技術與應用工具，可能會被問到在做作品的時候遇到的困難點有哪些，可以自己先演練到時該如何回答。
面試問答題
面試的問答題（包括個人問題、技術問題）可以參考前端面試法則二三事這篇文章，裡面的面試細節 ( Rplus Chen 整理)這個連結很多面試題目。另外也推薦下面這幾個連結：
除了上面這些準備之外，我會去看我上的那門課程的每週作業的簡答題還有自我檢測的部分，連結在這，另外重點複習課程的「第十七週：前端中階（中）」，這週有很多 JavaScript 重要的基礎概念，像是 scope、hoisting、closure、prototype、this、Event Loop 這些，這些都是面試時的白板題一定會考到的概念。
面試前，先想好或者是陳列出來你要問公司的問題，在上面的文章中也有提到，面試是雙向溝通的，今天不是只有公司面試你，你同時也在面試公司。
如果要刷題的話，推薦這三個網站：
自我介紹的演練
面試的時候有很大的機率面試官會在一開始叫你自我介紹，可以自己先在家裡練習怎麼講，把所學、學歷、工作經驗重點提出來，不要提到和這個職缺較無關的地方（比如我家有幾個人、交過幾位女朋友、在原來的領域的專業術語這種），面試官需要知道的是，你在這個職缺領域擅長的技術和經驗。也不要講太長（最好壓縮在 5 分鐘內），不然會讓對方感到太過冗長而失去耐心且抓不到你的重點。
另外我推薦在面試之前，可以先看這兩篇文章轉換自己的心態：
面試分享
我在這一個月內，總共投了至少 30 間公司的職缺，公司主動的面試邀約差不多 20 間，最後有去面試的公司總共有 9 間，其中純後端有 2 間、純前端有 6 間、全端有 1 間。產業分布：博弈業、接案、自有產品、金融科技、人力派遣。
以下我把 9 間公司的面試官有問到我的問題，全部攤開來，都是口頭提問的
技術問題
（以下可能有重複的問題，不同間公司問的）
- npm 是什麼？為什麼需要用到它？可以不用它嗎？
- npm 和 直接從網路上載下來 library 檔案再用 script 引入，這兩個差別是什麼。
- package.json 和 package-lock.json 的差異。當協作的時候，package-lock.json 需不需要傳上 GitHub 。
- 物件導向的基本概念。
- 說說為何需要使用 React，和原生 JS 的差別是什麼。
- React 的 component，為何要 extends Component，為何要用
constructor，super的功用又是什麼。 - Two-way binding 是什麼？React 如何實作？
- gulp 和 webpack 的差異？
- JavaScript 的
==和===的差異？ - JavaScript 的
undefined和null的差異？ - Arrow function 和一般的 function 寫法的差異？
- JavaScript 的 ES5 和 ES6 語法有哪些差別？
- git 的
rebase和merge的差異？ setTimeout()第二個參數如果是1000是什麼意思？實際上真的是1000過後就執行了嗎？為什麼？- 今天我要串一個 API，我要怎麼在傳回來的資料中，篩選我想要的欄位資料，並且去為這些欄位的值開頭新增
$字號？ - Redux 在幹嘛的？它的整個概念與架構是？
- 說明 MVVM 是什麼？
- class 裡面，要使用繼承時，
constructor裡面為什麼要放super()，它的功用是什麼？ - JavaScript 要怎麼在 class 裡設定 private function？
- React 中，既然 Parent Component 可以用 props 的機制傳遞東西給 Children Component ，那反過來說，Children Component 要怎麼傳東西給 Parent Component？
- Promise 是什麼？它在做什麼的？
- Promise 有哪些狀態？
- 跨站請求你知道嗎？因這個緣故那要設定什麼才可以串接 API？
- （承上題）那為什麼你說的 JSONP 那幾個東西可以直接拿取資料？
- RESTful API 是什麼？
- 可以說說今天使用者進入到一個網頁時，後台的處理發生什麼事嗎？
- Cookie 和 Session 分別是什麼。
- 你覺得使用者在一個網頁中輸入密碼之後，到傳送到後端這段期間，密碼有被加密嗎？是怎麼被加密的？
- HTTP 與 HTTPS 有什麼差異呢？
- 可以說說 AJAX 是什麼嗎？
- 通常你都怎麼串接 API 的？使用什麼語法？（因為我回答 fetch/axios 所以接下題）
- （承上題）那這兩個語法實際上是怎麼運作的？
- 你使用過
Async/Await嗎？裡面的try/catch是怎麼運作的呢？ - JavaScript 的 ES6/ES7/ES8 等等這些分別代表什麼意思呢？
- SSR 和 CSR 你知道嗎？他們分別在做什麼的呢？
- （承上題）那 SSR 和 CSR 分別有什麼缺點呢？
- 你覺得為什麼需要使用 React？
- 可以說說 React 的
state和props的功能嗎？ - Redux 的 Middleware 可以解決 React 串接 API 非同步的問題，為什麼呢？
- git 的
clone和pull有什麼不同？ - git 的 branch 要和 master 合併該怎麼做？
- React、Vue、Angular 有什麼差異和關係嗎？
- 你在使用 React 的時候有感到什麼特別之處，可以舉例嗎？
- 你用 React 在專案開發的時候都是怎麼做的呢？有用過 React 的快速搭建程式初始架構的相關指令或用法嗎？
有一題上機考的題目：Sock Merchant。
HTML 與 CSS
（我去面試的公司很少問 HTML 和 CSS 的題目）
- 可以說明 DOM 是什麼嗎？
- CSS 也有類似 DOM 的結構嗎？
- 可以說說
box-sizing每個可以設定的類型，各別的元素組成差異嗎？ - 我們知道
position有很多類型，那這些類型分別有什麼不同與各自的功能呢？
廣泛性問題
- 為何想要轉職。學了多久。
- 這門課程是用什麼方式來教你們學會這些技能。
- jQuery、Bootstrap、React 分別在課程學了多久。
- 課程學習中，遇到最困難的是哪個部份？有沒有卡關很久的？
- 課程學的是 React，那你認為你有辦法學會 Vue 嗎？
- 當初 PHP 你是怎麼學習的？學到了什麼？
- 有用 GitHub 來協同作業嗎？
- 期望薪資？
- 前一份工作在做什麼的？
- 會想去台北工作嗎？
- 有使用過我們家的產品嗎？
- 為什麼當初選擇這個線上課程？
- 有做什麼作品嗎？
- 已經面試了什麼樣的公司？覺得如何？
- 在一個團隊當中，你通常擔任什麼樣的角色？
- 之前有辦過活動或是參加社團之類的嗎？
- 當完兵了嗎？
- 你覺得你的英文程度如何？看得懂英文文件嗎？
- 碰程式的經歷有多久？
- 有待過小公司嗎？
- 知道敏捷開發嗎？
- 通常你會開 branch 來開發嗎？
- 期望年薪多少？為什麼？你覺得你有什麼特別的地方值得這個薪資？我要用什麼原因說服老闆你值得這個薪資？
- 能不能配合平均一季一次或半年一次的假日加班？
- 你只會 React，可是我們是用 Angular，對我們來說是白紙一張，如果你進來，多久才學得會？
- 你剛有提到這個課程的老師有設計讓你們自己去尋找作業的解決方式，那你碰過需要自己尋找解決方式而且不是那麼容易做出來的地方時，你都是怎麼處理與解決的呢？
- 你有什麼個人的生涯規劃嗎？預計的階段性目標。
- 什麼樣的話可以形容你是怎麼樣的一個人。
- 高中的時候你喜歡哪些科目。
- 你怎會想要轉到這個領域來？可以說明這段心路歷程嗎？
- 你預計可以 onboard 的時間點是什麼時候？
我去面試的這 9 間公司，沒有一間要求寫白板題，都是口頭直接問好幾個技術問題（不然就是完全沒問），而這些技術問題大部分都是前端領域的基礎題，只要你的基礎學得夠紮實，通常都回答得出來。
大部分都沒有和人資面試，大一點的公司才有和人資面試的機會。我遇到的面試流程通常是寫測驗（如果有的話）→與工程師面談→與高階主管面談。幾乎每間公司的面試官都很好聊，對待也很和善，有些公司的工程師還會就我沒回答出來的題目或者是回答地不夠完整的題目，當場指導我和這一題相關的觀念。
最後 Offer Get 的公司有兩間，其中一間剛好是我想去的，因此我提前終止求職，不然原本我打算繼續再廣投第二波履歷，不過只有面試 9 間並不算多，其中還有 4 間是去試試水溫並不是想去的公司，然後也有幾間比較雷的，算下來真正有參考價值的差不多 4 間。
個人觀點
面試前
假如你有一定的基礎（像我在這門課程中學了半年），並有一個小作品了，其實就可以放心地公開自己的履歷，我當時還沒開放履歷的時候，在那邊擔心東擔心西的，擔心沒人會找我去面試，結果我在開放履歷的第一天，就收到如雪花般的各種面試邀請，市場非常大，到處缺人才，不用擔心沒有你的位置，但是也有不少的雷缺，簡單判斷公司雷不雷，最直接方式就是看薪資範圍，過低的薪資就要注意，還有就是工作內容包山包海，比如要找會 JavaScript ，還要會 Python、Java、C++ 的人，那這個可能就是要你去當工具人，不然就是公司本身根本就不懂技術。
從投遞履歷與寄 Cover Letter 的時候，這場面試的序曲就已經開始了，傳給公司的所有內容與信件需要經過較有禮貌的用語轉換。通常我如果收到面試邀請都是這麼回覆：
XXX有限公司 您好
感謝 貴公司的面試邀請，除了 XX 日不便前往 貴公司面試之外，其他時間我都可以，麻煩您們的安排了！再次感謝您們的邀請。
如果你投了 5 間公司，沒有一間公司找你去，請不要灰心，繼續投，投越多間被找去面試的機率越高，而且投履歷不用錢也不用成本（除了時間）。除非你投了 100 間沒有一間公司願意找你去面試，那你就要趕快回頭過來審視自己的履歷並做修正，當然如果有認識的、在這領域工作的人幫你檢查更好。
面試順序
我一開始投遞的履歷，還有被邀請去面試的公司，都不是我比較想去的公司，而會想去這些公司面試的主要原因在於我想練功，我想在這些公司的面試當中適應在這個領域中的面試，藉此我就可以比較熟悉整個面試的流程，也可以做好準備之後的面試可能會再次被詢問的問題，另外要是遇到答不出來的題目，我就回家再複習。這些面試流程與經驗的累積都是為了之後面試想去的公司所做的準備。我自己是在面試了 3 間公司之後，開始投自己想去的公司。
開始面試
出發到公司前，我會準備這些東西：
- 一份紙本履歷，還有一份電子履歷放在筆電。
- 攜帶充飽電的筆電，筆電已經是開機的狀態，已經打開作品的頁面、作品的程式碼。
- 鉛筆、原子筆、橡皮擦、立可帶。
- 白開水，以免渴死在他鄉。
我習慣會提前至少 10 分鐘到達面試地點，是到達公司門口而不是整棟大樓的樓下，這樣可以讓我有喘息的時間穩定情緒，公司外面有廁所的話就先去廁所調整好服儀與情緒狀態。接著在約定好的時間 5 分鐘前進去，因為太早進去也不太好，可能公司那邊都還沒準備好要迎接你。
一些基本禮儀或者一些動作我覺得要意識到，不過我是比較嚴謹一點，這邊列出我會做的事：
- 手機要嘛靜音，要嘛開飛航，不要關機，因為你可能需要手機的網路 demo 作品。
- 面試官進來面談室的時候我都會習慣起身打招呼，等對方示意我坐下或者是他已經坐下了我才會坐下。
- 面試官在講話的時候，看著他。
- 寫完筆試題目或是填完個人資料之後，假如他們沒有說限多少時間寫完，或者沒有跟你說寫完後的流程，自己可以主動去找他們說已經寫完了，節省彼此的時間。
- 如果面試官問我還有沒有問題的時候，然後我又想不到問題可以問（雖然感覺還有什麼想問但臨時又想不起來），那段空檔的時間會有點尷尬，這時可以主動跟對方說「今天差不多就到這邊，謝謝」。最好情況就是先記熟自己想要問的問題。
- 口頭的技術問題測驗，就算不是很了解，你還是要想辦法多講，多講跟那個問題有關的概念，比如問說「Git 的
rebase的作用是什麼？」，假設你沒用過它但知道它跟merge有點類似，你可以回答「我沒有用過這個指令，不是很清楚它實際的功用，但知道它的功能和merge類似，如果是merge的話，merge的功能就是... 」，至少面試官會了解你對這方面的熟悉度到哪邊，如果你只有一句我不知道，那他們可能就會認定你的 Git 這方面很不熟悉。總之要嘗試多展現自己，但不要偏題太嚴重，反而會扣分。 - 當面試官問你有沒有問題想問的時候，一定要問問題，展現出自己是想進去公司的那種心態給對方知道。我自己還會在面談接近尾聲的時候，會問面試官說「如果有幸錄取貴公司，我是騎機車來，想請問大家機車都停哪邊？」，或者是「想問一個題外話，這附近有什麼好吃的，我想知道之後有幸來貴公司上班的話，可以去吃哪些食物」，表達自己有想要先了解進來公司後的生活型態。
- 如果公司有用紙杯倒水或茶給你喝的話，離開前可以詢問這個紙杯要如何處理。
- 離開前可以和面試官表達感謝面試邀請之意，還有要名片。另外提供一個小技巧，假如面試官在一開始面試的時候有給你名片，你可以把名片先放在桌上不要收起來，以免忘記面試官叫什麼名字的時候可以看一下（因為可能會有很多個面試官）。
用另外一個角度去看面試
這個角度是和我上同一門課程的一位同學的心得分享有提到的，所以很感謝他提到這個我沒有想到的盲點。
今天我們白紙一張、沒有工作經驗的轉職者，在面試官眼中，除了看你的基本前端技術行不行之外，還有很重要的是會觀察你的人格特質，你的人格特質符不符合公司想要招人的期望。所以我在後面幾間公司的面試當中，我都盡可能表達我是怎麼樣的人給面試官知道，而不是只有輕描帶過，一個特質要再加上一個實際的案例，比如說「我有研究精神，曾經在寫 code 的時候想不出來怎麼寫，然後就是一整天都在想解決方案，還好睡覺沒有夢到」。
很多時候公司看的是你個人和公司的文化是不是相符的，不是只有單單技術厲害的人就能被聘用，你要想，今天一個人就算技術再厲害，但他的團隊合作意願度不高或者是沒有概念，那就算再厲害也沒辦法和其他同事討論與共事。
總結
進去一間公司很看機緣，有些公司可能很符合你，但卻在你求職階段沒有職缺招募，有公司覺得你只值得 35K 這個薪資；另一間公司認為你值得 40K，所以建議要多面試幾家互相比較。如果還沒拿到 offer 的話，可以先以拿到第一份 offer 為主，那會是你之後面試其他間公司的談判利器。
入這行沒有想像中的超級困難，難的是找到好的公司，很多公司只把你當便宜的工具看待。那如何找到好公司，你的實力相對就要提升，那就會比較有多的機會被公司重用，作品是相對客觀判定你技術實力的參考指標，所以良心建議一定要做作品。
如何判斷自己可以開始找工作了？上面的面試分享的問答題大部分都有辦法回答得出來的話，我覺得你就有一定的實力了（有幾題我當下還沒回答出來）。
這篇文章我這樣打完之後，再回頭看，老實說專業度與參考性和很多人相比遜色許多，不過我想也許可以幫助到那些比我更沒自信，更沒勇氣去面試的非本科轉職的人，如果對你有幫助的話，可以按「拍手按鈕」讓我知道～
後記
必須說我不是個很厲害的人，學到現在我覺得我還是一樣菜，前端領域還有很多不懂的地方，還有很多基本技術還沒摸熟。這次有去面試的公司都不算是目前在這圈子很有名的公司，覺得比較可惜的是沒有去面試那些很有名的新創。有些公司的面試題目很有挑戰性，白板題很多題這樣，沒有去拓寬眼界相對來說比較可惜，不過來日方長。
我沒有做一份較有規模的作品集是這次求職很致命的一點，我相信有不少公司看到我的作品版面可能就沒有意願找我去面試了。當時我在 Yourator 投遞了 30 間公司的職缺，只有 2 間回覆我，僅 1 間有去找我面試（另外一間是先遠端線上測驗，但我沒通過）。
我覺得自己很幸運，找到一間公司知道我的技術實力，而且還沒有經驗，還願意讓我進去試試看的，薪資的部份我也很滿意，初入這領域的新鮮人能拿到這個薪資超乎我的預期。我想，找到適合自己的工作，比起進入頂尖的公司，來得更為重要。
在這邊預祝大家都能順利找到自己朝思暮想的工作😁
