科技

peerDependencies, devDependencies, dependencies

2020年6月17日

dependencies 跑這個程式需要的套件 devDependencies 開發的時候需要的套件，例如Jest之類的測試工具，但是執行的時候不需要（例如babel） peerDependencies 告訴安裝這個套件的人，需要自己安裝什麼套件 --save-dev 存到devDependenci...

安裝套件

2020年6月16日

npm install git+https://git….....

npm 套件製作

2020年6月16日

6/16的時候開始研究怎麼做npm套件，爬了一些文章，發現網路很多文章沒有交代很多細節，需要爬很多文章才知道怎麼做。在babel編譯的過程中也蠻多問題的如果使用create-react-app的話，babel的config這樣設定就好 "babel": { "presets": [ [ "re...

How to clean npm cache

2020年6月16日

Just paste it: npm cache clean -- force...

How to Update npm Packages to their Latest Version

2020年6月15日

delete the package key/value in package.json reinstall it !...

webstorm React snippets

2020年6月10日

為了開發方便還是記一下好了！...

flex 必讀文章

2020年6月9日

A Complete Guide to Flexbox | CSS-Tricks A Visual Guide to CSS3 Flexbox Properties ― Scotch.io Flexy Boxes — CSS flexbox playground and code generatio...

react 視覺化工具

2020年6月8日

https://github.com/react-component/spider...

promise

2020年6月5日

promise是一個根據你給的callback function回傳的物件．callback在目前的promise沒跑完前，絕對不會執行．在then()裡的callback，不管promise有沒有成功，絕對會執行參考文章： Using Promises...

react 不錯用的咚咚

2020年6月5日

react-spring/react-spring...

slick react jest

2020年6月4日

在react裡使用slick.js雖然簡單又方便，可是加入Jest snapshot test就錯誤百出了，亂試了一下解決方法。第一個錯誤解決了之後又有其它的錯誤。第一個錯誤可以從issue看到有人也有一樣問題 Testing with Jest causes error #472 Jest te...

Jest手把手教學

2020年6月3日

首先開啟一個資料夾，乃做做Jest的測試。 mkdir jest-try 開啟好資料夾，在裡面開新專案 npm init -y 接下來就可以安裝Jest yarn add --dev jest 安裝好之後要幹麻？寫一個JavaScript檔案囉！開一個檔案叫 double.js function ...

storybook

2020年6月1日

利用storybook可以更直觀的知道元件在各種UI互動狀態下應該怎麼呈現！下面的那些就是stories啦！下面這三個就是它的test cases title（螢光筆劃線的地方）不能重複 title在這裡定義(export default是寫metadata的地方) Task.stories.j...

JavaScript需定期複習的觀念

2020年5月31日

什麼是deep copy、shallow copy ？ call、apple的原理及使用 Function.prototype.call() Promise...

JavaScript 字串轉成數字

2020年5月27日

parseInt() parseFloat() Number()...

英文句句背

2020年5月27日

Both ways work. 兩個方法都行。...

JavaScript var v.s let

2020年5月24日

const arr1 = []; for(var i = 0; i < 3; ++i) { arr1.push(() => i); } const arr2 = arr1.map(x => x()); const arr3 = []; for(let i = 0; i < 3; ++i) { arr...

2020面試心得

2020年5月18日

《華奧科技有限公司》一開始先簡單的自我介紹一下，我覺得我在講工作的部份應該再講仔細一點，例如前幾年比較多工作在切版、做特效，用jQuery維護網站，這幾年用的是前端框架，學習它的ecosystem，也會不時上網查看新知應該說明一下我除了工作之外還會多上網看有出什麼新東西… 1. React....

react-addons-update

2020年5月15日

react-addons-update 這個套件legacy嘍，要做新專案可以改用 immutability-helper 可以解決深淺拷𢭲的問題，這本書有寫一個應用例子： ReactJS by Example – Building Modern Web Applications wi...

deep copy & shallow copy

2020年5月15日

A deep copy means that all of the values of the new variable are copied and disconnected from the original variable. A shallow copy means that certain...

moment.js

2020年5月6日

const yes = moment().subtract(3, 'days').startOf('day'); const no = moment().subtract(1, 'days').endOf('day'); 最後面沒加 .format() 的話，出來的是物件，想要有字串或時間，要加上 ...