W19 直播檢討

建議自己 W17 - W18、W21 - W22 上完課以後再回來看一次直播。

本週重點複習：

1. prototype 複習
2. React 生命週期複習
3. hash 複習
4. this 實際用途複習

Q1: 可以從函式知道 this 代表的值，但還是搞不清楚何時需要用到 this

A1: 從 0'00" 到 11'34" 為止。主要是看 this 怎麼被呼叫的，可以看下面的範例：

// 這樣就會出現 undefined
var q = document.querySelector
q('h1')

// 用 bind, apply, call 的方式，就可以修正
var q = document.querySelector.bind(document)
q('h1')

Q2: 老師對於一個人做final project 會有什麼看法

A2: 去面試的可能被問到「有沒有跟其他人合作的經驗」，可以想一下怎麼說比較好。也可以說，交作業就是一個合作過程，助教會 merge 作業。

Q3: 1. 加鹽的原因是怕使用者設定太過簡單的密碼所以強制加長其長度，這樣對嗎？ 2. hash 的目的是當資料庫被入侵時，拿到的是 hash 過後的密碼，所以也無法得知原始的密碼的長相，但是 salt 不是也會存在資料庫嗎？這樣有 salt 跟 沒有 salt 就沒有差異了啊？

A3: 1. 對。 2. 沒有加鹽的情況下，用彩虹表可以看出真實密碼；有加鹽的話，假設你的鹽夠強的話，駭客就要用暴力破解法，要花很多成本。除非駭客的資料庫超級強大，可以反推任何密碼。

Q4: 可以再請老師講解 從 prototype 來看「原型鍊」 影片 11分鐘之後原型鏈的內容嗎？ 為什麼可以寫成 a.first() 而不是 a.proto.first()

A4: 老師解釋的很詳細，又複習了一次 prototype，簡單來說 prototype 就是這樣運作的，如果 a.first() 裡面找不到 first，就會去 a.__proto__.first() 裡面找。

Q5: 想請問老師上一屆學員的專案在W26前完成的的比率大概多少

A5: 沒記錯的話，好像是一還是零，要學 react 還要做專案，要花很多時間。

Q6: 想問老師對 React 的學習曲線有什麼看法？雖然把 React 看過一遍，實作過 class component 跟 function component 也大概知道基本用法，但遇到變化就會卡死，沒辦法從0 到1 做出一個符合需求的東西，這中間可以透過什麼來補足？繼續跟著實作、繼續看觀念、重新看課程影片？

A6: 繼續跟著實作，發現從哪裡不足就補哪裡，把卡住的地方再複習一遍，多多練習，把每個功能切小，卡在哪邊再學一遍。

Q7: 為什麼公司要請一個剛學會基礎內容的 junior ，然後還有出包的風險，不直接請有經驗的人呢？

A7: 有些公司沒有經費，或者沒想到會有出包的後果。

Q8: useState 是一種閉包嗎？ 每一個 useState 都是獨立的，然後也是要遵循 setState 才能改動到 state 跟閉包有點像？

A8: 有點像閉包，但還是要看他底層怎麼實作的。

Q9: 以下是網上的 debounce function 範例：debounce 入面的 ...args 其實代表什麼?

A9: 可以把不知道的東西印出來看，藉此可以看出好像跟參數有關。 ...args 跟 ES6 語法展開那個差不多，這樣 js 就會把它變成一個陣列。是一個常見的用法，可以學起來。

Q10: 在建置 react 環境時， webpack 還有 babel 設定檔的程式碼都是要記下來的嗎？

A10: 不用，很少自己去設置，如果需要去參考就好了。

Q11: 老師～下週可以不要因為是複習週就沒有直播問答嗎🥲 我們需要您！

A11: 工程師注重的是一致性，複習週沒有直播就是沒有。😂😂😂

Q12: [BE201] Sequelize 實際示範當中老師拿資料是用 User.findAll().then 現在它的文件示範是 await User.findAll() 對 await async .then 的轉換還不夠熟悉 這邊可以請老師講解一下兩者怎麼代換嗎！謝謝老師！

35'08" 學完 W17、W18 再回來看

學完 W17 再回來看就知道老師在講什麼了

function get () {
  User.findAll().then(result => {

  }).catch(err => {

  })
}

// 上下程式碼是等價的

async function get () {
  try {
    const result = await User.findAll()
  } catch (err) {

  }
}

Q13: 想評估期末專案的規模與花費的時數，老師認為 final project平均而言一個人一週大約花幾個小時做，總共做幾週會是比較好的？謝謝

A13: 建議花的時間跟課程一樣，一週一個人四十小時，做兩三週，大概 150 小時左右；四個人總共 320 小時，不要超過一個月。User Story、畫 wire frame 可以現在就規劃，盡快完成。之後學到框架以後，就可以動工了。

Q14: w17 express 的作業即使知道 req 是一個請求 res 是一個回應，還是會搞錯兩個，請問老師這邊有沒有什麼規則或原理可以區分是每一次後面+屬性或function 時前面是需要用 res 或 req

39'30"
A14: 沒有規則可以區分，老師也蠻常搞混的，用過搞混的記起來，看看有沒有什麼規則。

Q15: BE201做一個簡單會員系統24~25分老師處理讓錯誤訊息問題時，想問1)為何直接 return req.flash(...) 錯誤訊息無法出現把它導到 back 上一頁就會出現？上一頁並沒有寫錯誤訊息處理的東西 另外2)後面用實作middleware 來處理也就是說我們可以把任何想做的事寫成 middleware 嗎？

41'10"
A15: 對，共通的事情都可以寫成 middleware 來處理，可以想像它是一個給 request 的函式。如果你想要搞懂的話，打開 dev tool 看看。

Q16: 想知道台灣業界目前前端工程師需求情況是不是不太樂觀

A16: 可能跟疫情有關，遇缺不補。對於要求越來越高，因此這一期強烈建議大家寫期末專案，或者稍微修改一下作業。如果老師看新人履歷，只有 twitch api 跟 todo list 就會關掉不看了。作業要做的更完整一點，大概放一到三個就夠了。如果要做 todo list 可以結合後端，或多人協作的版本，或者參考 todoist。

Q17: W21 有提到 react hook flow diagram，還不是很能理解這張圖的意思，想再次聽老師說明

A17: 47'05" - 58'57" : 這裡建議上完 W21, W22 再回來聽一次。

1. mount: react render 時，背後有幾個含義，render 完以後，還沒有真正放到畫面上，而是他背後做的 createElement 那種才叫做真的 mount

48'57"：react 的 useState(這裡面居然可以放一個函式！)

// 這時候就會把函式回傳的值當作初始值
function App() {
  const [a, setA] = useState(() => {
    return b
  })

1. 接著來看 update 裡面的過程，紅色是處理中的流程，接著下面等到 browser paint 才是真正有畫面出來

2. 第一次完畢以後，第二次有新的 state，綠色的部分是初始化的地方，紅色是 useLayoutEffect() 準備 DOM 的部分，接著是黃色 useEffect() 把畫面畫出來的部分，因此在 useEffect() 這部分新增的東西，會影響畫面上的變化，操作盡量放在 useEffect() 上面，不要放在 useLayoutEffect()

心得：我意識到我從來沒有真的認真的研究看懂這個圖，直到老師講解才明白，原來三個階段是這樣，初始化的階段除了清除以外，其他的就會全部跑一次，顏色比較飽和的，代表有在此階段運作；顏色比較淺的代表沒有運作，因此可以看到最後 unmount 的地方只有清除有運作而已。

Q18: react 的檔案好難拆分，是多拆就會了嗎，對於 styled components 用不太順手，為何比較推薦這種寫法

A18: 照你想要的拆，碰到問題你就會知道怎麼做了。要換東西就用 props 去換，變化就像是參數的感覺

Q19: 想問老師覺得面試是有分組協作的經驗重要的程度大概介在哪邊 1到10的話

A19: 2~3 吧，我比較看重能力的部分。

Q20: throttle 的實際應用為何？

A20: API 不能打太多次，阻止你呼叫某個東西太多次。

Q21: bind, apply, call 一定要會嗎？工作會常用到嗎？

A21: 面試常考，但工作不會常用到。

Q22: 老師請問一下 generator 在工作上會使用到嗎？看到 ES6 蠻多東西有用到的，像是 async, await, iterator 的底層都有用到 generator，感覺好像不知道就沒辦法了解 async, await

A22: 其實是相反，如果知道 generator，比較難了解 async, await 在幹嘛。generator 蠻少用到的，一個叫做 redux-saga 有類似的概念，但有點複雜。

Q23: 老師覺得第五期目前有比上一期更提早開始規劃 final project 嗎？總覺得目前同學都在討論了 但框架還沒學完有點焦慮！

A23: 還好啦，早點規劃是好事。

Q24: 老師可以講一下前端工程師的產業未來分析、供需或是怎麼樣嗎

A24: 沒有研究，沒有想過，通常不喜歡去想這些東西。

Q25: 前端工程師加上 UX 或是 UI 能力或是什麼有加分嗎

A25: 看公司，如果去的公司比較注重設計的，就會加分，其他的倒是還好。

Q26: Final Project 建議幾個人？

A26: 四個差不多，比較好溝通。

Q27: 寫完17周以後有點無法想像如何前後端分開寫了~~QAQ

A27: 不要緊，之後就會想起來了。