# Week26（10/04 ~ 10/10）：Final Project

## Oct.04
預計開始上課時間 = 08:00
實際開始上課時間 = 09:30

#### 關鍵結果
1. 主線：final project
2. 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

#### 心得感受
- 今天都在研究 `socket.io` ，看了不少文件跟影片，但感覺差不多了，明天應該就可以弄好了，繼續努力
- 看了一點 Udemy 上面的 redux 的課，之前看到 redux 的部分，後來就跑去寫作業了，現在再回來看覺得用 RTK 就回不去了 XD

#### 今日覆盤
- `socket.io`

  // BackEnd
  const express = require('express');
  const app = express();
  const http = require('http');
  const server = http.createServer(app);
  const { Server } = require("socket.io");
  const io = new Server(server);
  // ...
  
  // FontEnd
  import io from 'socket.io-client'
  const socket = io.connect('http://localhost:5001')
  // ...

- 需要注意前後端的套件不一樣，還有前、後端放不同的 server 的話，還有 cors 的問題，這邊設定也卡了一下，還好解決了
- 所以專案會有：前端、後端、資料庫，最後加上跟 websocket 的溝通，頭真的有點痛 XDD

#### 決定行動
- 主線：final project
- 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

[](https://www.youtube.com/watch?v=BHYgpbPC4wM)
> 附圖為：Let's Learn TypeScript! (with Orta Therox) — Learn With Jason
> 蠻喜這個系列的，看看 TypeScript 的原作者怎麼說，整個過程蠻輕鬆的，也可以看到學習者跟教學者的互動良好

今日上課時數 = 0009:00
累積上課時數 = 1266:00

###### 報告人 : 士育 (benben)

---

## Otc.05
預計開始上課時間 = 08:00
實際開始上課時間 = 09:20

#### 關鍵結果
- 主線：final project
- 支線：畫 final project logo

#### 心得感受
- 今天終於把 `socket.io` 弄好了，昨天把新增的部分弄得差不多了，今天弄 update, delete 的時候一堆 bug ，add, update, delete 的處理分別在不同的 component 一直跳來跳去找 bug 花了好行，但解完蠻有成就感的
- 因為 update 的時候，react 的 key 是先用 id ，結果 socket 更新的時候並不會更新，因為 key 是一樣，後來去後端加了：把更新後的資料傳回來，終於成功了，感動

#### 今日覆盤
- SVG
- 原來 SVG 可以當網址的 icon，蠻讚的
- 原本是要弄個圖形之類的但，因為畫面的 logo 是用 CSS 加文字調的，字體竟然也會影響位置，想說都至中了，但還是有一點偏差

#### 決定行動
- 主線：final project
- 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

[](https://www.youtube.com/watch?v=XEO3mFvrDx0)
> 附圖為：React Folder Structure
> 太晚看了可惡，因為專案差不多定型了，改 path 一定各種爆炸（之前慘痛的經驗），但是還是推薦給大家

今日上課時數 = 0009:00
累積上課時數 = 1275:00

###### 報告人 : 士育 (benben)

---

## Oct.06
預計開始上課時間 = 08:00
實際開始上課時間 = 09:20

#### 關鍵結果
1. 主線：final project
2. 支線：[Next.js 文件](https://nextjs.org/)

#### 心得感受
- 今天一早就各種 debug ，昨天都還好好的，今天一 merge 完別的 PR 就一堆 bug ，感謝 allen 幫一起解 bug，真的超累 = =
- 功能各種壞掉，以為是 socket 的問題，一直找找找，一路從前端找到後端，想說後端應該沒什麼問題了，結果也還是有 bug ，剛剛終於搞定了，讚讚
- 看了一點 Next.js 文件，真的很多神奇的功能，除了 SSR，還有內鍵 server ，可以自己跟自己打 API ，超酷的！

#### 今日覆盤
- Next.js 的 router
- router 超神奇的，直接內鍵了，在 page 下開一個 about.js 檔，`<a href="/abotu"> go to abuot</a>` 就可以連過去了！
- 分頁的話也 OK 建一個 `[id].js` 檔就可以了
- 不用另外裝 react-router-dom 太神奇了傑克！

#### 決定行動
- 主線：final project
- 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

[](https://www.youtube.com/watch?v=Sklc_fQBmcs)
> 附圖：Next.js in 100 Seconds + Full Beginner's Tutorial

今日上課時數 = 0009:00
累積上課時數 = 1284:00

###### 報告人 : 士育 (benben)

---

## Oct.07

預計開始上課時間 = 08:00
實際開始上課時間 = 08:00

#### 關鍵結果
1. 主線：final project
2. 支線：部署 AWS RDS - MySQL

#### 心得感受
- 今天也 final project 的 debug 馬拉松，一路從早到晚，解種 bug，早上也把後端部署好了，之前沒有跟著做的 nginx 跟 PM2 又在複習一次了
- 今天也把 readme 寫完了，明天希望 final project 可以上線

#### 今日覆盤
- tailwind
- 參數的好多數字意義都不一樣喔，有的是 rem、有的是 px ，要一直看文件，有點小麻煩
- 不過支援度蠻好的各框架都有支援，但還有不同設定檔，要設定就是了

#### 決定行動
- 主線：final project 部署
- 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

[](https://www.youtube.com/watch?v=3u_vIdnJYLc)
> 附圖為：tailwind 簡介
> 蠻酷的

今日上課時數 = 0010:00
累積上課時數 = 1294:00

###### 報告人 : 士育 (benben)

---

## Oct.08
預計開始上課時間 = 08:00
實際開始上課時間 = 08:40

#### 關鍵結果
1. 主線：final project
2. 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

#### 心得感受
- 今天一早就開始在看 final project 不吃早餐效率還蠻好的，寫了好多 code 跟解了好多 bug ，各種優化不完 QQ
- 下午本來想睡一下但沒睡，結果到晚上都好累喔，整個超ㄎㄧㄤ...

#### 今日覆盤
- 關於 Loading 頁面

  try {
    setIsLoading(true)
    // ...
    setIsLoading(false)
  } catch (err) {
    console.log(err)
    setIsLoading(false)
    return
  }
  // ...
  // setIsLoading(false)

- 因為 catch 之後有 return 所以要 setIsLoading(flase) 兩次，如果 catch 完之後沒事做就可以寫在外面，一開始想太快都寫兩次，但最來把他修掉了

#### 決定行動
- 主線：部署正式版 final project 上線
- 支線：[Modern React with Redux](https://www.udemy.com/course/react-redux/)

> 附圖為：window terminal 可以多開，前後端都要用的話蠻方便的

今日上課時數 = 0010:00
累積上課時數 = 1304:00

###### 報告人 : 士育 (benben)

---

## Oct.09
預計開始上課時間 = 08:00
實際開始上課時間 = 08:40

#### 關鍵結果
1. 主線：優化 final project
2. 支線：tailwind 的 build 不出來問題（重裝就好了？）

#### 心得感受
- 今天也把昨天卡很久的資料整理的功能弄好了，昨天本來想在前端做，但變成要打兩次 API 才能拿到需要的資料，但不用動到後端
- 早上討論完後，改成在後端再開一個 router 整理完再給前端，也確實這樣應該比較好，有一些小卡住的地方，像是日期的比較大小等等，感謝 @allen 支援

#### 今日覆盤
- 關於 Seuqelize Module 的 reduce 語法

  {
    // ...
    likes: Comments.reduce((acc, cur) => {
      const createdAt = new Date(cur.dataValues.CreatedAt)
        .toISOString()
        .slice(0, 10)
      if (createdAt !== currentDate) return acc
      return acc + Number(cur.dataValues.likesNum)
    }, 0),
    // ...
  }

- reduce 語法：reduce((acc, cur) => acc + cur)
- 但如果要 reduce 一個 Seuqelize Module 就要多寫一個 dataValues ，像是： "cur.dataValues.XXX" 這樣，這也是慢慢一個一個 console 試出來的 XD

#### 決定行動
- 主線：final project
- 支線：整理一下各種筆記，開始複習

> 附圖為：哇！180 天了，好快喔，繼續 Happy coding
> 你也是快樂的綠點狂魔嗎，但我的字都是放連結都是假的 XDD

今日上課時數 = 0009:00
累積上課時數 = 1313:00

###### 報告人 : 士育 (benben)

---

## Oct.10

- 今天早上把期未小測驗寫完了，也順便錄了一下，有想看被爆雷或是想看我糞扣的，可以看一下：[Lidemy 期未測驗](https://www.youtube.com/watch?v=jEOpSOHIlTs)
- 終於來到了最最最最最後一天，感覺有點像當兵（？），每天一起床不是寫扣就是看扣，6 個月 180 天無間斷，如果沒有這個課程，我可能還像隻無頭蒼蠅四處亂飛吧

#### MTR05 成就解鎖
- 課程全跟完，作業交到 Week24
- 期中測驗、期未小測驗
- Final Project 1.0 版正式上線
- LIOJ 1001 - 1052
- 其他族繁不及備載

[](https://www.youtube.com/watch?v=3LNrNc8-x_c)
附圖為：CS50 中文導讀：week 0
在報名 MTR05 前第一個看到的 Lidemy 影片
但現在去看原文的 CS50 可能還是不太懂 XD

---

本周上課時數 = 0056:00
總累積上課時數 = 1313:00

### Lidemy - MTR05 終。

###### 報告人 : 士育 (benben)

---

_ to be continued (y/n) ?
_ y...
_ ...
_ .

---