# Part3 探究原理 Week11 - Week20

:::spoiler 學習現代前端開發工具
熟悉 jQuery
熟悉 Bootstrap
熟悉 Gulp
熟悉 Webpack
熟悉 CSS 預處理器
:::

:::spoiler 學習建置 Server 及部署專案
知道虛擬空間、虛擬主機以及實體主機的差別
知道如何設定網域（A、CNAME）
知道如何用 SSH 遠端連線到自己的主機
知道如何在伺服器安裝 Apache, PHP 與 MySQL
知道如何購買雲端主機
:::

:::spoiler 學習效能優化相關議題
知道 HTTP Cache header 的使用
知道如何壓縮圖片大小以及各種格式的區別
知道透過 minify 或是 uglify 減少檔案大小
知道減少不必要的程式碼
知道延遲載入（lazy loading）
:::

:::spoiler 理解常見資訊安全問題
熟悉 SQL Injection 原理及防禦方法
熟悉 XSS 原理及防禦方法
熟悉 CSRF 原理及防禦方法
知道雜湊與加密的區別
知道密碼為什麼要經過雜湊，知道什麼是加鹽
:::

:::spoiler 理解 JavaScript 語言核心
知道 Event Loop 的運作方式
知道什麼是作用域（Scope）
知道 Hoisting 的原理為何
知道 Closure（閉包）是什麼
知道大部分情況下 this 的值是什麼
:::

## [Week11（06/21 ~ 06/27）：資訊安全](https://hackmd.io/RyMRMyYpRLaPTZRh0dxusA?view)

- 指定教材
- [x] [BE101] 用 PHP 與 MySQL 學習後端基礎
- [x] [CS101] 初心者的計概與 coding 火球術
- [x] 可參考：[程式導師實驗計畫第二期：Week6-2：資訊安全](https://www.youtube.com/watch?v=HGjjxKsCgr0)
- 文章
- [x] 讓我們來談談 CSRF
- 作業
- [x] HW11 作業
- [ ] 挑戰題們 ( 只做了串 CK editor 5 )
- 自我檢測
- [x] P1 你知道什麼是雜湊（Hash function）
- [x] P1 你知道什麼是加密（Encryption）
- [x] P1 你知道雜湊與加密的差別
- [x] P1 你知道什麼是 SQL Injection 以及如何防範
- [x] P1 你知道什麼是 XSS 以及如何防範
- [x] P1 你知道為什麼儘管前端做了驗證，後端還是要再做一次驗證
- [x] P2 你知道什麼是 CSRF 以及如何防範
## [Week12（06/28 ~ 07/04）：前後端整合](https://hackmd.io/OfEELlmXTsKmJ4uII8vSpA?view)

- 指定教材
- [x] [BE101] 裡面「真正的實戰：留言板 - API 篇」
- [x] [FE201] 前端中階：那些前端會用到的工具們
- [x] 補充教學影片（在 MTR05 裡面）
- 作業
- [x] HW12 作業
- 自我檢測
- [x] P1 你知道什麼是 SPA
- [x] P1 你知道怎麼樣用 PHP 自己寫出 API
- [x] P1 你知道如何在前端與自己開的 API 串接
- [x] P1 你知道在 server 與在 client render 的差別
- [x] P1 你知道 jQuery 是做什麼的
- [x] P1 你知道 jQuery 與 vanilla js 的差別
- [x] P1 你知道什麼是 Bootstrap
- [x] P2 你知道 Bootstrap 原理及如何應用
## [Week13（07/05 ~ 07/11）：現代前端工具](https://hackmd.io/V8tzkeuLSAeuwZkab3nEFg?view)
- 延續上週
- [x] CSS 預處理器
- [x] Babel
- [x] Gulp
- [x] Webpack
- 額外補充
- [x] 什麼是 Promise？
- [x] 什麼是 Fetch？
- [x] CSS Selector 權重的計算方式
- [x] CSS Sprites 與 Data URI
- 指定教材
- [x] [FE201] 前端中階：那些前端會用到的工具們
- 文章
- [x] webpack 新手教學之淺談模組化與 snowpack。
- [x] 簡易 Regular Expression 入門指南。
其他的補充
- [x] [Fetch 與 Promise 補充系列（一）：初探 Fetch](https://www.youtube.com/watch?v=_8cLWMAQe3A)
- [x] [Fetch 與 Promise 補充系列（二）：fetch 的 POST 與錯誤處理](https://www.youtube.com/watch?v=Ovv9tPhiW_0)
- [x] [Fetch 與 Promise 補充系列（三）：fetch 的使用注意事項](https://www.youtube.com/watch?v=5A9ogWY7J7w)
- [x] [Fetch 與 Promise 補充系列（四）：淺談 Promise](https://www.youtube.com/watch?v=w-gnunN1Ra4)
- [x] [Fetch 與 Promise 補充系列（五）：async 與 await](https://www.youtube.com/watch?v=OEWoF9zzGAU)
- 作業
- [x] HW13 作業
- 自我檢測
- [x] P1 你知道 webpack 的目的以及原理
- [x] P1 你熟悉如何使用 webpack 進行模組化開發
- [x] P1 你知道如何使用 Promise
- [x] P2 你知道如何使用 fetch
- [x] P2 你知道 gulp 的目的以及原理
- [x] P2 你知道 CSS Sprites 與 Data URI 的優缺點
- [x] P2 你知道什麼是 uglify 與 minify
- [ ] P3 你熟悉如何使用 gulp 建構自動化工作流程
- [x] P3 你知道 CSS 優化的一些小技巧

## [Week14（07/12 ~ 07/18）：伺服器與網站部署](https://hackmd.io/7q5RcUZsQEOr6Gmv2LX3PQ?view)
- 指定教材
- [x] 直接去買主機（AWS、Digital Ocean、GCP、Linode）
- [x] 找助教索取 [gandi](https://www.gandi.net/en-US) 網域的折扣碼，可用來註冊 .tw 的域名。
- [x] 可參考 : [部署 AWS EC2 遠端主機 + Ubuntu LAMP 環境 + phpmyadmin](https://github.com/Lidemy/mentor-program-2nd-yuchun33/issues/15)
- [x] 可參考 : [一小時完成 VPS (Virtual Private Server) 部署](https://github.com/Lidemy/mentor-program-2nd-futianshen/issues/21)
- [x] 可參考 : [如何遠端連接虛擬主機上的 mySQL 資料庫 ？](https://github.com/Lidemy/mentor-program-2nd-futianshen/issues/33)
- [x] 可參考 : [[紀錄] 部屬 AWS EC2 雲端主機 + LAMP Server + phpMyAdmin](https://mtr04-note.coderbridge.io/2020/09/15/-%E7%B4%80%E9%8C%84-%08-%E9%83%A8%E5%B1%AC-aws-ec2-%E9%9B%B2%E7%AB%AF%E4%B8%BB%E6%A9%9F-/)
- [x] 可參考 : [AWS EC2 佈署網站：卡關記錄](https://nicolakacha.coderbridge.io/2020/09/16/launch-website/)
- 專有名詞 ( P2, P3 )
- [x] ACID
- [x] Transaction
- [x] View
- [x] Stored procedure 等等
- [x] 可參考 : [程式導師實驗計畫：Lesson 8-2 之資料庫](https://www.youtube.com/watch?v=iDG8Ha2uZPs)
- [x] 可參考 : [程式導師實驗計畫第二期：Week8-1 後端基礎（下）](https://www.youtube.com/watch?v=QiCm9JE43KM)
- [x] 可參考 : [CS75 (Summer 2012) Lecture 9 Scalability Harvard Web Development David Malan](https://www.youtube.com/watch?v=-W9F__D3oY4)
- 作業
- [x] HW14 作業
- [ ] 挑戰題們
- 自我檢測
- [x] P1 你知道虛擬空間、虛擬主機以及實體主機的差別
- [x] P1 你知道什麼是網域（Domain）
- [x] P1 你知道如何設定網域（A、CNAME）
- [x] P1 你知道如何用 SSH 遠端連線到自己的主機
- [x] P1 你知道如何部署應用程式
- [x] P2 你知道什麼是 No SQL
- [x] P2 你知道什麼是 Transaction 與 lock
- [x] P2 你知道資料庫的 ACID 是什麼
- [x] P3 你知道什麼是資料庫的 View 以及使用時機
- [x] P3 你知道什麼是 Stored procedure 以及如何使用
- [x] P3 你知道資料庫的 Trigger 以及使用時機
## [Week15（07/19 ~ 07/25）：複習週](https://hackmd.io/X2NEPvkxRmWxvo2-3EYnMg?view)
- 複習
- [x] Session 與 Cookie 的差異
- [x] 資訊安全（Hashing、SQL Injection、XSS）
- [x] jQuery
- [x] Bootstrap
- [x] CSS 預處理器、Webpack
- [x] 部署
- 測驗
- [x] [網站前後端開發基礎測試](https://github.com/Lidemy/mentor-program-3rd/issues/5)
- 文章
- [x] [Inside look at modern web browser (part 1)](https://developers.google.com/web/updates/2018/09/inside-browser-part1)
- [x] [中譯版](https://juejin.cn/post/6844903679389073415)
- [x] 導讀 : [瀏覽器運作導讀](https://www.youtube.com/watch?v=5iaNYpVedIU&t=2432s)
- 作業
- [x] HW15 作業

## [Week16（07/26 ~ 08/01）：JavaScript 核心與物件導向](https://hackmd.io/cn_EYWaqT9a6vaYStCgh4Q?view)

- 指定教材
- [x] [JS201] 進階 JavaScript：那些你一直搞不懂的地方
- [x] [What the heck is the event loop anyway? | Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
- [x] [程式導師實驗計畫第二期：Week9-2 JavaScript 執行原理](https://www.youtube.com/watch?v=3s69FPDZGRk)
- 文章
- [x] 該來理解 JavaScript 的原型鍊了
- [x] 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？
- [x] 我知道你懂 hoisting，可是你了解到多深？
- [x] 所有的函式都是閉包：談 JS 中的作用域與 Closure
- [x] 淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂
- [x] JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！
- [x] 覺得 JavaScript function 很有趣的我是不是很奇怪
- 延伸
- [x] [程式導師實驗計畫第二期：Week5-2：物件導向程式設計](https://www.youtube.com/watch?v=nZhzLcV9eHI)
- [x] [Week5 物件導向（續）：繼承與 static](https://www.youtube.com/watch?v=k5TGAw7faNg)
- 作業
- [x] HW16 作業
- [x] 挑戰題們
- 自我檢測
- [x] P1 你知道 Event Loop 的運作方式
- [x] P1 你知道什麼是作用域（Scope）
- [x] P1 你知道 Hoisting（提升）是什麼
- [x] P1 你知道 Hoisting 的原理為何
- [x] P1 你知道 Closure（閉包）是什麼
- [x] P1 你能夠舉出一個運用 Closure 的例子
- [x] P1 你知道 Prototype 在 JavaScript 裡是什麼
- [x] P1 你知道大部分情況下 this 的值是什麼
- [x] P2 你知道物件導向的基本概念（類別、實體、繼承、封裝）
## [Week17（08/02 ~ 08/08）：現代後端開發（上）](https://hackmd.io/dKFCx-kdSOKRA6k4h-fKTQ?view)

- 指定教材
- [x] [BE201] Express 與 Sequelize
- 作業
- [x] 部署專案到免費的空間 [Heroku](https://www.heroku.com/) 或是自己的主機（nginx + PM2）。
- [x] HW17 作業
- [ ] 挑戰題們
- 自我檢測
- [x] P1 學習如何使用 Express 及其相關套件
- [x] P1 我理解為什麼會需要框架
- [x] P1 了解什麼是 ORM
- [x] P1 了解 ORM 的優缺點
- [x] P1 了解什麼是 N+1 problem
- [x] P1 我知道如何部署 Node.js 應用程式到 heroku
## [Week18（08/09 ~ 08/15）：現代後端開發（下）](https://hackmd.io/xBmAEoNUQf2JlbZBQ5Xa1w?view)

- 指定教材
- [x] [BE201] Express 與 Sequelize 全部看完
- 作業
- [ ] HW18 作業
- [ ] 挑戰題們
- 自我檢測
- [x] P1 我能夠從頭把一個網站獨立建起來
- [x] P1 我知道如何部署 Node.js 的網站到自己的主機
- [ ] P2 我知道如何使用 Nginx
- [x] P2 我知道如何使用 PM2
## [Week19（08/16 ~ 08/22）：產品開發流程](https://hackmd.io/NSa29dw6RBCo_eK6atgrsQ?view)

- 指定教材
- [x] [PD101] 淺談產品開發與工作流程
- 作業
- [x] HW19 作業
- [x] 規劃一下自己之後期末專案想要開發什麼樣的產品
- 自我檢測
- [x] P1 知道什麼是 Scrum
- [x] P1 知道 Scrum 中通常會有哪些元素
- [x] P1 知道什麼是 user story
## [Week20（08/23 ~ 08/29）：複習週](https://hackmd.io/EBkbwb67RVyGernxwX0gNA?view)
- 測驗
- [ ] 優化載入速度變快 : [Lazy Hackathon](https://lidemy.github.io/lazy-hackathon/)
> 原始碼在這裡：https://github.com/Lidemy/lazy-hackathon （特別感謝 @yakim-shu 同學製作這個小測驗）
- [ ] 可參考 : [web.dev](https://web.dev/) & [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884)
- 作業
- [ ] HW20 作業