useMemo & useCallback
import { useMemo } frmo ‘react’; 使用 useMemo 來幫進行大量運算的function做cache，如果要傳給它下一層的component的話，再用 useCallback 包起來。 useCallback 顧名思義就是一個callback...
文章 - 第 16 頁
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 裡的套件，是不會被它的宿主安...
內湖的午餐心得
【愛爾蘭失眠咖啡】 不錯吃，可惜貴了些，可以吃蠻飽的。 【楽坡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...
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...
寫前端測試
前端測試的類型有： 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 ...
React carousel
需求功能： 要有swipe功能 無限loop 參考文章： Create a react carousel using react hooks 用了flex, hook React Hooks Slider: How to Build an Image Slider With React Hooks...
useCallback
When to use React.useCallback() Your Guide to React.useCallback() Performance Optimizations React Hooks 第一期：聊聊 useCallback...
git資料夾大小寫
ex: dist資料夾有一個folder叫 LunaCute 後來改成 lunaCute之後， git 無法判斷 lunaCute的 L變成大寫了 所以再怎麼push，還是一樣會是小寫 這時候可以：刪除整個資料夾，push(刪掉的進度)，之後再再推新的資料夾上去...
React Router教學
Route Matchers 幾乎是最重要的部份！連結要「深入淺出」 <Route path="/contact/:id"> <Contact /> </Route> <Route path="/contact"> <AllContacts /> </Route> 在這裡如果連結是 /contact...
安裝最新套件
先刪除舊的！ rm -rf node_modules/ 或是 npm uninstall xxx 再npm install 之後 再手動安裝 npm install git+ssh://git@lunacute.com/jelly.git 就會裝到最新版本了～就跟安裝 react router一樣…...
mock API
一些不錯的站站 Mocky: The world easiest & fastest tool to mock your APIs response的參考： https://jsonapi.org/examples/...
Jira使用
Epic：類似一個里埕碑，可以以小專案名命名（feature release）：odds Spread Setting, 帳戶中心、新增風控帳號… Components： 類似樂高積木，可以用模組命名，例如：API、UI、購物車… Label：類似關鍵字，hashtag，方便搜尋用 參考： http...
抓不到新的套套
嘗試把npm 快取清一清、 Try npm cache clean --force if it doesn’t work then manually delete %appdata%\npm-cache folder. Node.js移除，重開機，就解決了*__* 我也有小改一下套件的p...
英文詞彙使用範例搜尋
DeepL 查查綫上翻譯 xyz線上翻譯 Engoo Taiwan 英語 學習教材 Collins Online Dictionary | Definitions, Thesaurus and Translations...
Handle clicks outside of React components
Click outside listener for React components in 10 lines of code 內含TypeScript Little neat Trick to capture click outside React component | by Pitipat S...
react.js PropTypes
導入這樣導： import PropTypes from 'prop-types'; // ES6 設定這樣設： CuteLuna.propTypes = { order: PropTypes.arrayOf(PropTypes.string), }; 各種類型： // array of strin...
寫程式的心得
寫專案就像一堆小小的程式的集合。每個程式幾乎都可以拆開來變成一個小部份，一個小部份就像MDN看到的那樣，有時候會覺得寫一個小部份可以做到，但整合成一個大部份就覺得複雜亂亂。可能可以先想好每塊部份要怎麼寫，然後畫個流程圖，就會好寫很多。（流程圖是寫扣的流程圖） 不過以前的專案大多都是舊有專案要增加新功...
敏捷開發筆記
敏捷其實不是代表快，它只是讓自己可以早點發現作品符不符合需求。 敏捷開發其實也可以當成一個自我管理的方法。 TASK想到什麼就加上去，不是一定只要做只有planning的時候開的需求。 你沒有去溝通的話，溝通是不會發生的。通常客戶把需求告訴PM後，PM如果吸收了百分之八十％算強了，他再傳給主管，主管...
reorder list
export const langMapDataA = { sports: "Sports", casino: "Casino", esports: "E-Sports", }; const reCraftArray = Object.keys(viewLang).map((key) => ({ k...
Array.prototype.slice()
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] ...