# Build Web
## fronted(描述網站如何顯示)
### HTML
- 主要分為兩個部分:
-- head
不會顯示在網頁內容裡，通常可以表示一些網站顯示以外的內容
-- body
有各種顯示的方式與顏色，也能夠插入圖片與網址，也有一些插入的method可與後端溝通的功能(像輸入帳號密碼)
### CSS
可以與HTML結合，用來處理HTML的element如何顯示
### JavaScript
可以在網站中做一些邏輯與計算，可以像一般的程式相同，可以宣告變數、function、class等
### React
- 是一種javascript的東西，可以用來製作使用者介面

- 可以利用jsx來做xss的保護
- 利用state的概念，當我改變一個state時，與其相關的所有object都會一起改變
- effect則是state改變時，可以呼叫function
- Props是唯獨的，其是可以傳遞各種事情
- state與prop是互相關聯的，prop是可以操控各種state，而在設計state時，我們只能呼叫到我們上面的state，在設計時需要注意

## backend(作為前端與資料庫的中繼站)
### 發送請求
瀏覽器會向web server發出請求，上面會含有method(請求)，網站路徑和採用的協定，web server收到後會透過後端的邏輯運算從資料庫拿取資料回傳
#### 回傳
- 200-299 成功
- 300-399 重新導向
- 400-499 client問題
- 500-599 伺服器端問題

### API
將實內容作包裝起來，使用者只要知道需要的參數合會給出的結果，讓前端的人更好利用後端所做的程式來溝通
- HTTP Method -GET:常表示取得資料
--example:[GET] /v1/me
- HTTP Method -POST:常表示建立資料
--example:[POST] /v1/users
- -PUT:更新或建立資料
- PATCH:更新資料(與PUT類似)
- DELETE:刪除資料
## 資料庫(DATABASE)
現在很少使用字串來搜尋資料，因為很容易被注入SQL INJECTION
## Session and Cookie
### 概念
為了讓使用者方便，當使用者登入網站後，伺服器端會產生一個cookie(亂數)並且也送同樣的cookie給使用者，伺服器也會記住使用者已經登入，之後使用者的請求中瀏覽器會把cookie加進來，這樣伺服器就能知道是誰，且是否登入。
### 限制
不同的網站不能記取別人的cookie
### 實作
cookie一般都會存在本地端的瀏覽器中
### 危險
CSRF攻擊，透過使用Cookie來欺騙網站(後面會詳說)，可裡用cookie token來防範