Eslint 配置教學
如圖，可以快速裝好airbnb規範 輸入這個指令 npx eslint --init 安裝完之後，在webStorm的設定那邊開啟eslint 之後就會看到一堆可怕的紅線惹。然後再搭配prettier 再新增.prettierrc檔案 { "printWidth": 100, "singleQuot...
文章 - 第 28 頁
Babel
babel裡的plugins是晶片，有各種晶片可以提供各種的功能。然後就有懶人包：presets，可以想像成是晶片包（其實也可以比喻成各種菜組合成的便當） babel7可以建一個 babel.config.json 檔案來做設定 使用async/await會報錯： regeneratorRuntim...
買了吸夏噗的書
公司需求，我要開始學C#，買了二本書來看看。覺得應該要買英文的？可是英文的還要等…不然要去天瓏書局看看。...
架webpack-dev-server在本機端跑跑
姆喵要在本機端看程式變怎麼樣，所以需要這個功能。 很簡單，首先先安裝 webpack-dev-server 再看怎麼辦。 npm install webpack webpack-cli webpack-dev-server --save-dev 喔對了還要安裝這個 npm i html-webpac...
webpack && react
不想用腳手架 create-react-app 的時候，就需要研究一些有的沒的。 搜尋關鍵字： react webpack tutorial 參考文章： A mostly complete guide to webpack (2020) Tutorial: How to set up React, ...
ES6 Modules
在寫react常用到import和export，這些就是ES Modules，目前已經被大部份的瀏覽器支援。就連Node.js 12版以上也支援了。 需要用到module的程式，在script上需要加上type=”module”註記 <script type="module"...
React-Testing-Library 學習
要看render出來的結構長怎麼樣，可以用 screen . debug ( ) ; 覺得要query的element有可能不在的話，用queryBy，因為getBy如果找不到就會throw Error。 不應該去測試DOM的結構，DOM的結構應該當成黑箱子。 假設有個按鈕，用getByRole不要...
useMemo & useCallback
import { useMemo } frmo ‘react’; 使用 useMemo 來幫進行大量運算的function做cache，如果要傳給它下一層的component的話，再用 useCallback 包起來。 useCallback 顧名思義就是一個callback...
WebStorm – prettier
首先先安裝 prettier npm i prettier -D 之後到Settings裡面找當前目錄下的node_modules裡的prettier 再勾選on save，就可以在save的時候自動幫忙format。（eslint不用裝也會） 選package.json，它會跳出這個提問，選Yes...
Upcoming Event
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
一開始先選擇「Edit Configurations」 之後點擊加加＋ 選擇 JavaScript Debug 如下輸入資料 設定完就可以在編輯器debug了。 記得是按蟲，不是按鍵頭 參考 這篇...
React auto
因為React最近更新到17了，用webstorm在import的時候少了一些自動幫忙import的功能，要再安裝插件： 文章來源： https://stackoverflow.com/questions/46871567/webstorm-auto-completion-does-not-work...
後端實用工具
上網看到還不錯的工具，分享一下 SQL Database Modeler – SQL Database Modeler, Entity Relationship Diagram UI介面超漂亮的，覺得賞心悅目...
如何開發自己的react library
可以自己用 create-react-app 腳手架來做，也可以用 create-react-library 可以參考用 create-react-library 建出來的專案，它的package.json是怎麼設定的 library放在 devDependencies 裡的套件，是不會被它的宿主安...
快速跳到node_modules的方法
直接ctrl 滑鼠點一下就有了（webstorm）...
怎麼寫好扣
https://github.com/Droogans/unmaintainable-code 不小心看到的，真的越看越好笑。...
tree shaking
tree shaking 就是指🌲🐦🐦 的時候要 shaking...
內湖的午餐心得
【愛爾蘭失眠咖啡】 不錯吃，可惜貴了些，可以吃蠻飽的。 【楽坡Bon Box】 天啊吃不完，真的會很飽。 【清水亭】 訂了生滾海鮮粥。感覺還好，以後不訂了！！太多醣類，我還是要選蛋白質多的 【見笑草】 感覺一般般。肉不多 【放縱FUN Zone 跨界健康料理】 好吃，蛋白質豐富，份量很多，會吃太飽。...
Eslint + airbnb + prettier
快速指令： 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
以 Provider 提供的值為準 createContext 後面提供的預設值，是給上層如果沒有找對應的 Provider 的 component 話用的。 每一個 context 物件都有一個 Provider ， React 會讓它的吸精元件訂閱這些 context 需要注意 referenc...
Next.js 發佈檔案到自己的網站
跑這個指令，就會有out資料夾出來，再上傳到我的FTP就行惹！ 參考文章： https://nextjs.org/docs/advanced-features/static-html-export...
TypeScript Tuple
今天乃學突波這個咚咚！就是已知裡面的型別是什麼的固定length的陣列。 舉例： const x: [string, string, number, string, number, string]; x = [‘Luna’, ‘trees’, 100,...
為什麼不用Enzyme要用React Testing Library
這是Enzyme的範例 it('simulates click events', () => { const onButtonClick = sinon.spy(); const wrapper = mount(( <Foo onButtonClick={onButtonClick} /> )); ...
React Test
Jest 會找出在 __tests__ 資料夾的 js 檔。或是檔名後面是 .test.js / .spec.js 的檔案 用 it() 或 test() 來寫測試，也可以用 describe() 來包住這些測試，不過不是必要的 describe() 的description可以是React的com...
不酸的橘子
今天公酥給的橘子，甜甜的，難得吃到不酸的橘子！...
最近吃的月餅
全聯買的烏豆沙月餅…覺得沒有很好吃，是我變挑食了嗎？...
查資料方法
找幾個喜歡的站，在他們的搜尋欄輸入關鍵字(例如reddit 在google搜尋，可以篩選近一年內 在stackoverflow發問，或其它站不錯的站： IT幫...
寫前端測試
前端測試的類型有： Unit testing Visual regression testing Acceptance Testing End to End Testing ( functional testing ) Snapshot Testing 不錯的工具： jest-runner-grou...
歌單
...
git 如何打tag
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 ...