W21_直播檢討


Posted by Christy on 2021-11-21

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: 是正確的,雖然聽起來很奇怪










Related Posts

初見狀態管理工具 Vuex (4) - Modules

初見狀態管理工具 Vuex (4) - Modules

CSS 基礎 Part2:各種裝飾

CSS 基礎 Part2:各種裝飾

Markdown Notes || 語法整理

Markdown Notes || 語法整理


Comments