TIL 21.10.1

CORS

localhost 로 개발할때 CORS 정책위반으로 오류가 발생하여, webpack 환경설정을 진행할 필요가 있었습니다.

yarn eject 를 통해 CRA 로 hidden 처리된 사항을 풀어주어,
config/webpack.config.js 의 파일이 생성이 되도록 함.

/src/setupProxy.js 파일 생성하여 아래처럼 추가하여,

const { createProxyMiddleware } = require("http-proxy-middleware");

// src/setupProxy.js
module.exports = function (app) {
  app.use(
    "/community",
    createProxyMiddleware({
      target: "http://localhost:5000", // 비즈니스 서버 URL 설정
      changeOrigin: true,
    })
  );
};

community/* 의 모든 경로 요청에 대해서 origin 을 https://localhost:3000 으로 요청한것처럼 프록싱을 해주겠다는 의미임.

useMemo, useCallback

 const memoizedValue = React.useMemo( () => computedExpensiveValue(a,b,[a,b]);   

dependency 인 a 와 b 값이 변하지 않는다면, 이미 계산되어진 값(캐싱된) 을 사용한다.

useCallback 은 useMemo 와 상당이 유사하지만, 함수를 캐싱해놓느냐 값을 캐싱해놓느냐에 따라 구분이 된다.

useMemo 가 memoized value 라면 useCallback 은 memoized function 이다.

 const memoizedFunction = React.useCallback( (name: string) => {
   foo(name);
 });