# Week19（08/16 ~ 08/22）：產品開發流程

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

#### 關鍵結果
1. 主線 : [FE302] React 基礎（hooks component 版） ：20%
2. 支線 : 研究 vim & vim 的套件

#### 心得感受
- 早上研究了 vim 的套件，之前只有簡單設定 .vimrc ，終來研究了一點 vim 外掛，結果為了外觀就弄很久了，因為不是 Mac/linx 系統所以遇到比較多問題，但又成功更深入 vim 坑了，好耶！
- 下午看一下 react ，還要再多看多熟悉一下

#### 今日覆盤
- 關於 VScode 的 vim 插件
- 原來 VScode 的 vim 插件還可以引入 .vimrc 的設定檔
- 大神啦！這樣就可以在 VScode 中用 vim 的插件了，在插件中裝插件的覺感 XD
- 可參考 : https://stackoverflow.com/questions/63017771/how-to-modify-change-the-vimrc-file-in-vscode

#### 決定行動
- 主線 : React
- 支線 : week18 直播


> 附圖為 : huli 上來聽讀書會了！有神快拜
> 沒有人 : 老師，第五期的學生還有救嗎？
> huli : 都沒救了喔 ( 本日金句 )

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

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

---

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

#### 關鍵結果
1. 主線 : [FE302] React 基礎（hooks component 版） ：35%
2. 主線 : week18 直播
3. 支線 : 討論 final project、研究 figma

#### 心得感受
- 早上討論 final project, 我們的 wireframe 應該會用 figma 去畫，只是大家都沒用過，就一起一邊研究一邊討論
- react 看完了[【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端](https://www.youtube.com/watch?v=zqV7NIFGDrQ)，還蠻不錯的，感謝 @安潔 跟 @jason 推薦

#### 今日覆盤
- vim 的 eslint 插件
- 晚上剛好在小樹屋遇到 @jasOn 助教，問了一下有什麼推薦的 vim 插件，助教推薦一個可以用 eslint 的插件，讚讚
- 可參考 : https://github.com/neoclide/coc.nvim
- 我也要成為 vim 宣傳大使，目前成員 : jasOn 助教、我。沒有了，OK fine

#### 決定行動
- 主線 : react

> 附圖為 : figma 新手上路
> 我以為我在玩小畫家 XD

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

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

---

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

#### 關鍵結果
1. 主線 : react + 研究 styled-components
2. 支線 : 參加 [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

#### 心得感受
- 早上討論 final project ，一起研究了 asana ( 專案管理 ) 跟 gitmind ( 流程圖 )，目前用還不錯，都先玩一下
- 今天來小樹屋聽讀書會好多人喔，真的快爆了，最多到 24 人

#### 今日覆盤
- styled-components 的 keyframes
- 原來 keyframes 要這樣寫
- 可參考官網 : https://styled-components.com/docs/basics#animations

  // Create the keyframes
  const rotate = keyframes`
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  `;

  const Rotate = styled.div`
    display: inline-block;
    animation: ${rotate} 2s linear infinite;
  `;

  render(
    <Rotate>&lt;🔥&gt;</Rotate>
  );

#### 決定行動
- 主線 : 寫 react 作業
- 支線 : 參加 [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

> 附圖為 : 我現在的 vim ( 看起來就是潮 XD )
> 直接產生 item1 - item101

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

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

---

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

#### 關鍵結果
1. 主線 : week21 hw1 還在研究 eidt, filter 功能
2. 支線 : 參加 [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

#### 心得感受
- 早上一樣再研究 final project 的心智圖 ( GitMind )，討論完下午就先交出 week19 的作業了
- 研究了 styled-component 的全域 CSS 要怎麼寫，像是 reset CSS 等等，還有練習用 styled-compoent 切版，目前用起來還是卡卡的，還要思考拆分 component，還有很多的 component 的命名，我覺得命名是最難的部分

#### 今日覆盤
- styled-component 的全域 CSS

  import styled ,{ createGlobalStyle } from "styled-components";

  // reset Css ---------------------
  const GlobalStyle = createGlobalStyle`
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  `
  
  export default GlobalStyle

- 然後再最上層的 App.js 引入 <GlobalStyle />

#### 決定行動
- 主線 : week21 hw
- 支線 : [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

[](https://www.youtube.com/watch?v=ev2fVTypplA)
> 附圖為 : KUNG龔敬文【說說 Just Saying 】
> 因為大嘻哈時代看到的饒舌歌手，蠻讚的
> 『 反正還有明天、還有明天、還有明天… 』
> 不要只會ㄕㄨㄛ ㄕㄨㄛ啦
> 好，我要認真寫 code 了，我只是說說啦

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

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

---

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

#### 關鍵結果
1. 主線 : 完成 week21 hw1
2. 支線 : [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

#### 心得感受
- 下午終於完成了 react 的 todo 了，filter 跟 edit 的功能研究了很久，想不太出來，還是去看官方的文件，才寫出來
- 下一個作業好像也更難了，但也是要跟著官方文件走再延伸，還要看一下 class component 的部分
- 晚上讀書會 live coding 解 leetcode 失敗了，因為時間不夠完成了 87%，小尷尬 XD

#### 今日覆盤
- 今日 Leetoce : 7. Reverse Integer

  var reverse = function(x) {
    // edge cases
    if (x < -Math.pow(2, 31) || x > Math.pow(2, 31) - 1) return 0
    if (x < 0) return -1 * reverse(-x)

    let str = x.toString()
    let reStr = []
    let reNum = null

    // for (let i = str.length - 1; i > -1; i--) {
    //   reStr.push(str[i])
    // }

    // 簡單爆力的內鍵 reverse
    reStr = str.split('').reverse()

    reNum = Number(reStr.join(''))

    // edge case output
    if (reNum < -Math.pow(2, 31) || reNum > Math.pow(2, 31) - 1) return 0
    return reNum
  };

#### 決定行動
- 主線 : 研究 week hw2
- 支線 : [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

> 附圖為 : 早上 final project 討論的 websocket
> 好像因為會用到 websocket 的部分，不知道能不能研究成功

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

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

---

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

#### 關鍵結果
1. 主線 : 研究 Final Project, React 文章
2. 支線 : [小樹屋讀書會 2.0](https://hackmd.io/8itqPI0HSnqZvrKGL7OxDQ?view)

#### 心得感受
- 早上跟組員繼續畫 fimga，我研究了 figma icon 的部分還蠻好玩的 ( ？ )
- 下午邊看文章邊幫同學 debug ，看了一下 amos 的 [CSS 選取器文章](https://ithelp.ithome.com.tw/users/20112550/ironman/2799)，收獲蠻多的

#### 今日覆盤
- CSS 選取器流程
- 在 `.news ul li a` 這一長串選取器的選取流程會是由右至左的選取，也就是瀏覽器會先選取到 a 標籤後再看他的父層是誰，然後再看他的父層的父層是誰，然後再看他的父層的父層的父層是誰，然後再看他的父層的父層的父層的父層是不是 .news ( 金魚都能懂的 CSS 選取器 - 第七篇 )
- 我也很喜歡這樣寫，感覺 html 會乾淨很多也不用取一堆 CSS class 的名稱，不是很好嗎？，但總是有代價的 ( 流暢跟效能的等價交換 )

#### 決定行動
- 主線 : react 研究官方教學的文章
- 支線 : 休息一下

> 附圖為 : week21 hw 1 React Todo ( 我們永遠的好朋友 )
> React 好難啊，filter 跟 編輯 都好難

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

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

---

## Aug.22

- 又過完一周了，下周就是最後一次的複習周了，還是不敢相信時間過這麼快，彷彿昨天還是剛加入 Lidemy 的狀態，但下周已經是最後一次複習周了啊 QQ
- 早上研究了 WebSocket 跟 Socket.io ，還要再研究一下，希望可以快點研究成功，中午部署 socket.io 的測試 server 時候卡住，剛好在小樹屋遇到 @cwc 助教 跟 @Lavi 學長，一起幫 debug 果然是真後端的高手們，一下就看出是我 server 的防火牆沒開到，我一直想說我有開 ufw 的啊，原來是不一樣的防火牆，因為之前沒遇到這個問題，都是用預設 80 port，但現在就跑出來啦，應該也可以用 nginx 把 port 導去 80 port 就可以了，但是那時候就先跳過了，所以真的不可以逃避 XD

---

#### 本周覆盤

- 指定教材
- [x] [PD101] 淺談產品開發與工作流程
- 作業
- [ ] HW19 作業
- [x] 規劃一下自己之後期末專案想要開發什麼樣的產品
- 自我檢測
- [x] P1 知道什麼是 Scrum
- [x] P1 知道 Scrum 中通常會有哪些元素
- [x] P1 知道什麼是 user story

本周上課時數 = 0057:00
累積上課時數 = 0947:00

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

---

## 期末程式碼品質提醒
( 十九周隨意聊 )
大家安安，有鑒於期末將近，提醒幾點在 code 上面的要求
這些要求在課程中不是強制的，就算沒有也不會讓你不及格
但若是將來面試官會看你的 code，有些東西可能是「只要看到出現一次，直接不及格」
沒錯，就是這麼嚴重的程度，所以請各位同學多加注意
很多面試官是比較重視細節的，儘管在你看來可能只是一點小錯誤
或者是一點偷懶造成的結果
但在面試官眼中，就是直接被刷掉掰掰

命名慣例
這個以前講過很多次了，底下幾種都是不及格的行為：

變數跟函式亂命名，例如說 var a = 1, b = 2 之類的，迴圈的 i 是約定俗成不算
英文的單複數要分清楚，例如說是 let users = [] 而不是 let user = []
JS 中沒有用 lower camel case 來命名，Item 或是 ClickCount 這些大寫開頭都是錯的命名，除非這是資料庫的欄位名稱或是 Class（以及 React component），click_count 這種也不及格，其實我到現在還是不知道為什麼有人可以做到 90% 都是合格的，但有一兩個變數卻是不守規則的，這樣其實還是不合格喔
命名規則不統一，同上，有些地方用 camel case 有些用 snake case，一致性很重要，除非逼不得已，否則不能破壞一制性
後端
面試官不會去管這是不是作業，對它來說只要是你附在履歷上的東西，就是你願意接受他審核的東西。再者，有些面試官會很認真找到你的 GitHub 直接看你作業，所以你是逃不過的。

就算你是面前端的職缺，只要面試官有看到你後端的 code 並看到有錯誤，一樣是扣分，因為都是你寫出來的 code

後端一旦出現這幾種狀況，也是大扣分，有些看到直接死當

密碼存明碼沒用 hash，直接掰掰，代表你後端基礎不及格，請愛用 bcrypt
敏感資訊放在 Git 裡也不及格，代表資安意識不足，敏感資訊包含：資料庫帳號密碼、各種 secret key，包含 express session 用的那個，這些資訊請愛用環境變數帶進來，只要看到寫在 code 裡就是不合格，已經寫在 code 裡想要根除的話，可參考這篇：https://mtr04-note.coderbridge.io/2020/08/09/about-git-deletefile/
寫出有 SQL injection 的程式碼，直接掰掰
權限管理沒做好，扣分，基本資安知識不足
CSRF 不太確定會不會看，但能做還是盡量做，至少拿來驗證身份的 Cookie 主動設個 Lax
前端
前端部分主要是在講 React，因為你最後放履歷的東西可能只有 React 的作品會吸引人，除非你有額外加強，否則請盡量不要把五子棋、todo list 或是部落格這些作業放上去，作業是練習用的，放在履歷上只會顯得陽春。請自己加強功能或是額外做 project，才能比較吸引面試官的注意

在寫 React 時那些性能優化相關的 hook 例如：useMemo, useCallback 或是跟 PureComponent 很像的 memo 等等，絕大多數面試官都會希望在 code 裡看到，覺得這樣性能會比較好（減少不必要的 re-render）

這部分其實我有別的看法，但因為大部分面試官都抱持著不同的想法，你們如果要解釋的話可能也沒辦法解釋得太好，因此還是建議大家能做的地方盡量做，可以減少不必要的 render 就盡量減少，總而言之就是把那些 useMemo, useCallback 跟 memo 加上去。