重點在部屬
Q : 想請問 AWS 使用彈性 ip 位址的時機？

Q1 : 老師可以講一下物件導向的多型性跟五大原則（單一職責原則，開放封閉原則，里氏替換原則，依賴倒置原則，介面隔離原則）嗎，還有目前了解這些的必要性

A1 : 比較偏教科書，20、24週會複習。
單一職責 : 一個函式負責一個功能，所有功能混在一起超地獄不好維護
開放封閉 : 該開放要開放、該封閉要封閉，有些 JS 沒有

class A {
  private domain; // 不想讓別人給的呼叫 private
  public url; // 可以讓別人改的
  protected setXX () { // 繼承 A 的話，可以改他
  }
}

Q2 : 物件導向跟程式導向的區別？方便舉一些簡單例子嗎 ?
A2 : 功能相同，但不同風格

之前都使用 mySQLi 跟資料庫串聯，但其實還有一個叫做 PDO。PDO　利用物件導向特性在封裝層，所以她不只可以支援 MySQL 也可以連到其他資料庫。但因為每個資料庫語法不同，未必能一比一兌換。除非寫 Angular 不然很少會碰到物件導向。

// function 寫法會有很多獨立的小 function
function caculator(input) {
  const commands = parseInput()
  const result = handleCommand(commands)
  return result
}

// 物件導向，操作主體會變成 class instance 的東西，以這邊來說就是 cal
const cal = new Calculator(input)
cal.parseInput()
cal.handleCommand()
console.log(cal.getResult())
Class Calculator {
  constructor(input) {
    this.input = input
  }
  parseInput() {
  }

  handleCommand() {
  }
}

Q3 : 系統設計是不是算偏後端？這樣是不是有一定經驗工程師其實大概都有全端的能力？

A3 : 對，超後端 ! 第二個未必，就像我們也頂多只到系統設計的長相，但寫不出來。

Q4 : 平常下載 node 上面的套件都不用花錢，想裝幾個就裝幾個，想問 node 套件的開發者怎麼賺錢？還是只能賺個名聲？

A4 : 開源套件都沒有在賺錢，只是興趣。所以多半只能兼職維護。有些會有大公司贊助。

Q5 : 當引入不同的 CSS ，e.g. normalize.css、bootstrap與寫在 style 標籤裡面的 CSS，而造成樣式蓋來蓋去，這樣比較好的解決做法是什麼呢？

A5 :

1. normalize.css 引入的直接蓋上去就好了，他用標籤，我們通常不會對標籤寫 CSS。所以將 normalize.css 放第一個，下面的就會將他蓋掉 !
2. 寫在 Style 裡面，其實不太應該，應該用 css 寫。這樣就可以解決優先順序的問題
3. bootstrap 是特例。用 bootstrap 就不要取 class 名稱，因為他們倆個不太相容。

<div class= "d-flex">
display : flex
怎麼蓋都蓋不掉

因為它使用了 utility css/ functional css
有點像將一個 classname 對應到一個規則

參照閱讀：
邪魔歪道還是苦口良藥？Functional CSS 經驗分享

Q6 : 既然都說盡量使用 https，那 http 目前使用的場合為何？

A6 : 除非沒辦法拿到 https 的憑證或懶得拿憑證。因為申請要錢。基本上都是 https。

Q7 : 如果對後端有興趣，有什麼建議的學習路徑嗎？

A7 : 問後端的助教。將課程學完、Mysql、部屬、系統架構弄熟。

第四期官網的問題(css)

Q8 : 使用 @mixin 時，看到 @include font-size(16px)、@include font-size(24px)，為什麼不直接使用 font-size:16px or fon-size:24px 呢？

A8 : @include font-size(16px)、@include font-size(24px) 的寫法背後實作可以改，可以處理 RWD 的東西。處理 RWD 比較好的做法是用 rem。

Q9 : 從 main.scss 可以發現全部樣式都是用 @import 的方法引入進來，大部分大型專案的實作也是如此嗎？

A9 : 不太確定，因為使用 react，react 裡面 css 寫法又不太一樣。但看之前學姊的實作應該是

Q10 : AWS 的security group和 Linux 內建的 ufw 差在哪裡? 如果主機同時用這兩個，算是雙層防火牆嗎?

A10 : 算，但有一個防火牆就夠了。最大差別一個是 AWS 幫忙擋(VPS 廠商提供的防火牆)，一個是 LINUX 幫忙擋(作業系統的防火牆)。因為兩個規則都設一樣，所以不會比較安全。

CSRF

先備知識：對 cookie 理解

要拿 cookie 只能在同個 domain 拿 cookie、cookie 設在哪跟我從哪邊發 request 沒有關係，而是和哪個網址回 set-cookie 的 response 有關，發 request 也是

a.com
fetch('https://b.com')

https://b.com
set-cookie: abc=1 domain: b.com

angela.tw send request to  example.com
我會帶上的 cookie 是和 example.com 相關的

csrf 概念

進來 A 網址，卻在其他網站用我的身分在 A 網址操作，這就是 CSRF

• 成立前提 : 要在 A 網站發 request 給 B 網站，要將 cookie 一起帶上去

假設我有一個網站

example.com
cookie : PHPSESSID = abc123

POST 到這裡就可以新增文章
POST example.com/new_article.php
title=a&content=b

今天又有另一個網站

angela.tw/index.html

<form> action="https://example.com/new_article.php" method="POST">
  <input type="hidden" name="title" value="hack">
  <input type="hidden" name="content" value="hack">
  <input type="submit">
</form>

當使用者一進來這個網站，就將 form 給 submit
<script>
  document.querySelector('form').submit()
</script>

今天作為 user-01 在 example.com 登入，接著到了 angela.tw/index.html然後表單被觸發。

1. 瀏覽器從 angela.tw/index.html 送出 request 到 https://example.com/new_article.php，有了表單裡面的內容
2. 瀏覽器找這個網域 https://example.com 的 cookie。他不管你在哪個網域，他只管你現在要送去哪裡
3. 因此，將 example.com 的 cookie cookie : PHPSESSID = abc123 一起帶上去

Q11 : Client 端生成的 Double Submit Cookie，還是有點不懂何謂「改由 Client 端生成 csrf token」? 老師可以在講解一次 CSRF 的防範方法：Double Submit Cookie & SameSite cookie嗎？

A11 :

samesite

設置 cookie 可以設置一個屬性叫做 SameSite。加上這個屬性後，瀏覽器會檢視在哪個網站送 request 過來。

舉例：SameSite = strict

因為 example.com 與 angela.tw/index.html是不同的 site，所以他就不會送出 cookie。就不會有 csrf 攻擊

example.com => example.com/new_article.php，瀏覽器會把 cookie 帶上去，因為他們兩個同個網站

Double Submit Cookie

cookie 裡面 csrf token 與 body 裡面 csrf token 是否一樣，如果一樣表示從同個網站送來

example.com => example.com/new_article.php
送 request 前，先用 js 寫 cookie

csrf_token = 12345(一個亂數)，寫到 example.com

送 request 時除了 title=a&content=b 還要再加上 &csrf_token=12345

POST example.com/new_article.php
title=a&content=b&csrf_token=12345
cookie: PHPSESSID = abc123; csrf_token = 12345

因為我在 angela.tw，所以無法存取 example.com 的 cookie，所以我就不知道 csrf_token 的值是多少

<form action="https://example.com/new_article.php" method="POST">
  <input type="hidden" name="title" value="hack">
  <input type="hidden" name="content" value="hack">
  <input type="hidden" name="csrf_token" value = "???">
  <input type="submit">
</form>

Q12 : 虛擬主機設定好後，把 conn.php 帳號密碼設定好，沒有多做其他設定，丟進去虛擬主機，就連上 mysql 了。想請問老師，會這樣是因為虛擬機的 3306 port 預設留給 mysql 用，然後 conn.php 在沒另外設定的情況下也是連 3306 port ，所以造成這個很自然地連上線的結果嗎？

A12 : 算是，很多服務都會有預設的 PORT。mySQL 預設的 PORT 是 3306。所以靠著預設，我都不用寫任何東西就可以連上。

Q13 : 密碼雜湊在實作上比較會偏向前端做還是後端做呢？

A13 : 後端。
永遠不要相信來自 client 端的東西，如果雜湊由前端做，因為我相信使用者的資料，使用者也可以送自己想要的資料進去，所以資料庫的資料就會變得很怪(有些有雜湊過有些沒有)。

前後端都做沒什麼意義，因為後端還要再檢查一次。

Q14 : 業界部屬系統大部分都是使用Ubuntu 嗎 ?

A14 : 大部分都是 LINUX 相關的系統，Ubuntu 算滿多人使用

Q15 : 老師是以「要了解套件或是語法的歷史」，所以才從 css 教起，之後才用 sass/scss 嗎？像是 jQuery ，如果現在很少用到，為什麼還要學 jQuery 呢？

A15 : 對! jQuery 是歷史上很重要工具且很好用(比原生方便超多)，比較舊的專案還是用 jQuery 在寫

Q16 : 看到有上期學長姐是跳過某些週數，然後沒做final project(都是放作業為主）最後求職的結果也很不錯，想問老師在做final project vs 加強react js 跟觀念題，這兩個方向選擇上有什麼想法 ?

A16 : 以 final project 優先，可以並行看看。如果真的沒時間，加強作業。作業優化也是很不錯 final project 的主題

Q17 : jQuery逐漸被廢棄的原因是因為前端框架的出現嗎？現在課程進度的程度做 side project 老師會建議用jQ 還是原生

A17 : 對!依照需求決定要用哪個。

Q18 : get, post 的差別能夠再詳細說一次嗎 ?

A18 :

1. 語意不同：get 拿東西、post 送東西
2. 隱密性不同：get 紀錄會留在歷史紀錄上，因為用 url 訪問；post 放在 request body 裡面，因此不會被紀錄下來
3. 均有長度限制：post 帶比較多東西

Q19 : npx 跟 npm 的差別 ?

A19 : 完全不一樣!
npm 之前講過不多講，npx 幫你執行指令。

npm install webpack

打 webpack 不理我，因為他裝在資料夾底下，並非 global 指令

方法一

package.json 裡 
scripts: {
  "build": "webpack"
}

npm run build (npm 會去找 webpack 是否存在於 node_modules/bin/webpack)

npx webpack 就是幫我去找 node_modules/bin 裡面有沒有 webpack 可以用

Q20 : 不太懂 W14 自我檢討提到的虛擬空間的意思，請問是甚麼意思

A20 : 只是一個 FTP 空間讓我將檔案放到上面。沒有甚麼可以讓我設定的地方，不能決定要裝甚麼，也不能 SSH 連上去那個主機。

Q21 : 老師如果 w14 想弄 https 的話，可以簡單的提示一下有哪些需要注意的地方嗎？

A21 : CloudFlare ! 不用這個自己用會比較辛苦一點。

Q22 : 在安裝一些套件的時候安裝的很混亂，要怎麼檢視自己成功安裝了哪些呢？(例如 sass webpack..等)安裝一陣子都會忘記有安裝什麼...

A22 : global 要查一下，不是 global 的話可以看 node module

Q23 : 為什麼不能用 GUI 來操作租來的遠端主機 ？都要用 cli 打指令？

A23 : 因為有些東西沒有視窗介面，要特別裝。就算是 GUI，也是去遠端主機開 CLI。一定有些東西要用 CLI，不如都用 CLI。

Q24 : 甚麼是彈性 IP ?

A24 : 推測類似動態 IP，不是很確定。動態 IP 會需要的場合是爬蟲，爬蟲會擋單一 IP 不能爬太多資料，但是動態 IP，IP 就會換就可以從不同地方爬更多資料。

Q25 : 我今天設定，然後 AWS 說 ip range 全開很危險 ?

A25 : 是滿危險的，任何人都可以 TRY。但東西有保護好就還好，例如、資料庫密碼很強，或是關掉不要全開，透過 ssh 的方式連進來。

Q26 : 如何確認雲主機防火牆問題？

A26 : 先確定是不是防火牆擋住，用 telnet 確定 port 有無開啟，或手動檢查主機的防火牆(如果有開)、security group

Q27 : 有公司會全使用 AWS 服務嗎（含DB等等）？或全雲端服務

A27 : 有，很多。