Day 148

Day 148 (Week22), 2021/09/06 (Monday)

學習時數：8.5 hr

Done

[done] w21 React
[done] Heroku 部署過程紀錄
#### To Do @ this week
[ ] w21 React iT 邦幫忙鐵人賽：從 Hooks 開始，讓你的網頁 React 起來系列 Day01 ~ Day 05
[ ] w21 React [FE302]
[done] w17 Heroku 部署

學習心得紀錄

Objective 客觀

累積好幾天寫的w21 React 學習筆記

今天看了 React 官方文件講 react element，一旦被建立起的 element，就是 immutable，不可以改變，那這樣要怎麼更新改過的資料後的畫面，就是靠 ReactDOM.render()，後來是提到 setInterval 設定時間固定重新 render 頁面，然後再帶到 stateful component 的概念。
另外還從 [FE302] 再次複習了寫在 React 的 CSS 可以使用哪些方法。這幾天在學 React 一直在熟悉 ES6 的解構賦值，還有 React 的 Component、element、命名慣例等等的概念。
但後來實際想想，還是需要實戰演練比較快上手，等把 w17 的部署及繳交作業完成，要來跟著一起做 [FE302] 的待辦清單。

Heroku 部署

今天猛然想起擱了好幾天，又或者是擱了一週的部署，因為寫好 w17 作業大概是上週的事情，在部署時碰到了障礙，就擱置了幾天。
今日撿起來，把 Heroku 的官方文件和 [BE201] 打開，一步一步的重新來過，從 clone node-js-getting-started 開始做起，過程如 Coderbridge 過程紀錄，邊實作邊紀錄，前幾個步驟是後來才回頭寫的，不知道有沒有實作上的問題，明天再來部署第十七週的第二個作業抽獎系統，就可以知道有沒有問題了。

感受

真是太感動了，卡了應該有一天半的 Heroku 部署，終於今天被我部署好了！不知道怎形容 Heroku 的官方文件，有時候我是交叉比對兩個教學指南，才成功向下進行，中間也有遇到在 heroku logs -t 的一些困難，從原本在頁面顯示 internal error，到頁面顯示 heroku logs -t，是多麼感人QQ，雖然還是有錯！但是至少進步一點點，後面就開始努力解讀 heroku logs -t 的錯誤訊息提示，過程中有發現在 ./index.js 路由裡，有寫錯的 modules 語法，經過查詢 stackoverflow 之後慢慢解決這些有錯的語法，之後就開心的來建立 heroku 上的 add.on 的 DB 了！
從艱辛的 heroku 部署裡，學到了怎麼解讀有點難懂的 heroku logs -t！其實第一天卡了一整天，我就是有點急到沒有好好認真仔細看語法錯誤，然後去查資料，所以頁面只出現了 internal error，連到 heroku 連都連不上QQ。