W22_直播檢討

Q1: 可以對 final 工具選擇做一些大方向建議嗎，例如前端就用 React，因為課程就教 React，或是儲存機制用 jwt 因為 React 搭配 jwt 是最慣用常見做法，之類的

A1: 後端建議用 W17、W18 那些，前端用 React + React router，不一定要用 Redux

身份驗證用 JWT or firebase 也可以

Q2: react 寫的 SPA 是不是不太常用 express-session 做驗證?

A2: 同學想問的應該是，是不是不常用 cookie 來做驗證，因為背後還是靠 cookie 來溝通

在確認「沒有登入」這個狀態下，JWT 比較有優勢：

用 cookie、session 來判斷使用者是否登入，一定要打 API 才知道；可是 JWT 如果拿不到 token 就是沒有登入這樣

三顆星補充重點：

假設用 cookie 或 session 做身份驗證，之前 W14 有教過的 LB(Load Balancer)，比方說 server 背後有兩台 LB，第一台 LB 有身份驗證的紀錄，但第二台沒有，假設有一天被轉到第二台機器，這樣就變成沒有登入了；解決方法就是：

sticky session: 讓同一個使用者永遠到同一台機器
開一個資料庫（通常會叫 cache 的 server，一些不重要的資料都放在裡面）在兩台機器之後，讓機器可以去讀寫資料庫

Q3: 請問期末專案會建議自己建一個 react 環境，還是使用 create-react-app （好大一包）?

A3: 自己建兩天以內完成可以自己用，建議用 create-react-app 啦，可以估狗 react boilerplate

Q4: 老師覺得以我們大多數人的專案規模，需要使用到 redux 嗎

A4: 建議不要這樣做，直接去 fetch 去呼叫 api 即可。有一些 global 的 state 可以用 redux，但是用 context 也可以。

Q5: 想問可以稍微說明當初學習系統的整體開發細節嗎，像是以 Express 開發，透過 experss session 來做 session 儲存，考慮到什麼情況...所以把錯誤處理包出來，或是哪邊邏輯遇到什麼問題，然後怎麼解決這種

A5: 身份驗證用 firebase，因為它提供各種登入；後端就是用 express + sequelize

Q6: 想問老師為什麼會想把 Redux 納入課程

A6: 前一兩年是寫 React 必備的工具，hook 出現之後到近一兩年來發現 redux 在小專案不是那麼必要，用了也沒那麼好，但還是蠻多公司在用 redux 的而且會考，目前業界開發或面試還是蠻常見的考題。

專案大會需要一種工具來管理 global state，有很多 context 會很麻煩，所以專案大還是會用到。

Q7: webpack 還是不太懂會影響求職嗎

A: 以求職來說還好

Q8: 以目前趨勢，有必要學習 class component 嗎，因為不想增加學習負擔但怕面試會有差，還是就很看公司這樣

A8: 以面試來說，真的會寫 React hook 就好，如果現在不想學，那就不要學也沒關係。假設以後進公司要學，公司會覺得應該不會花太多時間學習

Q9: 在 17 週的時候，頁面的資料都儲存在後端 server。而現在 React 前端就算不用去後端拿資料也可以顯示畫面。這是否代表 React 自己也有一個 server，裡面存著 React 的資料？

A9: React 在開發時是幫你跑一個 server 起來，背後是靜態的檔案

Q10: 一個人做 final project 的話老師會建議規模/使用技術，大概到哪邊，謝謝老師

A10: 跟多人做一樣，沒有差別，技術：前端 React，後端 Express + Sequelize；規模不能太小，要做出相對完整的東西，可以參考把所有東西平台化的那一篇文章。

Q11: 請問老師覺得 react 大概學到怎樣的程度比較可以去面試（及自己該如何檢視

A11: google React 面試題看能不能回答得出來，懂一半考題就可以了；不看解答能寫出 ooxx 跟 todo list 是基本中的基本；懂 React 每個 hook 在幹嘛；懂 React 裡面的流程，是怎麼 render 的

Q12: 31'19" 老師可以稍微講解作業檢討裡面五子棋獲勝邏輯實作的程式碼嗎，可以了解用直橫斜超過四子來判定而非ＯＯＸＸ判勝官方用窮舉的方式，但不太懂在 countTotal 這個 function 裡面是怎麼計算出連續同顏色的棋子的數目（推測自己是不理解，傳進去的是二維怎麼算出「幾個棋子」，導致 countTotal 看不懂，想問為什麼 if (countTotal(x, y, 1, 0) + countTotal(x, y, -1, 0) >= 4 ...) { } 丟進去做判斷的時候，需要分別傳 1 和 -1 的 directionX 再相加起來做判斷

A12: countTotal 裡面有四個參數 currentY, currentX, directionY, directionX
dircetion 代表要走的方向，比如說 [1, 1] 就是 x 軸 + 1, y 軸 + 1，代表往右上方走
countTotal 計算的是，從自己（某一個點）開始，往四個方向走，有幾個棋子顏色跟自己相同，不包含自己

Q13: INT101 裡面老師建議課程有上完就開 45~50 想問這一期的求職老師大致也會這樣建議嗎

A13: 根據面試狀態調整，如果你對自己有信心的話，有學經歷背景，可以一開始開 45，建議一開始開 42 比較好。

Q14: 在16週有探討過 this 的值，但感覺後來好像比較沒用到不知是否是因為用 hook 寫 react 的關係，class component 好像比較多 this。在這樣的狀況下老師覺得要怎麼樣跟 this 更熟 >< 或是說 this 還有什麼比較常出現的場景嗎

A14: 除了 class component 常用到的時候，其他很少用到 this。寫 Angular 比較常出現 this

Q15: 敬愛的老師您好，不才學生想請教關於您設計五子棋作業的教學理念，目前僅體會到看官方文件與自我學習的深意，希望能得到老師的開示，並附上五體投地的感謝。

A15: 五子棋跟課綱裡面的學習資源有關，老師預設大家有看過官方教學才會去寫作業，五子棋是 ooxx 的延伸，如果有看懂 ooxx 的官方教學，那至少下棋的部分是一樣的，會卡的可能是畫棋盤跟判斷勝負，想太久的話就問人，一直卡對學習沒有幫助，也考驗了二維陣列的熟悉程度

OOXX:

有兩個玩家
版面 3*3
連成三個就贏

Q16: 想問老師平常開發要寫像五子棋那樣的獲勝邏輯情況常見嗎

A: 比較少見，因為沒有什麼東西要判斷勝負