後端實用工具
上網看到還不錯的工具，分享一下 SQL Database Modeler – SQL Database Modeler, Entity Relationship Diagram UI介面超漂亮的，覺得賞心悅目...
Read more文章 - 第 18 頁
如何開發自己的react library
可以自己用 create-react-app 腳手架來做，也可以用 create-react-library 可以參考用 create-react-library 建出來的專案，它的package.json是怎麼設定的 library放在 devDependencies 裡的套件，是不會被它的宿主安...
Read more
內湖的午餐心得
【愛爾蘭失眠咖啡】 不錯吃，可惜貴了些，可以吃蠻飽的。 【楽坡Bon Box】 天啊吃不完，真的會很飽。 【清水亭】 訂了生滾海鮮粥。感覺還好，以後不訂了！！太多醣類，我還是要選蛋白質多的 【見笑草】 感覺一般般。肉不多 【放縱FUN Zone 跨界健康料理】 好吃，蛋白質豐富，份量很多，會吃太飽。...
Read moreEslint + 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...
Read moreReact context API
以 Provider 提供的值為準 createContext 後面提供的預設值，是給上層如果沒有找對應的 Provider 的 component 話用的。 每一個 context 物件都有一個 Provider ， React 會讓它的吸精元件訂閱這些 context 需要注意 referenc...
Read moreTypeScript Tuple
今天乃學突波這個咚咚！就是已知裡面的型別是什麼的固定length的陣列。 舉例： const x: [string, string, number, string, number, string]; x = [‘Luna’, ‘trees’, 100,...
Read more為什麼不用Enzyme要用React Testing Library
這是Enzyme的範例 it('simulates click events', () => { const onButtonClick = sinon.spy(); const wrapper = mount(( <Foo onButtonClick={onButtonClick} /> )); ...
Read moreReact Test
Jest 會找出在 __tests__ 資料夾的 js 檔。或是檔名後面是 .test.js / .spec.js 的檔案 用 it() 或 test() 來寫測試，也可以用 describe() 來包住這些測試，不過不是必要的 describe() 的description可以是React的com...
Read more寫前端測試
前端測試的類型有： Unit testing Visual regression testing Acceptance Testing End to End Testing ( functional testing ) Snapshot Testing 不錯的工具： jest-runner-grou...
Read moregit 如何打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 ...
Read moreReact carousel
需求功能： 要有swipe功能 無限loop 參考文章： Create a react carousel using react hooks 用了flex, hook React Hooks Slider: How to Build an Image Slider With React Hooks...
Read moreuseCallback
When to use React.useCallback() Your Guide to React.useCallback() Performance Optimizations React Hooks 第一期：聊聊 useCallback...
Read moregit資料夾大小寫
ex: dist資料夾有一個folder叫 LunaCute 後來改成 lunaCute之後， git 無法判斷 lunaCute的 L變成大寫了 所以再怎麼push，還是一樣會是小寫 這時候可以：刪除整個資料夾，push(刪掉的進度)，之後再再推新的資料夾上去...
Read moreReact Router教學
Route Matchers 幾乎是最重要的部份！連結要「深入淺出」 <Route path="/contact/:id"> <Contact /> </Route> <Route path="/contact"> <AllContacts /> </Route> 在這裡如果連結是 /contact...
Read more安裝最新套件
先刪除舊的！ rm -rf node_modules/ 或是 npm uninstall xxx 再npm install 之後 再手動安裝 npm install git+ssh://git@lunacute.com/jelly.git 就會裝到最新版本了～就跟安裝 react router一樣…...
Read moremock API
一些不錯的站站 Mocky: The world easiest & fastest tool to mock your APIs response的參考： https://jsonapi.org/examples/...
Read moreJira使用
Epic：類似一個里埕碑，可以以小專案名命名（feature release）：odds Spread Setting, 帳戶中心、新增風控帳號… Components： 類似樂高積木，可以用模組命名，例如：API、UI、購物車… Label：類似關鍵字，hashtag，方便搜尋用 參考： http...
Read more抓不到新的套套
嘗試把npm 快取清一清、 Try npm cache clean --force if it doesn’t work then manually delete %appdata%\npm-cache folder. Node.js移除，重開機，就解決了*__* 我也有小改一下套件的p...
Read more英文詞彙使用範例搜尋
DeepL 查查綫上翻譯 xyz線上翻譯 Engoo Taiwan 英語 學習教材 Collins Online Dictionary | Definitions, Thesaurus and Translations...
Read moreHandle 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...
Read morereact.js PropTypes
導入這樣導： import PropTypes from 'prop-types'; // ES6 設定這樣設： CuteLuna.propTypes = { order: PropTypes.arrayOf(PropTypes.string), }; 各種類型： // array of strin...
Read more寫程式的心得
寫專案就像一堆小小的程式的集合。每個程式幾乎都可以拆開來變成一個小部份，一個小部份就像MDN看到的那樣，有時候會覺得寫一個小部份可以做到，但整合成一個大部份就覺得複雜亂亂。可能可以先想好每塊部份要怎麼寫，然後畫個流程圖，就會好寫很多。（流程圖是寫扣的流程圖） 不過以前的專案大多都是舊有專案要增加新功...
Read more敏捷開發筆記
敏捷其實不是代表快，它只是讓自己可以早點發現作品符不符合需求。 敏捷開發其實也可以當成一個自我管理的方法。 TASK想到什麼就加上去，不是一定只要做只有planning的時候開的需求。 你沒有去溝通的話，溝通是不會發生的。通常客戶把需求告訴PM後，PM如果吸收了百分之八十％算強了，他再傳給主管，主管...
Read morereorder list
export const langMapDataA = { sports: "Sports", casino: "Casino", esports: "E-Sports", }; const reCraftArray = Object.keys(viewLang).map((key) => ({ k...
Read moreArray.prototype.slice()
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] ...
Read more上傳圖片
純html＋JavaScript的圖片上傳功能很簡單，可以看這篇 How To Display Uploaded Image In Html Using Javascript ? 可是假設又有「拖曳上傳」需求的話，這篇就沒辦法滿足，所以用套件先擋擋...
Read morereact-select 小教學
react-select import React, { Component } from 'react' import Select from 'react-select' const options = [ { value: 'chocolate', label: 'Chocolate' }, ...
Read morepeerDependencies, devDependencies, dependencies
dependencies 跑這個程式需要的套件 devDependencies 開發的時候需要的套件，例如Jest之類的測試工具，但是執行的時候不需要（例如babel） peerDependencies 告訴安裝這個套件的人，需要自己安裝什麼套件 --save-dev 存到devDependenci...
Read morenpm 套件製作
6/16的時候開始研究怎麼做npm套件，爬了一些文章，發現網路很多文章沒有交代很多 細節，需要爬很多文章才知道怎麼做。 在babel編譯的過程中也蠻多問題的 如果使用create-react-app的話，babel的config這樣設定就好 "babel": { "presets": [ [ "re...
Read more
flex 必讀文章
A Complete Guide to Flexbox | CSS-Tricks A Visual Guide to CSS3 Flexbox Properties ― Scotch.io Flexy Boxes — CSS flexbox playground and code generatio...
Read more