鬼抓人、紅綠燈、老師說⋯⋯這些經典遊戲的英文怎麼說？

 https://www.hopenglish.com/hope-tips-lucy-says

datacamp / codeacademy: two websites for learning coding

webpack速成

https://www.youtube.com/watch?v=uP6KTupfyIw

https://github.com/scps960740/Webpack-crash-course-2021-bruceFE/blob/master/webpack.config.js

https://webpack.js.org/concepts/

To get started you only need to understand its Core Concepts:

• Entry
• Output
• Loaders  // 處理閱讀非js的檔案(webpack 預設只讀懂js)
  
  
  
  
  
  babel用來協處處理最新的js可以被讀懂
  
  https://babeljs.io/setup#installation
  preset-env 是目前最新的意思
  
  
  (css 類似的如postcss)
  
  
  
  
  
  
  
  
  
  **https://webpack.js.org/guides/asset-modules/#root 
  
  
  
  

  
  
  
  
  
  
  Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders.

  Prior to webpack 5 it was common to use:

  • raw-loader to import a file as a string
  • url-loader to inline a file into the bundle as a data URI
  • file-loader to emit a file into the output directory

  Asset Modules types replace all of these loaders by adding 4 new module types:

  • asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.
  • asset/inline exports a data URI of the asset. Previously achievable by using url-loader.
  • asset/source exports the source code of the asset. Previously achievable by using raw-loader.
  • asset automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using url-loader with asset size limit.

  When using the old assets loaders (i.e. file-loader/url-loader/raw-loader) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset's module type to 'javascript/auto'.

  
  
• Plugins 
  // 處理刪除檔案夾裡的檔案
  // HtmlWebpackPlugin: 在build出來的檔名加入動態hash後，自動動態產生相應的html等行為
  
  
  
  

  

  
  
  
  
  以./base.html內的template為模板產生新的html(我想vue或react等不會需要這樣)

另外MiniCssExtractPlugin是讓build出來的css從html裡獨立出來成自己一個檔案，可設定filename參數加入hash




        還有如CopyWebpackPlugin

**補充 devtool: 'source-map'可以讓build出來的檔案多出xxxx.map，這會在瀏覽器看source時可以看到非production被編譯過的版本的code，協助debug

• Mode  // 檔案會不會被壓縮等(development or production or none)
• Browser Compatibility

build 會把檔案build出來

dev會起server，沒特別設置時抓的是當前目錄資料夾，如果有index.html就會顯示它,它裡面要載入剛build出來的output.js

react 速成

https://www.youtube.com/watch?v=zqV7NIFGDrQ
https://github.com/scps960740/React-crash-course-2021-bruceFE

 1. Hook： 在编程领域，钩子(hook)是一种技术，允许开发人员在代码的特定点插入自定义代码(like function)，以便在程序执行过程中执行特定的操作或修改程序行为。

https://react.dev/reference/react/hooks

**useState is a React Hook that lets you add a state variable to your component. 

const [name, setName] = useState('Edward');

function handleClick() {

setName('Taylor');

setAge(a => a + 1);

  setNumber(function(prev){

    return prev + 100

  })

// ...

<div name={name} />

父子層自動雙向綁定，不用emit

**useEffect is a React Hook that lets you synchronize a component with an external system.(所以當update btn click，應使用useEffect將資料傳給後端，而不是在btn上掛update function)

就像vue的watch with immediate: true

const Home = () => {

  useEffect(() => {

    // 綁定的事件

    return()=>{  // 這個很少用

        // 取消綁定的事件 

    }

  }, [watch的變數]) 

 //如果沒有變數，就是只執行最初的一次，後面沒有監聽(感覺這個是比較不正規的做法嗎嗎嗎???)

//[watch的變數可以不只一個

}

**useRef is a React Hook that lets you reference a value that’s not needed for rendering.

2. jsx

**jsx 就像vue裡的template

**只要想在jsx裡用js就要用大括號

例如:

// List.js   // 這是個component

const arr = [1, 2, 3]

const List = () =>{

    return <div className="list">

        { 

            arr.map(item => <div>{item}</div>)

        }

        </div>

}

export default List

3. Why shouldn't I use index as key in render a array?

Using the index as a key when rendering an array in React is generally discouraged for a few reasons:

Stability: Indexes may change if items are added, removed, or reordered in the array. This can lead to unnecessary re-renders and potentially affect component state or cause unexpected behavior.

Performance: React uses keys to efficiently update and reconcile the DOM. When using the index as the key, React may have to re-render more components than necessary, impacting performance.

Component State: If components in the array have internal state or rely on lifecycle methods, using the index as the key can lead to inconsistencies or errors when components are re-ordered or removed.

Instead, it's recommended to use a unique identifier for each item in the array as the key. This ensures stability, improves performance, and helps maintain component state integrity. If the array items don't have a unique identifier, consider adding one or using a library like uuid to generate unique keys.

solution 1

use uuid package  如下

import { v4 } from "uuid";

const Edit = ({ add, submittingStatus }) => {

  const [note, setNote] = useState("");

  function noteChange(e) {

    setNote(e.target.value);

  }

  const [date, setDate] = useState("");

  function dateChange(e) {

    setDate(e.target.value);

  }

  const [time, setTime] = useState("");

  function timeChange(e) {

    setTime(e.target.value);

  }

  // TODO del

  console.log(note, date, time);

  function addItem() {

    submittingStatus.current = true

    add(function (prevData) {

      return [       

        {

          id: v4(),

          note,

          date,

          time,

        },

        ...prevData,

      ];

    });

  }

4. 快速模擬後端給資料json-server

https://www.npmjs.com/package/json-server

5.Idempotent

https://ihower.tw/blog/archives/6483

idempotent 的意思是如果相同的操作再執行第二遍第三遍，結果還是跟第一遍的結果一樣 (也就是說不管執行幾次，結果都跟只有執行一次一樣)

根據 HTTP 的規格，GET, HEAD, PUT 和 DELETE 是 idempotent，相同的 Request 再執行一次，結果還是一樣。只有 POST 和 PATCH 不是 idempotent，POST 再執行一遍，會再新增一筆資料，PATCH 則是有不能保證 idempotent 的可能性(徵求例子)。POST 和 PATCH 都不是 idempotent 的操作，這也是為什麼 Github API 裡用 POST 當做 PATCH 的相容取代方案。

另一個 HTTP Methods 特性是”Safe”，這比較簡單，只有 GET 和 HEAD 是 Safe 操作。Safe 特性會影響是否可以快取(POST/PUT/PATCH/DELETE 一定都不可以快取)。而 Idempotent 特性則是會影響可否 Retry (重試，反正結果一樣)。

Safe?	Idempotent?
GET	Y	Y
POST	N	N
PATCH	N	N
PUT	N	Y
DELETE	N	Y

透過 Idempotent 的特性，有時候可以幫助你判斷該用哪一個 HTTP Methods。回到前面講 PUT 好像不太好用，例如以瀏覽器為主的 HTML 應用表單，要麻是 POST 新增資料，要麻就是用 PATCH 部分更新已經存在的資料(你不會希望用 PUT 修改個人資料的時候，每次都要重傳照片吧)，因此比較少用到 PUT。這也是為什麼 Rails 4 把表單修改的 PUT 改成 PATCH Method，透過 Rails 鷹架產生出來的 update，其實符合的是 PATCH 行為而不是 PUT。

不過還是有一些我認為蠻適合用PUT的情境，例如訂閱東西該用POST還是PUT呢?

POST /subscriptions

# 還是

PUT /subscriptions/{something_id}

訂閱東西只有兩個狀態，”已訂閱”或”沒有訂閱”，這個訂閱的操作再重送幾次，還是”已訂閱”，所以我認為蠻符合 PUT 的 idempotent 特性。而對應的取消訂閱 API 想當然就是

DELETE /subscriptions/{something_id}

另外一個我覺得有趣又實用的 PUT 例子是，設計 API 给可以離線 offline 使用的行動裝置(例如iPhone)。支援 offline 產生的資料，通常會使用 UUID 來產生 ID，這樣就不需要透過中央伺服器管控 ID，方便裝置之間的同步。這樣的情境下，新增資料的 REST API 其實可以提供兩種：

POST /items # 參數帶 uuid=4937973d-e349-460a-a6ad-38625125b24a。如果不帶uuid則由server來產生uuid

# 和

PUT /items/4937973d-e349-460a-a6ad-38625125b24a

對行動裝置的 client 來說，用POST的問題在於離線環境的不穩定，有可能POST之後沒有收到回傳，因此行動裝置不確定有沒有同步成功，這時候要再重試(retry)，但是用 POST 就爆炸了，因為 server 會再新建一筆 uuid 重複的資料。但是用 PUT 就沒有問題了，PUT 是 Idempotent 的操作，可以重送沒有關係 (可以再搭配 Conditional PUT 的機制，用 ETag 和 Last-Modified Headers 確保沒有覆蓋衝突)

如果是沒有 offline 需求的 client，例如第三方應用，那麼就可以用 POST /items 這個 API，交由 server 來產生 uuid。