if (!Object.is) {
  Object.is = function (x, y) {
    if (x === y) {
      return x !== 0 || 1 / x === 1 / y;
    } else {
      return x !== x && y !== y;
    }
  };
}

function is(x, y) {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    return x !== x && y !== y;
  }
}

function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true;
  //   is를 사용한 얕은비교
  if (
    typeof objA !== "object" ||
    objA === null ||
    typeof objB !== "object" ||
    objB === null
  ) {
    return false;
  }
  //  얕은 비교가 끝났는데 객체가 아니거나 null이면 false
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  // 객체의 key를 가져옴
  if (keysA.length !== keysB.length) return false;
  // key의 길이가 다를경우 false
  for (let i = 0; i < keysA.length; i++) {
    if (
      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
      // objB에 keysA[i]가 존재하지 않을 경우
      // objA[keysA[i]]와 objB[keysA[i]]가 is로 비교하였을 때 다른 값일 경우
      // false
    ) {
      return false;
    }
  }
  return true;
}

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

export function detectWebpSupport() {
  const image = new Image();
  // 1px x 1px WebP 이미지
  const webpdata =
    "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
  const callback = (event) => {
    if (result) {
      document.body.classList.add("webp");
    } else {
      document.body.classList.add("no-webp");
    }
  };
  image.onerror = callback;
  image.onload = callback;
  image.src = webpdata;
}

let str = "안녕하세요.";
console.log(str.slice(0, 1)); //안
console.log(str.slice(0, 2)); //안녕
console.log(str.slice(-3)); //세요.
console.log(str.slice(-3, -2)); //세

let str = "안녕하세요.";
console.log(str.substr(0, 1)); //안
console.log(str.substr(0, 2)); //안녕
console.log(str.substr(-3)); //세요.
console.log(str.substr(-3, -2)); //

let str = "안녕하세요.";
console.log(str.substring(0, 1)); //안
console.log(str.substring(1, 0)); //안
console.log(str.substring(0, 2)); //안녕
console.log(str.substring(-3)); //안녕하세요.
console.log(str.substring(-3, -2)); //

/** @jsxImportSource @emotion/react */

// config-overrides.js

const {
  useBabelRc,
  removeModuleScopePlugin,
  override,
} = require('customize-cra')

module.exports = override(useBabelRc(), removeModuleScopePlugin())
// .babelrc

{
  "plugins": [
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__to_avoid_prepending_/** @jsxImportSource @emotion/react */",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__to_avoid_prepending_/** @jsxImportSource @emotion/react */"
      }
    ]
  ]
}

import { useState, useEffect, useRef, useCallback } from "react";

function easeOutExpo(t) {
  return t == 1 ? 1 : -Math.pow(2, -10 * t) + 1;
}

export const useIncreaseNumber = (
  maxNumber,
  initialNumber = 0,
  duration = 2000
) => {
  const [curCount, setcurCount] = useState(initialNumber);
  const curTime = useRef(null);

  const step = useCallback((timeStamp) => {
    if (curTime.current === null) curTime.current = timeStamp;

    const progress = timeStamp - curTime.current;

    const nextCount = Math.ceil(
      (maxNumber - initialNumber) * easeOutExpo(progress / duration)
    );

    const nextCurCount = nextCount > maxNumber ? maxNumber : nextCount;

    setcurCount(nextCurCount);

    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }, []);

  useEffect(() => {
    window.requestAnimationFrame(step);
  }, []);

  return curCount;
};

import { useState, useEffect, useRef, useCallback } from "react";

function easeOutExpo(t) {
  return t == 1 ? 1 : -Math.pow(2, -10 * t) + 1;
}

export const useIncreaseNumber2 = (
  maxNumber,
  initialNumber = 0,
  duration = 1000,
  fpsHz = 1000 / 30
) => {
  const [curCount, setcurCount] = useState(initialNumber);
  const curTime = useRef(null);
  const lastTime = useRef(null);
  const cnt = useRef(0);

  const step = useCallback((timeStamp) => {
    if (curTime.current === null && lastTime.current === null) {
      curTime.current = window.performance.now();
      lastTime.current = window.performance.now();
    }

    const totalElapsed = window.performance.now() - curTime.current;
    // 총 실행시간으로 duration과 비교하여 rAF를 탈출하기위해 사용한다.

    if (totalElapsed > duration) {
      return;
    }
    // duration일경우 탈출

    const elapsed = timeStamp - lastTime.current;
    // 마지막 상태변경과의 시간 차이

    if (elapsed >= fpsHz) {
      // 마지막 상태변경과의 시간차이가 주사율 이상일 경우에만 값을 반영한다.
      const nextCount = Math.ceil(
        (maxNumber - initialNumber) * easeOutExpo(totalElapsed / duration)
      );
      // ease 함수를 이용하여 가중치를 계산하여 반영한다.

      const nextCurCount = nextCount > maxNumber ? maxNumber : nextCount;
      // 호출 횟수에 따른 보정을 해준다.

      console.log(++cnt.current);
      //   몇 번 렌더링 되었는지 출력한다.
      setcurCount(nextCurCount);
      //   state를 바꾼다
      lastTime.current = timeStamp - (elapsed % fpsHz);
      //   마지막 상태변경시간을 업데이트한다.
    }
    window.requestAnimationFrame(step);
  }, []);

  useEffect(() => {
    window.requestAnimationFrame(step);
  }, []);

  return curCount;
};
// cnt.current의 마지막 값은 29가 출력된다.

class Router {
  constructor() {}
  //  생성자
  initEvent() {}
  // 이벤트 초기화
  onRouterChangeHandler() {}
  //   route가 변경되었을 때의 이벤트 핸들러
  hasRoute() {}
  //   올바른 라우트인지 검증
  getRoute() {}
  //   해당 라우트 가져오기
  renderPage() {}
  //   페이지 렌더링
  push() {}
  //   라우터 push
}

constructor({
    $app,routes,fallback='/'
}){
    this.$app=$app;
    this.fallback=fallback;
    this.routes=[];

    routes.forEach(route=>{
        this.routes=[route.path]=route.page;
    })

    this.initEvent();
}

initEvent() {
  document.addEventListener(
    "moveRoutes",
    this.moveRoutesHandler.bind(this) as EventListener
  );
}

moveRoutesHandler(event: CustomEvent) {
  const path: string = event.detail.path;
  history.pushState(event.detail, "", path);

  this.renderPage(path);
}

export const customEventEmitter = (eventType: string, detail?: object) => {
  document.dispatchEvent(
    new CustomEvent(eventType, {
      detail,
    })
  );
};

hasRoute(path: string) {
  return typeof this.routes[path] !== "undefined";
}

getRoute(path: string) {
  return this.routes[path];
}

renderPage(path: string) {
  let route;
  const regex = /\w{1,}$/;

  if (this.hasRoute(path)) {
    route = this.getRoute(path);
    // 경로가 존재할경우
  } else if (regex.test(path)) {
    route = this.getRoute(path.replace(regex, ":id"));
    // 경로가 존재하지 않을 경우 동적 라우팅(id)
  } else {
    route = this.getRoute(this.fallback);
    // 그 외의 주소에 대해서는 fallback 실행
  }
    new route(this.$app, {});
    // route 객체의 인스턴스를 만듬
  }

push(path: string) {
  customEventEmitter("moveRoutes", {
    ...history.state,
    path,
  });
}

export let router;

export function initRouter($app, routes, fallback) {
  const routerObj = new Router($app, routes, fallback);

  router = {
    push: (path) => routerObj.push(path),
  };

  customEventEmitter(
    "moveRoutes",
    history.state ?? {
      path: "/",
    }
  );
}

const routes = [
  { path: "/", page: App },
  { path: "/detail/:id", page: Detail },
];

const target = document.querySelector(".App");
initRouter(target, routes);