qkreltms

/*
  Let't start
  1. Create a vue project with vue-cli 
  2. npm i xlsx
  3. copy below code & paste to App.vue
  4. npm run dev
  
  Here are links that I referenced to make this code.
  SheetJS: https://github.com/SheetJS/js-xlsx
  Drop & Drag: https://codepen.io/Event_Horizon/pen/WodMjp

qkreltms

export const throttle = (() => {
  let isWaiting = false;
  return (callback: () => void, delay = 100) => {
    if (isWaiting) {
      return;
    }
    isWaiting = true;
    setTimeout(() => {
      callback();
      isWaiting = false;

qkreltms

const CountButton = React.memo(function CountButton({ onClick, count }: any) {
  return <button onClick={onClick}>{count}</button>;
});
function DualCounter() {
  const [count1, setCount1] = React.useState(0)
  const [count2, setCount2] = React.useState(0)
  const increment1 = React.useCallback(()=>setCount1(c => c + 1),[]) 
  const increment2 = React.useCallback(()=>setCount2(c => c + 1),[])
  const h=[]
  for(let i=0;i<100;i++){

qkreltms

Redux Persist를 소개합니다.

Redux Persist란 무엇인가?

흔히 여러 컴포넌트를 거치지 않고 손쉽게 state를 전달하기 위해 혹은 분리해서 중앙화 하기 위해 Redux를 사용합니다. 하지만 이 state는 인터넷창의 새로고침 버튼을 누르거나 종료하는 순간 초기화 되고 맙니다. 초기화를 방지하기 위해서 흔히 Web storage(이하 storage라 지칭)에 저장하는데요. 이 것과 삭제 기능을 포함해서 Redux안에서 간편하게 하게 할 수 있는 라이브러리가 바로 Redux Persist입니다. 실제로 코드를 살펴보면 Redux store을 하나 더 만들어서 여기에 특정 state를 저장하고 특정 액션이 발동되면 직렬화(serialize)해서 storage에 저장, storage에서 역직렬화(deserialize)후 불러와 사용합니다.

사용법:

1.먼저 기존의 Reducer에 persistConfig를 만들고 persistReducer함수로 감싼다.

qkreltms

function CandyDispenser() {
  const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
  const [candies, setCandies] = React.useState(initialCandies)
  const dispense = React.useCallback(candy => {
    setCandies(allCandies => allCandies.filter(c => c !== candy))
  }, [])
  return (
    <div>
      <h1>Candy Dispenser</h1>
      <div>

qkreltms

function CountButton({onClick, count}:{onClick:()=>void, count: number}) {
  return <button onClick={onClick}>{count}</button>
}
function DualCounter() {
  const [count1, setCount1] = React.useState(0)
  const increment1 = () => setCount1(c => c + 1)
  const [count2, setCount2] = React.useState(0)
  const increment2 = () => setCount2(c => c + 1)
 return (

qkreltms

1. Let x be ? thisNumberValue(this value).
2. Let f be ? ToIntegerOrInfinity(fractionDigits).
3. Assert: If fractionDigits is undefined, then f is 0.
4. If f is not finite, throw a RangeError exception.
5. If f < 0 or f > 100, throw a RangeError exception.
6. If x is not finite, return ! Number::toString(x).
7. Set x to ℝ(x).
8. Let s be the empty String.
9. If x < 0, then

qkreltms

export interface WithWarnConfig
  extends Factory,
    Pick<ConfirmProps, "title" | "message"> {}

export const withWarn = (config?: WithWarnConfig): ConfirmProps => {
  return {
    ...config,
    contents: (onClickClose, onClickOk, contentMessage) => (
 &lt;&gt;

qkreltms

export interface ConfirmProps {
  afterClose?: () => void;
  onClickClose?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => void;
  onOk?: (
    event:
      | React.MouseEvent<HTMLButtonElement, MouseEvent>

qkreltms

const useModal = (
  isVisible: boolean
): [
  boolean,
  React.Dispatch<React.SetStateAction<boolean>>,
  (event: React.KeyboardEvent<any>) => void
] => {
  const [isOpen, setIsOpen] = useState(isVisible);