W21_直播檢討

Q1: 為什麼 npx-create-app <檔案名稱>，這個檔案名稱不能有大寫？

A1: 可以 google 錯誤訊息 "name can no longer contain capital letters"，參考 Why can't React project name contain capital letters?，結論就是統一小寫，才不會搞混。

Q2: 接案公司好嗎？看面試心得，學長姊都有特別問，感覺大家很在意這個

A2: 乙方會有一些時程壓力，也是要看案子，假設你要視覺方面的話，會比較適合；做公司自有的產品比較有技術面，也會有認同感。

Q3: 之後會開放把自己的每日報告下載下來呢功能嗎？想紀念一下

A3: 可以用網路爬蟲爬一下。

Q4: 履歷建議用 PDF 還是 個人網站 (履歷寫在上面) 呈現呢 ?

A4: 有時間是做個人網站，做得簡潔漂亮就有加分。有些學長姐是用個人網站列印成 PDF，也是一個辦法。沒時間就做 PDF。

Q5: 老師，建議專案測試用 heroku 建立一個資料庫，大家都連上去測試，新增資料，這樣會有問題嗎？（被收費之類的）

A5: 不會喔。不過現在heroku免費版改成一天最多醒來18小時，所以就設凌晨睡眠，其他時間來戳，這樣服務就不會停了。

Q6: CRA 裡面內建的 test 檔或 robot 檔刪了會影響什麼嗎？雖然知道用途，但目前階段還用不太到。 還有 .gitignore 可以怎麼做調整比較好，像 .php 之類的，不確定實際有沒有用到，還是就讓它那樣就好 (edited)

A6: 內建的 test 檔刪了不會怎樣。robot 檔第六周講過，是給機器看了，刪了對專案應該沒有影響，看你的專案是什麼啦。

Q7: 想問 map 跟 forEach 在 react 裡關係，因為說是 react 普遍用 map 來寫，但有時候不需要得到新數組（沒有那麼需要用到 map 方法的時候）也一樣寫 map 嗎？因為 ESlint 希望我寫 forEach

A7: 數組是陣列的意思，數組是中國用語。因為 map, filter 那些東西才會有回傳值。forEach 沒有回傳值。

Q8: 測試的部分可以多著墨嗎？還是說以後不太會遇到，但感覺又是蠻重要的一個環節？

A8: W24 會講更多一點，之後會提供給大家一個影片，參考我的筆記「淺談 React 測試」，對新手來說，確實會不太會碰到。

Q9: 老師可以聊聊以前爆炸的例子嗎，可小可大，像是 git 分支推錯、code 測試瘋狂報錯、不小心刪掉專案之類的，跟後續發展處理，也可以分公司和個人講～～

A9: 老師忘光了，要嘛沒什麼，要嘛忘記了

Q10: 公司會 code review 是好還是不好，好像很多公司沒有 code review

A10: code review 好，但花時間，是維持品質的一個蠻重要的方式。

Q11: seeders 本地測試後會需要推上去嗎，還是說本地測試應該要怎麼新增資料來做，另外 postman 可以再稍微講解一次嗎

A11: seeders 會需要推上去，但不執行，看你需不需要那些假資料。

Q12: 老師，可以請你再講一下，還是不太理解為甚麼 import 東西會有一個大括號 ? ex: import { ThemeProvider } from 'styled-components'

A12: a.js 檔案裡面有個東西為 export default m，在 b.js 檔案裡面引入的話，寫成 import m from "./a"

假設 a.js 檔案裡面有另一個 export 的東西叫做 m2，那在 b.js 檔案裡面引入，寫成 import { m2 } from "./a"，像是把 m2 當作一個物件在輸出

Q13: 自己學完 styled-component 練習切版時發現，react 的圖片載入跟 iframe 會需要再額外安裝套件讓他跑起來 ? 是因為甚麼安全性考量嗎 ?

A13: 兩個都可以直接用，不用另外安裝套件

const Frame = styled.iframe
<Frame src="https://...."></Frame>

補充：補充個 因為react 301 class 版本裡面有教如何手工建置環境，但手動的環境載入圖片跟 iframe 還有換行有出現問題，所以問了上述的問題，並去下載套件 >< (edited)

答：可能是 webpack 要調整，主要看錯誤訊息是什麼。

Q14: jsx 裡面與 js 有關的東西都要用 { } 包起來，但是 {
} 是 html 標籤，為甚麼也要用 { } 包起來， 就沒有用 { } 包起來

A14: 其實 <br/> 包與不包都可以，可能剛好那樣做，沒有什麼特別的意義。

Q15: 目前進度剛開始學習react，自己覺得沒辦法兼顧兩邊沒有找分組。想問老師如果也是想要在時程內出去求職會怎麼推薦後續安排？1)上完w21-24 求職 or 2)w21 w22 + 加強自己的作業變成final project 求職 謝謝老師!

A15: 推薦選項 2，w24 可以看完但不用實作，稍微看一下知道概念。
redux 重要性變得低一點了，雖然蠻多公司還是會問。

Q16: 老師認為不特別學習 class component 會對後續整個掌握react 的能力嗎？目前看很多介紹都說去學習class component 可能會對學習hooks 比較混淆 目前有在考慮都看hook的部分就好 不曉得老師怎麼看

A16: 其實都可以，看個人，不看 class component 也沒關係，如果看了有更懂 React 就看。

Q17: 在react 開始崛起之前老師寫前端主要是用原生js嗎

A17: 原生加 jQuery

Q18: 除了目前課程教的內容，之後還建議學習什麼內容呢？

A18: 建議把作業全部重寫一次，把挑戰題做一做。
感覺有點像是高中畢業，到了大二就忘光了，如果高中基礎都還記得，其實蠻不錯的。
從工作上需要什麼開始學什麼比較好。

Q19: 之前有看到有人認為現在台灣前端會偏向要雙修的狀態，前端+設計 or 前端+ 一點後端 老師覺得是這樣嗎？

A19: 看能力，如果前端夠強無所謂，有些公司需要前端加後端，前端加設計比較少。

Q20: if (user) return await res.status(500).json("這個帳號有人用了，換一個吧～"); 老師想問這邊的 await 還有需要加嗎？如果已經沒有下一步，要直接 return 了，還需要嗎？

A20: res.status(500).json 是與不是一個 promise 都不需要用，不過如果要加 await 後面一定是要一個 promise。

後記：同學通靈了：「.json 會回傳 promise 的是 fetch 的 response，感覺剛剛問問題的同學是跟這個搞混了？」

Q21: 老師可以稍微講解一下 async await 嗎～

A21: 之前有講過，可以翻一下前面的影片。

Q22: 老師，想請問想走後端的人，如過跳過 21-24的課程。請問有建議補充的自學項目清單嗎 ? 感謝

A22: 把後端 14, 17, 18 的挑戰題都做一做，可以參考這個系列 成為看起來很像很強的後端

Q23: 對於期末會跟不同人合作的 Final Project，想要請教如果是以老師的角度，對於「合作」方面會比較著重在什麼重點上？謝謝老師。

A23: 技術上或人的相處，分工的方式，為什麼要用這個技術等等。

Q24: 看了 PJ 大大的鐵人文章裡面用了 @emotion，會推薦使用嗎？可以在作業中練習使用嗎@@

A24: 可以，跟 styled component 很像，老師更推薦用 emotion，因為更新比較頻繁，不過用哪一套都可以。

Q25: sqlMessage: "Unknown column 'Product.is_deleted' in 'where clause'", errno: 1054,，老師我們在使用 postman 編輯資料時，出現這個錯誤訊息，查了後發現是跟外鍵相關的問題

A25: 這個跟 postman 無關，可能是名字打錯，或者關聯下錯

Q26: 老師請問如果想走後端的話，學習上有哪些需要額外加強的呢？面試的時候有沒有需要特別準備的地方？ (edited)

A26: 可以參考 Q22，資料庫、SQL 會不會下（sql having and group by）、join 要很熟，系統架構要多看一點。

Q27: User.hasMany(models.Product) ---> User.hasMany(models.Product,{foreignKey : 'user_id'}); 後面這樣寫跟課程中使用 include的區別是什麼

A27: 不要去動名稱，Sequelize 預設是什麼就是什麼，不然會很麻煩

Q28: 請問之後開始求職的話，會建議也投用 Vue 的公司嗎？看 104 感覺也蠻多公司在用 Vue，但又怕進公司才學，會不會到時候壓力很大

A28: 也可以投投看，蠻多人進公司才學 Vue，通常是說 Vue 比 React 簡單

Q29: 老師說 24周也會有 期末測驗。 react 會大概著重什麼部分呢

A29: 會有一題實作，概念或 debug 吧

講解 useMemo, useCallback, memo 47'45"

1. React 就是多寫就會更熟悉，順便講一下 useMemo, useCallback 在幹嘛，這兩個影響的是效能，不是功能。

2. re-render 有兩種意思：
   a. componenet render fn 被呼叫
   b. DOM 真的有被改變

只能針對 a 部分做優化

useCallback: 記住這個函式
useMemo: 記住函式回傳的東西

Q30: vue 跟 react 比較後的優缺點比較，也想知道為什麼 react 會成為近幾年主流

A30: React 比較早，是一個新的模式，Vue 有些東西是從 React 參考過來的

Q31: 要懂 useEffect 的話，是否就一定要懂 class component 的生命週期?

A31: 不用，搞不好懂 class component 才會搞混 useEffect

Q32: 以 todo list 來說，在輸入框用 onChange 去監聽再去 setValue，每打一個字就會 render 一次，是正確的嗎？

A32: 是正確的，雖然聽起來很奇怪