---
# System prepended metadata

title: C_黑鯨問號
tags: [各種知識]

---

[TOC]
# C_黑鯨問號
:::  info
反骨筆記
:::

## HTTP vs HTTPS
> https://youtu.be/hExRDVZHhig?si=Tfy3tCGO-ALgk1bG

- 後端夥伴的鐵人文章
    - https://ithelp.ithome.com.tw/articles/10362779
    - https://ithelp.ithome.com.tw/articles/10356740
    - https://ithelp.ithome.com.tw/articles/10359257 
- 和主題有一點點相關的容易理解的說明：[傳紙條](https://hulitw.medium.com/learning-tcp-ip-http-via-sending-letter-5d3299203660)
- 加密是由誰執行的

## JSON
> https://youtu.be/iiADhChRriM?si=JHF8qUGTpx29tymE

- 「JavaScript的object是以JSON格式撰寫的」論述是否為真
- 但是物件的key可以不用雙引號

## fetch
> https://www.youtube.com/watch?v=cuEtnrL9-H0

```javascript
fetch('https://reqres.in/api/users',{
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'user 1'
    })
})
  .then(res => res.json())
  .then(console.log)
```
![image](https://hackmd.io/_uploads/BJyzXburJx.png)

- GET下來的都是JSON格式嗎
- POST是可以寫資料回傳給目的地的方法嗎? 影片的範例要怎麼確認有寫入成功?

## postman
### Ubuntu 安裝
[REF](https://ithelp.ithome.com.tw/articles/10218429)
裡面氣象網址是錯的，要更新一下

### 基本操作
[REF1](https://medium.com/@ray102467/tools-api-%E6%B8%AC%E8%A9%A6%E5%B7%A5%E5%85%B7-postman-%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C-7340b1ac5be1)
[REF2](https://ithelp.ithome.com.tw/articles/10245711)

## HTTP Headers & Cookies
> https://youtu.be/DxeSGUM16_4?si=1jjO8RBBhlFCAW-w

- 如果沒有設cookie，先由server傳送response說需要cookie，下一次client就會在request寫上這個cookie...嗎?
- cookie上紀錄的是session，確認跟之前登入的是用同一個client? 如果我記下這個session ID，然後登出再用這個session ID的cookie傳回去會有用嗎XD (應該是沒用)

## JWT
> https://youtu.be/7Q17ubqLfaM?si=W7csmF22n_qKTGp1
> https://jwt.io/

- 所以server有的東西變成是運算出JWT的演算法？
- secret key是什麼? 第三段不就是前兩段去算hash值嗎?
    - 沒辦法用JWT去算出secret key

## REST & HTTP
> https://youtu.be/Q-BpqyOT3a8?si=q_G3h_lYQT4KHmjr

![image](https://hackmd.io/_uploads/ByHLIlkLyl.png)
- 看完還是看不懂REST是啥？跟他狂GET超過上限有關係嗎XDDD

![image](https://hackmd.io/_uploads/S1e8ueJIyg.png)
> 就是用一個唯一的 URL 定位資源，將動作藏在 HTTP 的 method 裡面。
> [REF](https://medium.com/itsems-frontend/api-是什麼-restful-api-又是什麼-a001a85ab638)

- 所以是API撰寫方式？

## URL
> https://youtu.be/5Jr-_Za5yQM?si=kKMBXUQ6S2sX7Kz8

- www叫subdomain，com叫top-level，阿中間叫啥
- file path跟parameter string使用時機的差異
    - file path是看要拿哪一支檔案
    - parameter string是檔案內要填什麼內容

## POST、FormData、fetch
> https://youtu.be/fGYQJAlLD68?si=fR03N3feP9JXM-cH

```html
<form class="form">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required="">
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required="">
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
```
```javascript
const formEl = document.querySelector('.form');
const formData = new FormData(formEl);

// 轉成parameter string
// ?username=artha&animal=dog
const data = new URLSearchParams(formData);

fetch('https://reqres.in/api/users',{
    method: 'POST',
    headers: {
        // form
        'Content-Type': 'application/x-www-form-urlencoded' 
        // 二進位檔案例如圖片、影片
        // 'Content-Type': 'multipart/form-data' 
    },
    body: data
})
  .then(res => res.json())
  .then(console.log)
```
![image](https://hackmd.io/_uploads/ry8WiJQ8Jx.png)
![image](https://hackmd.io/_uploads/rkv_oy7U1l.png)
![image](https://hackmd.io/_uploads/Bki9s1X8Jx.png)

- 是不是通常不會直接在標籤寫method
- 他說content-type可以省略不寫因為瀏覽器會辨識，什麼時候瀏覽器會辨識?
    - 有時候會解析失敗
    - explicit 直接指定content-type
    - implicit 讓他自己解析

```javascript
for (let it of formData) {
    console.log(it);
}
```
![image](https://hackmd.io/_uploads/r1zdI2781e.png)

## FP vs OOP
> https://youtu.be/08CWw_VD45w?si=A5izZUZVTMbnFiFF

- FP: 使用記憶體儲存變數算是side effect，但在function的scope裡面他沒有影響到其他scope也算嗎？總不可能所有function都可以寫成一行的形式吧
    - (OOP的side effect是會改變到function外的變數)
    - (留言也有人反對XDD) 
- FP和OOP是相對的概念嗎？但感覺他們用在很不同的情境上，不能並存嗎？如果不能並存的話，是不是可以互相轉換？

FP same input same output
FP 一長串運算式怎麼辦？命名語意要清楚


## Axios
> https://youtu.be/6LyagkoRWYA?si=U7fbByRnuwsNXVKp

- _limit是什麼時候可以用？
    - 是server開的接口
- 跟fetch除了不用轉json之外有什麼不同
    - 多了一些功能可以使用，例如interceptor
- POST: 要怎麼知道哪些屬性是server自己產生的?(例如id) 哪些是我們應該要提供的?(為什麼userId不用)
    - 看文件
- interceptors是發request的時候寫一些訊息用的嗎?
    > - 可以理解成hook
    - :question:為什麼error要用Promise
    ```javascript
    axios.interceptors.request.use(
      config => {
        console.log(
          `${config.method.toUpperCase()} request sent to ${
            config.url
          } at ${new Date().getTime()}`
        );

        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    ```
- TRANSFORMING REQUESTS & RESPONSES 什麼時候會用到啊
    - 好像也用不到
- cancel看無XDD
    - 實務上阿傑還沒用到XD
    - 文件寫不建議使用
- validateStatus 如果是true就不報錯？
    - 阿傑沒用過，猜是強迫某個狀態報錯?

## State
> https://youtu.be/g8-Xrpl_Uhk?si=zZ0m04PutNkmHQe4

- useState和vue的watcher類似嗎？
    - NO
    - 同一份code，不同state會有不同的結果

## hooks
> https://youtu.be/tgmvleK5vZI?si=xKw41xDtK_ae3J8t

- debug才會用到嗎？
    - 不是
    - 可以做任何事
    - git hook

## Vite
> https://youtu.be/vj8KSZjPTUU?si=UFiyd99ttm4wFE_t

- 以前的打包工具是什麼? webpack?
- vue沒有打包也可以跑嗎?

### 補充
- tree shaking 有興趣可以問 Danny
- 以前的 gulp 可把用不到的 css 去掉
- 不確定有沒有 map 
- 公司有需要再去學其他打包工具 (vite本身文件也不好讀)

## CORS
> https://youtu.be/PNtFSVU-YTI?si=PAffzs3c2UhYc0AP

![image](https://hackmd.io/_uploads/r1TKEOhvyx.png)

```javascript
// script.js
fetch("http://localhost:3000/data")
  .then(res => res.json())
  .then(data => console.log(data))

// server.js
const express = require("express");
const app = express();

// 不是要傳資料進去嗎?為什麼用get?
app.get("/data", (res, req) => {
  res.json({ name: "Kyle", favoriteFood: "Rice"})
})

app.listen(3000)

// 後來加上這段就可以了
const cors = require("cors");
app.use(
  cors(
    {
      origin: "http://127.0.0.1:5500"
    }
  )
)
```

- **基本上看不太懂**
- express是幹麻用的? 帶資料進去? 進去哪裡? 為什麼用get
    - express是後端框架，可以不用理解
- 為什麼不是單純的 localhost:3000/data 跟 127.0.0.1:5500 網址不一樣，本來就無法fetch到? 還是是指這個網頁live server在5500?
- 那為什麼平常去有開API的接口fetch東西回來就可以? 不是也和我本地的位址不一樣嗎?
    - 因為對方API有設定所有網域都可以取用
- cors的作用是開放某個url有權限可以拿資料? 目前還是會用cors這個套件嗎?
    - 也是後端的東西
- credentials憑證? 看起來跟cookie有關?

### 補充
- 通常是瀏覽器擋的，所以如果是透過postman，就可以拿到資料
- cors有問題請找後端開white list

## NPM
> https://www.youtube.com/watch?v=jHDhaSSKmB0

- 只有start或test不需要加run?
    - 可以略過
- npm與yarn的比較？
    - 看公司用哪個就用哪個
    - pmpm，解決同一個套件因為不同專案而重複安裝多次的問題
- 不是很理解哪些套件算是`--save-dev`?
    - 實際操作的時候還會需要用到他的程式，就不是`dev-dependency`：axios、quasa、vue(可能不是全部編譯好，且vue本身就是js寫的程式)
    - eslint、sass

### 補充
- 如果不把套件裝在global，可以用npx來安裝

## ?ID Tokens vs Access Tokens
> https://www.youtube.com/watch?v=vVM1Tpu9QB4
> [文章版](https://auth0.com/blog/id-token-access-token-what-is-the-difference/)

- ID Token for authentication
    - JWT
    - OpenID connect
        - OpenID Provider可以是各種公司
    - 不是一個認證嗎? 為什麼需要帶資料?
    - 算是一個第三方認證嗎? 為什麼不是browser和application之間的事情?
    ![image](https://hackmd.io/_uploads/BktMbktDyx.png)
    - `aud` property是application要和OpenID provider申請?
    - 不能用ID Token去打API是因為這樣等於他取得我所有的權限嗎?
- Access Token for authorizatoin
    - 格式不限，但通常是JWT
    - Oauth2
    - 授權別的應用程式取得別的資料庫的資料
    - 不需要這個人是否登入的資訊

## OAuth 2.0
> https://www.youtube.com/watch?v=CPbvxxslDTU

![image](https://hackmd.io/_uploads/SJWbUytPye.png)
- 為什麼需要authorization grant，不能直接提供token嗎
    - grant像是一個同意書
- Access token會夾帶ID token??
 ![image](https://hackmd.io/_uploads/r1AFUJKv1x.png)

## MVC
> https://www.youtube.com/watch?v=DUg2SWWK18I

- MVC實作在哪裡? 他是一種程式設計的概念嗎? 不同邏輯的檔案分開?
    - 對，以後端來解釋更合適
- controller算是一個API的窗口嗎? 
    - 差不多
- 為什麼需要controller? 處理成功/失敗是什麼意思?

## Date
> https://youtu.be/LwYwz67l1lA?si=C5kVr5cjoNItrcMj

- 取日期會用原生的嗎? 還是會有套件?
    - day.js 用套件！！

## isostring
> https://blog.techbridge.cc/2020/12/26/javascript-date-time-and-timezone/

> 也就是說在 ISO 8601 的標準裡面，T 這個字元在溝通的雙方都同意之下是可以省略的，會變成像是：2020-02-0213:00:00 這樣。
- 溝通雙方是誰？ 
    - 通常是指前後端

    