# 衝刺班 - 網站運作基本概念
### 什麼是 CORS，如何讓跨網域溝通變得可行？[月]
:::spoiler Answer
- 基於安全的理由，瀏覽器會以「同源政策」限制網頁對非同源網站進行資源的存取。而 CORS 是為了讓不同源的網站之間也能順利取得資料的協定規範。
- CORS 規範簡單來說就是， 讓 Server 端主動告知瀏覽器它允許哪些來源、請求，藉此通過瀏覽器的限制。
👨🏿💻：**那你可以解釋一下同源政策嗎？**
🙇🏿♀️：在跨領域請求時，瀏覽器會根據通訊協定、網域名稱、埠號做被判定，只要三者其中一個不相符，即為非同源，從目標資源取得的回應（Response）就會被攔截。
:::
---
### 什麼是 HTTP 通訊協定？[巧]
:::spoiler 定義
* **超文本傳輸協定 (HTTP, （HyperText Transfer Protocol）):**
與網路架構(七層架構)中的應用層，是一種用來傳輸超媒體文件 (像是HTML文件) 的應用層協定，網路兩端的程式定義好的溝通方式，明確定義要求和回應的文字訊息格式。
* **單向互動(One-Direction):**
標準客戶端—伺服器模式:客戶端連線以發送請求，然後等待接收回應
* **無狀態協定:**
*伺服器不會保存任兩個請求間的任何資料 (狀態)
[HTTP(MDN)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview)
[HTTP 教學](https://developer.mozilla.org/zh-TW/docs/Web/HTTP)
:::
---
### HTTPS 如何保護資料的安全？[巧]
:::spoiler 定義
https（HyperText Transfer Protocol Secure）「超文本傳輸安全協定」
加裝SSL協定作為「安全憑證」，在傳輸資料的過程中進行加密、保護，避免在傳輸過程中遭到有心人士的竊取。：
已經安裝SSL（Secure Sockets Layer）憑證的https網站，網址列前端會顯示一個小鎖頭；而未加裝SSL的網站則會被直接顯示為「不安全」。
* **加密：**
對交換的資料進行加密，防止資料遭到窺探。這意味著在使用者瀏覽網站的期間，任何人都無法「竊聽」他們的對話，也無法在多個網頁上追蹤他們的活動或竊取資訊。
* **資料完整性：**
在資料傳輸過程中，沒有人能夠以不被偵測到的方式竄改或破壞資料 (無論是有意或無意)。
* **驗證：**
證明使用者是與目標網站進行通訊。這可以防止使用者遭到中間人攻擊，同時建立使用者的信任感，進而促進其他商業利益。
https://developers.google.com/search/docs/advanced/security/https?hl=zh-tw
:::
---
### WebSocket 通訊協定和 HTTP 通訊協定的關鍵差異是？[Raiy]
:::spoiler 單向 vs 雙向 資料流
* HTTP是單向資料流互動(單向傳輸)，只能由client“主動”呼叫server，每次的請求之間沒有關聯，所以才需要cookie、session等能夠記錄狀態的token，來協助辨識使用者狀態。
* 不同於HTTP的單向，WebSocket屬於雙向資料流(雙向傳輸) ，除了 client 發請求給 server ， server 也可以主動回應數據給 client
* WebSocket 運作模式：由 client 發起 HTTP 請求建立連接（Handshaking），server 接受後就建立WebSocket 雙向連接。這個連接會一直保持"打開"的狀態，不僅是 一組 request + responese
:::success
WebSocket 的優勢
1. 表頭更省，可延用其他傳輸的上下文，傳遞類似數據時，提高壓縮率，降低 server 壓力
1. 即時性
1. 具有狀態
1. 對二進制更友好
:::
* 怎麼選擇？
HTTP：不需即時性、部落格、一般瀏覽性網站
WebSocket：社交、聊天、弹幕、線上教育、位置更新、實時報價
:::
### 什麼是快取？如何應用在你專案中？[若]
:::spoiler Answer
1. **什麼是快取？**
快取指的是：存取經常重複使用的資源，在下一次造訪同樣的網頁或應用程式時立即提取出來使用，讓瀏覽器不用再次向資料來源端發送請求，減少網路傳輸量以降低展示資源的延遲時間。
快取有很多種，在瀏覽器上，絕大部分的快取都來自 disk cache。
disk cache 顧名思義是儲存在硬碟上的快取，也叫 HTTP cache。他會嚴格根據 HTTP 標頭資訊中的各類欄位來判定哪些資源可以快取、哪些資源是仍然可用，哪些資源過期需要重新請求。
2. **如何應用在你專案中？**
快取有很多儲存的地方，其中一個是透過 JavaScript 操作 Web Storage API。我的專案是一個點餐網站，有個功能是讓使用者將選取的餐點放進購物車。我透過 Web Storage API 的 localStorage ，將資料以字串的形式存在使用者的瀏覽器端，以實現特定的快取資料的保存。
:::
---
### 什麼是 Cookie？試說明 Cookie 的運作方式？[宜]
:::spoiler **由伺服器送給使用者瀏覽器的資料**
# 什麼是 Cookie
Cookie是一段由伺服器送給使用者瀏覽器的資料。
## Cookie 的運作方式
伺服器把cookie送給使用者瀏覽器，瀏覽器會儲存它並且在瀏覽器下一次發送要求的時候將它送回原本送來的伺服器。基本上，它是用來區分兩個要求是來自同一個瀏覽器——例如保持使用者的登入狀態。因為HTTP通訊協定是無狀態的(stateless)，所以利用cookie的方式來記住有狀態的資訊。
## 實作
它多半是使用HTTP Request的Header區塊來實作。
## 用途
Cookies 主要用於三個目的：
1. **Session 管理：** 帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊
2. **個人化：** 使用者設定、佈景主題，以及其他設定
3. **追蹤：** 記錄並分析使用者行為
:::
---
### 什麼是 Web Storage？和 Cookie 的特性有什麼差別？[月]
:::spoiler Answer
Web Storage 和 Cookie 都是可以在 Client 端存取資料的技術，但 Cookie 可以存取的資料很小，且會夾帶在每一次發送給 Server 端的 Request，如果數量多會嚴重影響瀏覽器效能。而 Web Storage 就是 HTML5 提出了新的方法，解決了以上兩種 Cookie 的問題。
:::
---
### 試解釋非同步程式的運作邏輯。
::: spoiler
- 源於程式碼的單一執行緒
- 避免阻塞（ blocking ）凍結
- 安排其他任務交由其他處理器來執行並讓你知道任務何時完成，這樣就有效率多了，像這樣能讓其他工作在同時間完成，這就是**非同步程式設計**的基礎。
- 現代軟體越來越多圍繞在使用非同步的程式技巧來設計，讓程式碼可以在同一時間做越多事。
```
主執行緒： 任務 A --> 任務 B --> ｜任務 D ｜
背景工作執行緒：任務 C ------------->｜ ｜
```
:::
---
### 什麼是 RESTful API，能否分享你串接 RESTful API 的經驗？[東]
:::spoiler Answer
REST: **Re**spresentational **S**tate **T**ransfer
<img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/ba5e517b-9a7c-454a-bf9c-17f8e032e272/IMG_0204.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210818%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210818T202843Z&X-Amz-Expires=86400&X-Amz-Signature=cc812e2fe0cc667fa94ec64c19e56a18bb1491cc008f33981740bb7136a5a0ed&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22IMG_0204.jpg%22" width=400px>
> 近年常見的一套 **API 設計準則**(不是一個協定)，適合前後端分離架構
- api 的 URL 與 HTTP method 建議的規範，遵循這套規範風格，就可以稱自己為 RESTful API
- **HTTP 路徑**用來表達資源的名稱
- **HTTP 方法**用來表達對資源的操作方式
- JSON 為主要的傳遞資訊格式
><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/b0523c41-b977-4faa-a005-0736ed062bcc/IMG_0213.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210818%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210818T203957Z&X-Amz-Expires=86400&X-Amz-Signature=f294b8fb17abdffe7b0aba6c38d3f9e0a2c9f5e07a194f491aa1181af6fc9664&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22IMG_0213.jpg%22" width="600px">
使用實例，我的景點收藏功能的 Create, Read, Delete
```javascript=
async function getFavoriteData() {
const res = await fetch("/api/favorite", {
method: "GET",
});
// 以下忽略
}
async function addFavoriteData(attractionId) {
const res = await fetch("/api/favorite", {
method: "POST",
headers: new Headers({
"Content-Type": "application/json",
}),
body: JSON.stringify({ attractionId: attractionId }),
});
}
// 以下忽略
}
async function removeFavoriteData(attractionId) {
const res = await fetch(`/cowork/api/favorite/${attractionId}`, {
method: "DELETE",
});
// 以下忽略
}
```
:::
---
### 解釋一下 MVC 的設計觀念，曾經實作過 MVC 的程式架構嗎？試說明。[Raiy]
:::spoiler Answer
**這題請依自身經驗調整哦～**
(1) MVC 設計觀念
MVC 在軟體架構裡面是一種理念，並不是一項技術。它強調的是把不同職責的代碼分開，甚至隔開成不同檔案，這麼做的目的，是想達到代碼更清楚易懂、好維護也好擴展。因為責任歸屬以及事件發生的邏輯變清楚，我們也更容易 debug。
若我們沒有 MVC 的概念，很容易把不同職責的代碼寫在一塊，沒有明確的事件工作流程，光是找一個事件上下調用的關係，非常費時。
* M = Model，負責資料的CRUD、與資料庫連動的所有操作
* V = View，負責畫面
* C = Controller，決定事件工作流程、使用者發出請求後的邏輯互動
(2) 實作 MVC 架構
我並沒有使用過任何 MVC 相關的框架跟庫，但有嘗試在專案中把前端的代碼整理成 MVC 架構，由於我是在整個專案做完後才重新改寫，而改成 MVC 後的確在 debug 時，找到負責的事件流程速度快許多。
:::
Sign in with Wallet
Connect another wallet