[前端小菜鳥] 前端工程師成長計畫 - 面試篇(2)

計畫趕不上變化，在我還準備要開始進入讀書計畫時，就有面試邀約，當下馬上調整為直接進入研讀面試題目的模式。

本來預計自己想把這篇讀書計畫的內容讀一遍再進到研讀面試題目，一邊讀一邊找工作。

但計畫有點趕不上變化，所以我提前把面試題目的部分娜到前面來。

請收下我收藏起來的面試文章 (英文居多)

面試文章列表

[前端] 15 Popular Common Frontend Interview Questions
[React] 10 common React Js interview questions.
[CSS] 41 Frontend Interview Questions - CSS
[JS] 52 Frontend Interview Questions - JavaScript
[React] 44 React Frontend Interview Questions

搭配 Roadmap 讀書

[React.js] React RoadMap
[JS] JavaScript RoadMap

額外面試題：

這篇文章只會針對我列出了文章中，我有額外的答案或者額外可能會問的問題做補充，面試題目可直接點網站進去開始刷題。

15 Popular Common Frontend Interview Questions

先從這個開始15 Popular Common Frontend Interview Questions。

1. What is HTTP?

HTTP stands for HyperText Transfer Protocol. It is an application protocol that allows for transfer data. HTTP enables the retrieval of resources like HTML pages, image, videos, from servers to browsers.

It follows a client-server model, where a client (such as a web browser) sends requests to a server, and the server responds with the requested resources. HTTP uses various methods to perform different actions on resources.

Extend 延伸題: OSI七層模型

實體層（physical layer）
資料連結層（data link layer）
網路層（network layer）
傳輸層（transport layer）
會議層（session layer）
表現層（presentation layer）
應用層（application layer）

Extend 延伸題: 可否列舉其他 Protocol? 請問某某 Protocol的作用？

Extend 延伸題: What is three-way handshake (三次握手) and four-way handshake (四次握手)?

三次握手和四次握手(揮手)是TCP建立與斷開連線的過程。

以理論上來說，TCP協議是確保在兩個端點之間建立和維護可靠的數據傳輸，所以連線一但通過建立後，其連線就會一直保持，直到斷開。

三次握手: 為TCP協議建立連線的過程。
四次握手(揮手): 為TCP協議斷開連線的過程。

若以實作上來說，運用在TCP協議上有眾多協議，舉例的話有HTTP及Websocket在前端與後端的實作上較為廣泛使用。只是，HTTP主要基於 Client-Server Model，也就是由客戶端傳需求至伺服器端，再由伺服器端收到需求後處理完回傳回應(Response)，每次HTTP需求都是獨立且斷開，而且只能由客戶端發送單向請求。Websockets則是適合資料即時串流以及雙向資料傳輸，建立在TCP協議的穩定連線上，使資料能夠雙向交流，且確保資料能夠穩定傳輸。

Extend 延伸題: 那UDP是什麼？其特性又是什麼？

2. What does an HTTP request consist of?

Each HTTP request consists of three parts, which are transmitted in the specified order:

Starting line (Request line): defines the type of the message.

GET /api/index.html HTTP/1.1

the method is GET
the path is /api/index.html
the HTTP version is HTTP/1.1

Headers: characterize the message body, transmission parameters, and other information.

Accept-Language: fr, de
If-Modified-Since: Fri, 10 Dec 2004 11:22:13 GMT

Message body: contains the actual data of the message. It must be separated from the headers by an empty line.

3. What HTTP request methods do you know?

4. What is the semantic difference between PUT and PATCH?

這邊要特別注意 PUT 跟 PATCH 方法的不同

PATCH 方法是指更新一部分的資料
PUT 是將所有的資料都更新

5. What are Websockets?

前端讀書計畫的第一個部分網路(Internet)就有提及，之後與網路相關的協議應該會常出現，若跟需要即時資料串流，像是直播、通話、線上遊戲相關的服務都需要運用Websockets協議。

需要了解一下。

6. What is REST API?

REST API stands for REpresentational State Transfer Application Programming Interface.

要注意的是REST API 不是一種協議，算是一種寫作風格，所以要是公司/團隊允許，或者自己懶，不遵守也不會害資料傳不出去。 (這邊只是想表達他不是一個不遵守，功能就不能執行的協議，而是一種為了統一大家寫作API風格的規則)

以下是本人不熟悉，也很少被問過，但需要了解的題目。

1. What is WebRTC?
1. On what principles is the OOP based?
1. Tell us about the principles of SOLID.

10 common React Js interview questions

換第二個 [React] 10 common React Js interview questions.

What is React.js, and what are its key features?

Explain the concept of Virtual DOM in React.

React.js 是一個 Library 不是 Framework，以及它的特點是運用操作虛擬 DOM 代替操作真實的DOM，以此來增加效能。

另外是當有任何狀(state)態改變，虛擬的DOM會去偵測改變，並且只改變有更動的DOM，而不是全部刷新。

What is JSX in React, and why is it used?

JSX 也是其中一個重要的概念，在React RoadMap裡有。

記得回傳JSX要是完整的一個div或 fragment

// 運用這個將整包要回傳的JSX包起來
<>
...
</>

// 這個等同上面那個

<React.Fragment>
    ...
</React.Fragment>

// 或者確保是包在一個 div中

<div>
    ...
</div>

What are React Props?

Explain the concept of props drilling in React.

這兩題併在一起看，Props就是跨Components傳遞的資料。

function Component (props){
    // use Props to do something
}

和python裡在不同的function傳遞的函數資料是差不多的概念


def function(props):
    // do something
    pass

差別是 React.js 的 Props 是 read-only，不可變動。

第二題的 props drilling 是假如今天一個父Component裡有好幾層子Components，然後要把資料 Props一直傳遞進去，這個現象就叫做 props drilling。


// 這樣 props 就會層層傳遞，全家一起享用。
function Component ({props}){
    <ChildA props={props} />
    <ChildB props={props} />
}

function ChildA ({props}){
    <GrandChildC props={props} />
    <GrandChildE props={props} />
}

解決方式可以用 useContext Hook去實作，但敝女目前實作的一個專案當時邊學邊做+趕，所以也是一堆data drilling的問題，正將用useContext去重構這個任務排程在未來。

Explain React Hooks.

What is the purpose of the use effect hook in React?

這兩題一起看，Hooks一定會被問，可以列舉常用的 useState, useEffect。

第二題useEffect是做什麼的

主要是處理其他特殊作用: 比方說需要Call API、需要有函式是在載入DOM時執行、需要有效果呈現是特別仰賴某個值變動。
還有一些額外的作用，比方說監控scrolling。

關於Hooks，再多加一個延伸題

Extend: What is the difference between useState & useRef

畢竟實作時有遇到問題嘛，useState的值只存在於當下的Component，useRef則可以跨Component，而且可以即時動態更新值。

Sign @MinaYu.

1萬小時 - 前端工程師成長計劃