庭喵的出包星球

記得webstorm這邊要打開

首先到Google Tag Manager
建立一個Account

切回GTM，把GA4加進來

然後點一下之前連過來的GA4，給它加上這個Trigger

看網路教學說把

這幾天嘗試用ChatGPT來寫自己不熟的框架和功能，發現也沒有那麼簡單，程式也不一定能順利run。扎實的學習、技術的穩扎穩打還是很重要，某方面來說有點放心，這也是我喜歡的學習方式。

而且ChatGPT有時候還會回答錯的答案，不能儘信。有時候好用沒錯，但也要有能分辨是非的能力，不能把它的話當聖經。

Continue reading ChatGPT

快捷鍵：Windows+Alt+R

如果錄影沒聲音，調整一下功能
按Windows + G ，開啟遊戲錄影設定：

Master the Coding Interview: Data Structures + Algorithms | Udemy

udemy上買的，為了熟悉演算法買的課。教得還不錯，英文講得也清楚！

《Big O and Scalability》
JavaScript有提供一個方法來mesure程式跑了多久。

let t0 = performance.now();
let t1 = performance.now();
console.log( t1-t0 + 'milliseconds')

比較兩台電腦哪個跑得比較快是沒意義的，因為電腦的效能不一樣。這時候就要看Big O了。
a runtime is simply how long something takes to run

首先按 Your files

就會出現一堆雲端的檔案，再對…三個點點點按下去

React slideshow
Nivo

做每一單前想想這個單子可以有什麼數據化的表現：

1. bundle size
2. caching (ex. RTK Query)
3. Render 速度、次數
4. Web Vital
5. performance.now()
6. Big O caculate
7. …

• 首先安裝好Jest

npm install --save-dev jest @types/jest

• 接下來安裝RTL

npm install --save-dev @testing-library/react

• 為了用useful matcher，安裝jest-dom

npm install --save-dev @testing-library/jest-dom

• 因為Babel跑TypeScript爛爛的，作者建議安裝這個（下面這個我還沒裝）

npm install --save-dev ts-jest

如果你的JavaScript檔案有用到Babel，那你還需要安裝這個咚咚

pnpm i babel-jest -D

安裝這個讓 jest 看得懂測試檔裡面的TypeScript

pnpm i @babel/preset-typescript -D

參考jest搭配TypeScript的安裝備置。記得在babelrc檔也要加進去

這樣加下來發現跑測試訊息不一樣了，說render有問題，查了一下是React Testing Library 還需要配置環境

所以就安裝下面這個

pnpm install --save-dev jest-environment-jsdom

接下來訊息又不一樣惹，說我的App沒有用Provider來包
Error: could not find react-redux context value; please ensure the component is wrapped in a ….
改一下就好了，太簡單就不講了。


接下來測試過了，只剩下一些fetch什麼的API的問題

ReferenceError: fetch is not defined

針對這點查這這篇文章之後，就安裝個這個套件然後加到setup檔就解決了

pnpm i whatwg-fetch -D

然後大功告成 ～～天啊還蠻簡單的啊

然後發現有的方法用起來會有紅波浪。
TS2339: Property ‘toBeInTheDocument’ does not exist on type ‘JestMatchers ‘.
結果安裝一個奇怪名子的套件就解決了…看它名子怪怪的本來都不想安裝的。而且還不用去eslint配什麼東西，超…超幹
Property ‘toBeChecked’ does not exist on type ‘Matchers<void, Element>’ · Issue #442 · testing-library/jest-dom (github.com)

pnpm install --save-dev @types/testing-library__jest-dom

之後來做假資料。

pnpm install msw -D

Cypress

1. 用JavaScript寫，寫法很簡單
2. 可以mock API
3. 是一個framework，不用再安裝一堆阿哩拉雜的
4. 不能測手機（？）
5. 只能在同一個domain跑，不能再跳到其它domain（真假）
6. 不能切換Tab（幹我selenium就切好切滿）
7. 不支援Iframe

這是聽udemy講師說的，還需要查一下新版本是不是真的是這樣