Lidemy 程式導師計畫第四期 - 每週學習筆記

###### tags: `Lidemy` `Coding` # Lidemy 程式導師計畫第四期 - 每週學習筆記本篇是關於 Lidemy 程式導師實驗計畫第四期的學習筆記清單。主要使用 [HackMD 平台](https://hackmd.io/@Heidi-Liu/note-lidemy)記錄，同時也會將筆記同步至 [Github](https://github.com/heidiliu2020/this-is-codediary) 與[個人部落格](https://heidiliu2020.github.io/)。 This is Heidi's codediary. About Lidemy / mentor-program-4th started from June 2020. All of these were written on HackMD, and also synchronized on GitHub page. Week1（06/12 ~ 06/21）：暖身週 --- - [[week 1] Command Line 入門 & 基本指令](https://hackmd.io/@Heidi-Liu/note-cli) - [[week 1] 版本控制 - Git 概念＆基本指令](https://hackmd.io/@Heidi-Liu/note-git) - [[week 1] 版本控制 - Git 進階指令 & GitHub](https://hackmd.io/@Heidi-Liu/note-git-and-github) - [[HW] 第一週（06/12 ~ 06/21）：暖身週](https://hackmd.io/@Heidi-Liu/B1vc-MHa8) - [Git 版本控制：如何進行多人協作 & 同步分支](https://hackmd.io/@Heidi-Liu/git-workflow) Week2（06/22 ~ 06/28）：程式基礎（上） --- - [[week 2] JavaScript 基礎 - 基本語法、值的型別、變數、迴圈、函數](https://hackmd.io/@Heidi-Liu/note-js101) - [[week 2] JavaScript - 綜合題目練習 Lv1](https://hackmd.io/@Heidi-Liu/HJT2-CVRL) - [[week 2] 先別急著寫 leetcode - 虛擬碼、Debugger、解題技巧](https://hackmd.io/@Heidi-Liu/note-alg101) - [[HW] 第二週（06/22 ~ 06/28）：程式基礎（上）](https://hackmd.io/@Heidi-Liu/BkOHuy80I) Week3（06/29 ~ 07/05）：程式基礎（下） --- - [[week 3] JavaScript：ES6 語法 + npm + Jest](https://hackmd.io/@Heidi-Liu/note-js102-es6) - [[week 3] 設定 eslint：用來檢查語法的工具](https://hackmd.io/@Heidi-Liu/note-eslint) Week4（07/06 ~ 07/12）：網路基礎 --- - [[week 4] 網路基礎概論 - HTTP 協定、TCP/IP、API](https://hackmd.io/@Heidi-Liu/note-net101) Week5（07/13 ~ 07/19）：複習週 --- - [[week 5] 複習週](https://hackmd.io/@Heidi-Liu/Bk8OGlnQw) Week6（07/20 ~ 07/26）：前端基礎 HTML 與 CSS --- - [[week 6] HTML - 認識基礎標籤](https://hackmd.io/@Heidi-Liu/note-fe101-html) - [[week 6] CSS - 認識基礎標籤 & 屬性](https://hackmd.io/@Heidi-Liu/note-fe101-css) Week7（07/27 ~ 08/02）：前端基礎 JavaScript --- - [[week 7] DOM 事件傳遞機制：捕獲與冒泡、事件代理](https://hackmd.io/@Heidi-Liu/note-fe201-dom) - [[week 7] DOM 介面、瀏覽器事件處理](https://hackmd.io/@Heidi-Liu/note-fe102-dom-and-event) - [【學習筆記】利用 JavaScript 實作簡易 Todo List](https://hackmd.io/@Heidi-Liu/note-js102-todolist) Week8（08/03 ~ 08/09）：前端基礎串 API --- - [[week 8] 傳送資料的方式 & 瀏覽器的限制](https://hackmd.io/@Heidi-Liu/note-net101) - [week8 作業 - Ajax、JSONP、API](https://hackmd.io/@Heidi-Liu/r1uMolkfD) Week9（08/10 ~ 08/16）：後端基礎 PHP 與 MySQL --- - [[week 9] 後端基礎 - PHP 語法、資料庫 MySQL](https://hackmd.io/@Heidi-Liu/note-be101-php-and-mysql) - [[week 9] 利用 PHP 實作留言板 - 初階實作篇](https://hackmd.io/@Heidi-Liu/note-be101-php) Week10（08/17 ~ 08/23）：複習週 --- Week11（08/24 ~ 08/30）：資訊安全 --- - [[week 11] 利用 PHP 實作留言板 - 新增功能篇](https://hackmd.io/@Heidi-Liu/note-be101-php-update) - [[week 11] 利用 PHP 實作陽春部落格](https://hackmd.io/@Heidi-Liu/note-board-php) - [[week 11] 資訊安全 - 雜湊與加密 & 常見攻擊：SQL Injection、XSS](https://hackmd.io/@Heidi-Liu/note-be101-php-security) Week12（08/31 ~ 09/06）：前後端整合 --- - [[week 12] 利用 PHP 實作留言板 - API 篇](https://hackmd.io/@Heidi-Liu/note-be101-php-api) - [[week 12] 結合前端與後端功能實作 Todo List](https://hackmd.io/@Heidi-Liu/note-be101-php-todolist) - [[week 12] 前端工具之一 - jQuery 與 Bootstrap](https://hackmd.io/@Heidi-Liu/note-fe201-jquery-and-bootstrap) Week13（09/07 ~ 09/13）：現代前端工具 --- - [[week 13] 前端工具之二 - CSS 預處理器、Babel](https://hackmd.io/@Heidi-Liu/note-fe201-sass-and-babel) - [[week 13] 前端工具之三 - gulp、webpack](https://hackmd.io/@Heidi-Liu/note-fe201-gulp-and-webpack) - [[week 13] MTR04 - 實作留言版 plugin](https://hackmd.io/@Heidi-Liu/note-board-plugin) - [[week 13] Fetch & Promise 補充](https://hackmd.io/@Heidi-Liu/note-fetch-and-promise) - [[week 13] 前端進階 - 如何優化執行 CSS 效能](https://hackmd.io/@Heidi-Liu/note-css-optimize) Week14（09/14 ~ 09/20）：伺服器與網站部署 --- - [[week 14] 後端基礎：資料庫 & 系統設計](https://hackmd.io/@Heidi-Liu/note-database-and-system-design) - [[week 14] 網站部署 - 設定 AWS EC2 遠端主機 + Ubuntu LAMP 環境 + phpMyAdmin](https://hackmd.io/@Heidi-Liu/note-website-deployment) Week15（09/21 ~ 09/27）：複習週 --- - [【中場心得】半年過去了，我仍在學習程式的路上（上篇）](https://hackmd.io/@Heidi-Liu/about-learing-part1) - [【中場心得】半年過去了，我仍在學習程式的路上（下篇）](https://hackmd.io/@Heidi-Liu/about-learing-part2) Week16（09/28 ~ 10/04）：JavaScript 核心與物件導向 --- - [[week 16] JavaScript 進階 - 關於變數與資料型態](https://hackmd.io/@Heidi-Liu/note-js201-data-type) - [[week 16] JavaScript 進階 - 初探 Hoisting & Execution Context](https://hackmd.io/@Heidi-Liu/note-js201-hoisting) - [[week 16] 淺談 JavaScript：同步與非同步 & Callback Function & Event Loop](https://hackmd.io/@Heidi-Liu/note-javascript-callback) - [[week 16] JavaScript 進階 - 什麼是閉包？探討 Closure & Scope Chain](https://hackmd.io/@Heidi-Liu/note-js201-closure) - [[week 16] JavaScript 進階 - 物件導向 & Prototype](https://hackmd.io/@Heidi-Liu/note-js201-oop-prototype) - [[week 16] JavaScript 進階 - What is this？](https://hackmd.io/@Heidi-Liu/note-js201-this) - [[week 16] JavaScript 進階 - 作業練習](https://hackmd.io/@Heidi-Liu/HJdnyWQYD) Week17（10/05 ~ 10/11）：現代後端開發（上） --- - [[week 17] 後端中階 - 使用 Node.js + Express 框架建立一個靜態網頁](https://hackmd.io/@Heidi-Liu/note-be201-express-node) - [[week 17] 後端中階 - Express 中不可或缺的拼圖：淺談 Middleware](https://hackmd.io/@Heidi-Liu/note-be201-express-middleware) - [[week 17] 後端中階 - Express 實戰：簡易會員註冊系統 & 留言板](https://hackmd.io/@Heidi-Liu/note-be201-express-practice) - [[week 17] 後端中階 - 淺談 Sequelize：使用 ORM 框架串接資料庫](https://hackmd.io/@Heidi-Liu/note-be201-sequelize) Week18（10/12 ~ 10/18）：現代後端開發（下） --- Loading... Week19（10/19 ~ 10/25）：產品開發流程 --- - [[week 19] 淺談產品開發與工作流程](https://hackmd.io/@Heidi-Liu/note-pd101) Week20（10/26 ~ 11/01）：複習週 --- Loading... Week21（11/02 ~ 11/08）：前端框架（一） --- - [[week 21] 前端框架 - 先別急著學 React](https://hackmd.io/@Heidi-Liu/note-fe302-review) - [[week 21] 初探 React：Component、JSX 語法、環境建置](https://hackmd.io/@Heidi-Liu/note-fe302-component-jsx) - [[week 21] React 基礎：style & 如何撰寫 CSS](https://hackmd.io/@Heidi-Liu/note-fe302-style) - [[week 21] React Hooks API：useState & 再戰 Todo List](https://hackmd.io/@Heidi-Liu/note-fe302-hooks-usestate) - [[week 21] React Hooks API：useEffect & 實作一個自己的鉤子](https://hackmd.io/@Heidi-Liu/note-fe302-hooks-useeffect) - [[week 21] React 性能優化：Virtual DOM & 如何避免 re-render](https://hackmd.io/@Heidi-Liu/virtual-dom) - [[week 21] 補充：Prettier 套件 - 自動整理程式碼格式](https://hackmd.io/@Heidi-Liu/note-prettier) - [[week 21] 補充：在 React 使用 PropTypes 進行型別檢查](https://hackmd.io/@Heidi-Liu/note-be302-proptypes) Week22（11/09 ~ 11/15）：前端框架（二） --- - [[week 22] 再探 React：Function component vs Class component](https://hackmd.io/@Heidi-Liu/note-fe302-class-component) - [[week 22] React：用 SPA 架構實作一個部落格（一）- Router](https://hackmd.io/@Heidi-Liu/note-fe302-react-router) - [[week 22] React：用 SPA 架構實作一個部落格（二）- 身分驗證](https://hackmd.io/@Heidi-Liu/note-fe302-react-blog-login) - [[week 22] React：用 SPA 架構實作一個部落格（三）- 淺談測試](https://hackmd.io/@Heidi-Liu/note-fe302-react-blog-test) - [[week 22] React：用 SPA 架構實作一個部落格（四）- 優化篇](https://hackmd.io/@Heidi-Liu/note-fe302-react-blog-optimization) Week23（11/16 ~ 11/22）：前端框架（三） --- Loading... Week24（11/23 ~ 11/29）：前端框架（四） --- Loading... Others --- - [[Week 0] Markdown 格式介紹](https://hackmd.io/@Heidi-Liu/note-markdown) - [交作業方式 & 同步課綱](https://hackmd.io/@Heidi-Liu/S12yU9D08) - [2020.6.20 JavaScript 會寫在哪裡？](https://hackmd.io/@Heidi-Liu/Bkp548jT8) - [常見重點整理 - 命名慣例 & 開發時注意事項](https://hackmd.io/@Heidi-Liu/note-common)