[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

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)


- 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

- 看完還是看不懂REST是啥？跟他狂GET超過上限有關係嗎XDDD

> 就是用一個唯一的 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

<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>

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)


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

for (let it of formData) {
    console.log(it);
}


## 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

    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


// 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之間的事情?
- `aud` property是application要和OpenID provider申請?
- 不能用ID Token去打API是因為這樣等於他取得我所有的權限嗎?
- Access Token for authorizatoin
- 格式不限，但通常是JWT
- Oauth2
- 授權別的應用程式取得別的資料庫的資料
- 不需要這個人是否登入的資訊

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

- 為什麼需要authorization grant，不能直接提供token嗎
- grant像是一個同意書
- Access token會夾帶ID token??

## 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 這樣。
- 溝通雙方是誰？
- 通常是指前後端