# 轉職求職系列之三：非本科轉職前端工程師的面試準備技巧（技術問答、專案經驗篇），善用 ChatGPT 提升你的信心！ ## 前言 對於一個剛轉職軟體工程領域的人，如果你已經具備程式技術的基礎能力，想要開始找軟體工程師的工作，第一步通常要先撰寫履歷，可參考筆者的[系列之一：履歷撰寫技巧](https://wehelp.tw/topic/5410961909350400)。有了履歷之後，第二步就要來做面試準備了。 先介紹我的背景：我是一個文組、非本科系的轉職人，在進入 WeHelp Bootcamp 之前，幾乎沒有學過任何程式語言。先前在大學行政單位擔任 PM，工作了 4 年半的時間。我在 Bootcamp 完成兩個專案，第一個是前後端分離的電商網站，第二個是前端為主的旅遊規劃個人專案（以 React 和 Next.js 為主）。想應徵的是國內 junior 的前端工程師。 面試準備可以分成以下大項：1.自我介紹、2.BQ（行為問題）、3.反問公司問題、4.技術問答和 5.專案經驗。由於內容很多，前三個部分請見另一篇文章[系列之二：面試準備技巧](https://wehelp.tw/topic/5615893438529536)，本文將接續系列之二，繼續介紹技術問答和專案經驗的準備細節。 ## 4.技術問答 技術問答我分為口頭技術問答、白板題和 live coding。 ### 4-1.口頭技術問答：以實例加深理解，用自己的話回答 #### 取得題目，看看不同來源蒐集解答 Bootcamp 的老師有提供我們幾十題的面試題庫做準備，不過，這樣的題庫網路上也有很多，只要多找幾篇文，你絕對可以得到上百題的面試題庫（有些甚至還有詳解）。或者你也可以詢問 ChatGPT，問他如果要應徵 junior 的前端工程師，有哪些前端的常見技術問答題目，請他分類並呈現給你。 有了題目之後，首先當然就是要**查**，譬如 event loop 是什麼？瀏覽器從從輸入網址到使用者看到畫面中間發生什麼？我查的管道有兩個，一個快速的選擇是問 ChatGPT，但**要注意 ChatGPT 或任何生成式 AI 還是有可能出錯的**，所以第二個管道是，我也會同時 google 網路文章來做 **double check**。 當然，也是有一舉兩得的作法，譬如使用搜尋引擎式的生成式 AI 工具，像是 Perplexity，或是在登入情況下使用 ChatGPT ，按下它輸入框下面的「地球符號」開啟搜尋模式，這樣他會在生成結果中出現資料來源，那你便可以直接點擊他給的資料來源，去確認頁面上的內容是否與 AI 生成給你的結果相符（同樣還是 double check 的概念）。不過就我經驗，直接 google 的搜尋結果，跟生成式 AI 的資料來源常常不會相同，如果時間和精力允許，**多看看不同的資源也會很有收穫，就像 A 講的可能你聽不懂，而 B 的解釋方式剛好對你胃口**。譬如，我曾看到某篇文章把 HTTP 的 GET 和 POST 的傳輸資料方式比喻成明信片和有信封的信，這能讓我留下更深刻的印象。 除了純文字之外，我也推薦**圖片或視覺化的例子**。譬如在查 CSS 的各種 justify-content 屬性代表什麼意思的時候，有些文章會附上精美的圖片說明，這絕對比純文字說明好理解。或者，我也會請 ChatGPT 生成一段對應的 code，直接看到實際的 code 有時比單看文字還要來得確實。 再進一步，**如果能實際寫過**，能更進一步加深你的理解。譬如，面試題曾出現 CSS 有哪些方法可以完全置中？除了看網路文章之外，也可以直接自己寫寫看，這樣不僅可以加深印象，也可以加強對 CSS 屬性的理解。 #### 用自己的話寫稿，破題優先，可進一步連結自身專案經驗 回答時（寫稿時），可以**破題**方式先點出重點，後面再補充細節，如果面試官想問，他總會追問。譬如，面試官如果問 A domain 想去 access B domain 的資源，但得到錯誤的畫面，是為什麼？我認為與其從同源政策開始鋪陳，不如先直接說這是因為 CORS。面試官如果想請你多解釋 CORS，那再補充解釋同源政策。總之**開門見山，先講重點**，否則面試官可能會聽很久都還沒聽到他想要的答案。 在回答某些題目時，你也可以**連結你自己的專案經驗**，譬如你自己的專案怎麼解決 CORS 問題。 最後把這些資訊整理一下，**以自己的話寫個稿**，每題可先設定回答 30 秒到 1 分鐘。**以自己的話寫稿很重要，因為這才是真正把東西吃進去的過程，而且講稿最好是你自己邊寫、邊練習說，也不會覺得卡頓的那種流暢。** #### 有餘力的話，比回答的內容再多了解一點 如果有餘力，除了基本的回答問題之外，**可以再多了解一點相關概念**，這樣萬一面試官要追問，你才有個緩衝區可以防禦。譬如瀏覽器輸入網址到成為使用者看到的畫面，我起初查到的文章只有說 server 把資料 response 給 client，client 下載並解析 HTML、CSS 和 JavaScript 之後，再把它畫成 HTML DOM、渲染成使用者看到的畫面。但有次模擬面試官追問我能不能針對 CSS 處理再做多一點的解釋，我就想起依稀在某篇文章有看到 CSSOM 這個關鍵字的印象。 不過，題目畢竟很多，如果只是要應徵 junior 前端，我認為**暫且不用鑽研到太深**。譬如上面這個題目，我作為前端就較不會著重 TCP 層的部分。 ### 4-2.白板題：藏有許多基礎概念，可和口頭技術問答相輔相成 白板題是指你在面試時要看著一些 code ，但不能寫或印的情況下要回答問題。譬如「這段 code 會依序印出什麼？」或者「 a 和 b 兩個 div 之間的 margin 是多少？」等等。網路上可以找到很多題目參考。這裡也推薦在 LinkedIn 上追蹤「JavaScript Mastery」，他幾乎每天都有 JavaScript 相關的題目貼文，作為練習滿合適的。 白板題**大多都藏有口頭技術問答常出現的基礎概念**，有時甚至會藏好幾個概念在裡面，譬如「會依序印出什麼」的題目，依據題目的不同，可能藏有 event loop、promise、迴圈、closure、scope 等等的概念在裡面，所以**白板題可以和口頭技術問答互相搭配**、加深印象。而且，說不定面試官也會問你為什麼這樣回答，因此**了解題目牽涉到的概念**也是很重要的。 我初期在準備白板題的時候，會先嘗試回答看看，但因為對程式概念不是很熟悉，如果答錯或想一段時間還是不明白，就會請 ChatGPT 對題目做詳細解析，讓我**理解為什麼答案是這樣**。不過我建議，除了請他告訴你答案，如果**你自己能把 code 實際放在編輯器裡印出來做 double check 會更好**，因為他有時候還是會出錯。如果使用本機編輯器比較麻煩，使用線上的 CodePen 或 CodeSandbox 都很方便。 當我把一個題目給 ChatGPT，請他解釋到我理解之後，我也會再請 ChatGPT 出類似的題目給我做練習（而且他還會自動在題目裡加入越來越多的概念進去呢），若有不懂，就請 ChatGPT 繼續解析，你再去理解，請他出題，做題……如此周而復始。 另外，有一些工具可以幫助你用視覺化理解，像是 event loop 印出順序，有一些可以給你看每一步驟執行的視覺化[網站](https://www.jsv9000.app/?code=Y29uc29sZS5sb2coJ1N0YXJ0Jyk7CgpzZXRUaW1lb3V0KCgpID0%2BIGNvbnNvbGUubG9nKCdUaW1lciAxJyksIDApOwoKUHJvbWlzZS5yZXNvbHZlKCdQcm9taXNlIDEnKQogIC50aGVuKHZhbHVlID0%2BIHsKICAgIGNvbnNvbGUubG9nKHZhbHVlKTsKICAgIHJldHVybiAnUHJvbWlzZSAyJzsKICB9KQogIC50aGVuKHZhbHVlID0%2BIGNvbnNvbGUubG9nKHZhbHVlKSk7CgpmdW5jdGlvbiBmbigpIHsKICBjb25zb2xlLmxvZygnRnVuY3Rpb24gMScpOwogIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0%2BIHsKICAgIHJlc29sdmUoJ1Byb21pc2UgMycpOwogICAgY29uc29sZS5sb2coJ0Z1bmN0aW9uIDInKTsKICB9KTsKfQoKZm4oKS50aGVuKHJlc3VsdCA9PiBjb25zb2xlLmxvZyhyZXN1bHQpKTsKCmNvbnNvbGUubG9nKCdFbmQnKTs%3D)，可以讓你一步步看到事件進出的順序，印象就能更深刻。 ### 4-3.live coding：從最基本練起，回答時寫不出來也不要緊張 這部分要看公司出什麼難度的題目給你，最基本、最常見也相對好掌握的是 **JavaScript 的 array 處理方法，** 我大多也是練習這塊。進階一點的也有看過直接出 LeetCode 的題目，或是直接要你現場寫某個畫面、改某段 code 等等。 但是，live coding 其實壓力還挺大的，很常在當下大腦當機，有可能是你不會或者是緊張導致。這時記得，**寫不出來不一定是重點**，**有時面試官想看的是你的思路，或你怎麼跟面試官互動**（除非面試官有說你可以專心做題、不用跟他互動），因此不要因為沒看過、不知怎麼下手而立刻覺得沮喪，先靜下心來理解題目。譬如，讀完題目之後，可以先說明我對題目的理解；如果我有一點想法，可以說明我預計處理的方式，跟面試官討論這樣的方向對不對。如果有一些地方不太確定，也可以問問看面試官，他可能會用他的方式給你提示。 另外，模擬面試官也建議過我，如果想練習 live coding 的互動，可以找一些題目，邊解題、邊想像如果你面前有面試官，你會怎麼跟他互動。 在準備履歷和技術問答的時候，有可能會忙到好一段時間沒寫 code，久沒用會很容易忘記。因此建議每隔幾天多練習基本題目的 coding，增加熟練度。 ## 5.專案經驗：釐清自己的 code，釐清自己選擇的原因 專案經驗相關的問題，其實一部分也是基本技術問答，另一部分則是進階或軟性問題。 基本問題像是，為什麼你專案使用 React、為什麼用 Next.js？為什麼用 Context 而不是 Redux？即使我一開始會用 React 和 Next.js 是 Bootcamp 老師指定的，但在面試回答時建議不要這麼說（或不要只這麼說），**你要有自己的理由**，講出用他們的原因，或者他們各有什麼優勢、好處等等。如果**能用自己的專案來做實際的舉例**，就更有說服力了。 進階的問題像是，你 oo 功能是怎麼做出來的？這類題目**就需要了解你自己專案的邏輯**，哪些功能可能是由哪些組件或函式去實現。你可以換個角度把自己當作面試官，或者你真的找人來問（即使是不懂程式的朋友也沒關係），想想什麼功能是看的人會覺得有興趣、會想知道他背後怎麼達成的？就算你是靠網路上或 ChatGPT 給你的 code 才做出來這個功能的，事後**你也要盡量把它消化成自己的**，盡量搞清楚每個函式、組件之間的影響關係。因為專案後來越長越大，在 review 的時候，我會用 ChatGPT 協助我去釐清 code 之間的關係，譬如我的 oo 功能，觸發順序是不是 xx 函式再到 yy 函式等等，過程中我會不斷和 ChatGPT 討論和思辨，即使和他討論可能要打很多字，但俗話說「真理越辯越明」（？），這個過程對我這樣的轉職入門者來說，是幫我一步一步把這些東西理解得更清楚。 軟性兼技術的問題，譬如你在做專案時最大困難是什麼？怎麼克服？這時我在開發專案過程寫的日誌就派上用場了。我在開發時會記錄自己遇到的問題、找了什麼資源、最後怎麼解決等等。我覺得在寫的過程中可以幫助自己釐清思緒，未來有需要用到時候，也能再回來翻閱，加快 debug 速度。 與回答 BQ 問題一樣，在準備回答時**可以善用 STAR 原則**，說明 Situation 情境、Task 任務、Action行動和你的 Result 結果。其中，我認為**自己從該次經驗中學到什麼**，也是很值得準備和分享的一個部分。 ## 結語 對於轉職新手來說，又要找題目、又要查解答、又要回憶自己的經驗、還要練習 coding，確實需要花上頗多時間。不過，還是要盡可能靜下心來一個一個消化，在反覆一次次練習之後，這些知識會漸漸刻進你的腦裡，到那時你或許不用硬背，也能憑自己的話回答了。 ## 參考資料： 1. Eason（2019/05/30）。[新鮮人面試必看，把握 STAR 原則讓你脫穎而出](https://www.moneysmart.tw/articles/%E6%96%B0%E9%AE%AE%E4%BA%BA-%E9%9D%A2%E8%A9%A6-star%E5%8E%9F%E5%89%87/)。 2. Yin（2024/09/21）。[工程師的溝通祕訣：從公司面試官視角揭露面試核心重點](https://ycchuang.ghost.io/how-interviewers-assess-software-engineers/)。 3. 程人頻道（2024/02/19）。[EP213 | 前端學習歷程！工程師升級路徑？領導與合作的積累。ft. Zet](https://podcasts.apple.com/tw/podcast/ep213-%E5%89%8D%E7%AB%AF%E5%AD%B8%E7%BF%92%E6%AD%B7%E7%A8%8B-%E5%B7%A5%E7%A8%8B%E5%B8%AB%E5%8D%87%E7%B4%9A%E8%B7%AF%E5%BE%91-%E9%A0%98%E5%B0%8E%E8%88%87%E5%90%88%E4%BD%9C%E7%9A%84%E7%A9%8D%E7%B4%AF-ft-zet/id1533113063?i=1000645861832)。（ 30 分 33 秒開始有提到轉職前端可留意的地方）