科技

React-Testing-Library 學習

2020年11月10日

要看render出來的結構長怎麼樣，可以用 screen . debug ( ) ; 覺得要query的element有可能不在的話，用queryBy，因為getBy如果找不到就會throw Error。不應該去測試DOM的結構，DOM的結構應該當成黑箱子。假設有個按鈕，用getByRole不要...

useMemo & useCallback

2020年11月7日

import { useMemo } frmo ‘react’; 使用 useMemo 來幫進行大量運算的function做cache，如果要傳給它下一層的component的話，再用 useCallback 包起來。 useCallback 顧名思義就是一個callback...

WebStorm – prettier

2020年11月7日

首先先安裝 prettier npm i prettier -D 之後到Settings裡面找當前目錄下的node_modules裡的prettier 再勾選on save，就可以在save的時候自動幫忙format。（eslint不用裝也會）選package.json，它會跳出這個提問，選Yes...

Upcoming Event

2020年11月3日

October 5-7, 2021 ElasticON Global 11/29 https://reinvent.awsevents.com/ https://www.outsystems.com/nextstep/2021/ 10/21 http://reactjsday%202021%20@1...

WebStorm 怎麼 debug

2020年10月29日

一開始先選擇「Edit Configurations」之後點擊加加＋選擇 JavaScript Debug 如下輸入資料設定完就可以在編輯器debug了。記得是按蟲，不是按鍵頭參考這篇...

React auto

2020年10月29日

因為React最近更新到17了，用webstorm在import的時候少了一些自動幫忙import的功能，要再安裝插件：文章來源： https://stackoverflow.com/questions/46871567/webstorm-auto-completion-does-not-work...

後端實用工具

2020年10月20日

上網看到還不錯的工具，分享一下 SQL Database Modeler – SQL Database Modeler, Entity Relationship Diagram UI介面超漂亮的，覺得賞心悅目...

如何開發自己的react library

2020年10月19日

可以自己用 create-react-app 腳手架來做，也可以用 create-react-library 可以參考用 create-react-library 建出來的專案，它的package.json是怎麼設定的 library放在 devDependencies 裡的套件，是不會被它的宿主安...

快速跳到node_modules的方法

2020年10月15日

直接ctrl 滑鼠點一下就有了（webstorm）...

怎麼寫好扣

2020年10月9日

https://github.com/Droogans/unmaintainable-code 不小心看到的，真的越看越好笑。...

tree shaking

2020年10月8日

tree shaking 就是指🌲🐦🐦 的時候要 shaking...

內湖的午餐心得

2020年10月6日

【愛爾蘭失眠咖啡】不錯吃，可惜貴了些，可以吃蠻飽的。【楽坡Bon Box】天啊吃不完，真的會很飽。【清水亭】訂了生滾海鮮粥。感覺還好，以後不訂了！！太多醣類，我還是要選蛋白質多的【見笑草】感覺一般般。肉不多【放縱FUN Zone 跨界健康料理】好吃，蛋白質豐富，份量很多，會吃太飽。...

Eslint + airbnb + prettier

2020年10月2日

快速指令： exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/nu...

React context API

2020年9月29日

以 Provider 提供的值為準 createContext 後面提供的預設值，是給上層如果沒有找對應的 Provider 的 component 話用的。每一個 context 物件都有一個 Provider ， React 會讓它的吸精元件訂閱這些 context 需要注意 referenc...

Next.js 發佈檔案到自己的網站

2020年9月29日

跑這個指令，就會有out資料夾出來，再上傳到我的FTP就行惹！參考文章： https://nextjs.org/docs/advanced-features/static-html-export...

TypeScript Tuple

2020年9月28日

今天乃學突波這個咚咚！就是已知裡面的型別是什麼的固定length的陣列。舉例： const x: [string, string, number, string, number, string]; x = [‘Luna’, ‘trees’, 100,...

為什麼不用Enzyme要用React Testing Library

2020年9月27日

這是Enzyme的範例 it('simulates click events', () => { const onButtonClick = sinon.spy(); const wrapper = mount(( <Foo onButtonClick={onButtonClick} /> )); ...

React Test

2020年9月22日

Jest 會找出在 __tests__ 資料夾的 js 檔。或是檔名後面是 .test.js / .spec.js 的檔案用 it() 或 test() 來寫測試，也可以用 describe() 來包住這些測試，不過不是必要的 describe() 的description可以是React的com...

不酸的橘子

2020年9月22日

今天公酥給的橘子，甜甜的，難得吃到不酸的橘子！...

查資料方法

2020年9月13日

找幾個喜歡的站，在他們的搜尋欄輸入關鍵字(例如reddit 在google搜尋，可以篩選近一年內在stackoverflow發問，或其它站不錯的站： IT幫...

寫前端測試

2020年9月13日

前端測試的類型有： Unit testing Visual regression testing Acceptance Testing End to End Testing ( functional testing ) Snapshot Testing 不錯的工具： jest-runner-grou...

歌單

2020年9月12日

...

git 如何打tag

2020年9月10日

git tag 1.0.0 這樣就打了一個tag 然後因為在push的時候不會順便push tag上去，要自己再push上去 git push origin 1.0.0 這樣就大功告成查詢有哪些tag git tag -l "1.0*" 例出1.0xxxxx系列的tag 刪除特定的tag git ...

err

2020年9月9日

...

React carousel

2020年8月30日

需求功能：要有swipe功能無限loop 參考文章： Create a react carousel using react hooks 用了flex, hook React Hooks Slider: How to Build an Image Slider With React Hooks...