2021 面試問題小記：趨勢、樂天、Cybavo 、旋轉拍賣 前端
按照慣例，今年打算繼續測試一下自己的市場行情，陸續會面試，比較有興趣的放在明年年初，今年年初就練一下手感。
面試很累啊嗚嗚，光準備作品就要好幾天，面試還要被洗臉。一邊工作，一邊面試還是有壓力，但拿到多一點 offer 會增加信心，若要跟公司談加薪也比較有底氣。
台灣樂天
作業滿單純，一份演算法：Leet code，一份前端作業：infinity scroll，作業可以參考：認識 Intersection Observer API：實作 Lazy Loading 和 Infinite Scroll，這篇文章寫得很清楚，另外我的作業。
趨勢科技
作業是 Date picker 內容包含年、月、日的選擇，需要結合 input field。
作業參考：
Build a Date Picker in 15mins Using Javascript/React from Scratch
How to build a custom datepicker with React
面試題目參考：
HTML 檔案開頭的功用
<!DOCTYPE html>
<html>
...
</html>參考：HTML 第一行 DOCTYPE 「文件類型」對 CSS 是必要的
CSS, JS 置於文件中順序
CSS 放在 <head> 中 meta tag 後面， <script> 放在 <body> 最後面， 也就是 </body> 前面。CSS 需要先讀取才能跟 <body> 中的 HTML 生成 DOM，<script> 可能會阻塞網頁，因此放在最後面。
參考：js <script>元素应该放在html页面的哪个位置？
CSS, HTML 的渲染機制
- HTML 解析完會變成 DOM Tree
- CSS 解析完會變 CSSOM Tress
- 以上兩者結束會開始計算樣式該如何去套用到 HTML 上，並產生 Render Tree
- 版面配置 Layout 決定出每個元素在頁面上的位置
- 最後經過 Paint 將計算結果轉為實際的像素，繪製在畫面上
參考：[熱門面試題] 從輸入網址列到渲染畫面，過程經歷了什麼事？
參考：DOM和CSS渲染过程摘抄-021
CSS 權重
inline style > ID > Class > Element > *
參考：小事之 CSS 權重 (css specificity)
let, const 差別
參考：JavaScript: var, let, const 差異
Typescript 泛型（Generics）
泛型（Generics）是指在定義函式、介面或類別的時候，不預先指定具體的型別，而在使用的時候再指定型別的一種特性。
參考：Typescript 新手指南：泛型
參考：Typescript 中文翻譯：泛型
建立一個 Array map prototype function
Array.prototype.myMap = function(callback) {
let newArray = [];
let x = this.length;
for (let i = 0; i < x; i++) {
let counter = callback(this[i]);
newArray.push(counter);
}
return newArray;
};
let arr = [1, 2, 3];
arr = arr.myMap(e => e * 2);
console.log(arr);參考：Creating my own array.prototype.map method. How can I access the array?
use-query
同時執行查詢：並行查詢
Vue 跟 React 差異
安全性
- SQL Injection
SQL Injection，是發生在應用程式與資料庫之間的安全漏洞。SQL Injection 的攻擊手法，是在輸入的字串中夾帶 SQL 語法，如果負責處理的程式沒有刻意去檢查這個漏洞，這個夾帶著 SQL 語法的字串就會被資料庫認為是正常的指令而被執行。 - XSS
跨站腳本攻擊 XSS（Cross-Site Scripting），是一種網頁應用程式的安全漏洞。XSS 允許惡意使用者將程式碼注入到網頁上，讓其他使用者在瀏覽該網頁時自動觸發注入的程式碼；任何可以讓使用者輸入資料的網站，都必須小心這個問題。JavaScript 就是一種很常被用來進行 XSS 攻擊的程式語言。 - CSRF
跨站請求偽造 CSRF（Cross-Site Request Forgery），是攻擊者通過一些技術手段欺騙使用者去對一個自己曾經認證過的網站發送請求，如：發消息、購買商品等；由於瀏覽器曾被認證過，被訪問的網站會認為是真正的使用者在操作。CSRF 利用了使用者身分驗證的一個安全漏洞：簡單的身分驗證只能確保請求發自某個使用者的瀏覽器，無法保證該請求發自使用者本身。
以下是我們用來展示 CSRF 攻擊的程式碼，共有三個部分：
1.<form>：用於發出 POST 型 CSRF 攻擊。
2.<script>：讓使用者在載入完網頁後自動觸發 submit ，但對某些瀏覽器無效。
3.<iframe>：處理完請求的網頁伺服器會丟回應給 form，導致頁面跳轉，這樣會讓使用者察覺到自己觸發了 CSRF 陷阱，因此加上<iframe>作為<form>的target，將回應放入<iframe>隱藏起來，跳轉頁面就不會發生。 - DDoS
阻斷服務攻擊 DoS（Denial of Service）是一種透過發送大量請求讓伺服器處於忙碌甚至癱瘓的狀態，以至於無法服務正常的使用者；而 DDoS（Distrubuted Denial of Service）則是以分散的方式從不同來源（Source）對一個伺服器進行 DoS 攻擊。DoS 相對之前提及的 SQL Injection、XSS、CSRF 等攻擊方式不同，它的目的不是要竊取或修改資料，只是純粹地想讓該伺服器癱瘓，目的就是讓你無法服務使用者。
CYBAVO
WebStorage, Cookie 的安全性問題
參考：
XSS(偷你的Cookies)
【XSS】利用XSS窃取用户Cookie
看我如何通過XSS竊取localStorage中的JWT
sort algorithm
參考：JS 學資料結構與演算法 (排序篇) — 合併排序法 Merge Sort
旋轉拍賣
路徑問題:DFS
參考：JS算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS)
Brighter
演算法
參考：Find next greater number with same set of digits
參考：coderbyte-Beginner/Array Addition I
面試
上機考 react component 實作，內容不難，但時間不長，兩小時內做一個 poker game，給設計稿跟使用說明，提供 api 串接。大約兩小時半完成，這種面試很吃當時的精神，早上打完疫苗，下午沒睡午覺有點累哈哈。
小結：
比起一年前面對演算法還有上機考進步很多，線上測驗基本都能通過，接下來保持手感慢慢刷一些 leetcode 題目，把 javascript udemy 課程內容整理到 medium。2022 年希望能夠成為更好的工程師，也成為更好的人。
