import React from 'react'; import { Loading } from "library"; const useLoading = (open) => { const progressLoading = () => ( ) return { progressLoading }; } export default React.memo(useLoading); function App(){ const { progressLoading } = useLoading(); } 위와 같이 되어있을때 매번 실행될텐데 커스텀훅에 React.memo로 필요하지않은 메모리제이션 코드를 추가해서 발생한 문제 React.memo 제거 후 정상 동작
참조: https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html 프론트엔드 개발환경의 이해: 린트 1. 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보프라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 jeonghwan-kim.github.io yarn add eslint prettier --dev eslint & prettier 설치 yarn eslint --init 위 명령어로 eslint 기초 설정 진행 yarn add eslint-config-prettier eslint-plugin-prettier --dev * eslint-c..
sass-loader 추가 후 빌드 에러 발생 { test:/\.(css|scss|sass)$/i, use: [ !devMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader' ] }, sass 추가 설치 후 해결 yarn add sass -d 참조: https://velog.io/@devstefancho/webpack-sass-loader-Error-Cannot-find-module-sass [webpack] sass-loader Error (Cannot find module 'sass') sass-loader를 사용하는데 error가 발생했다.현재 webpack.config.js의 sass-loadernode-sa..
문제 webpack.config.ts import path from "path"; module.exports = { mode: 'development', entry: { main1: './src/app.tsx' }, output: { path: path.resolve('./dist'), // 절대경로 입력 filename: '[name].tsx' }, module: { rules: [ { test:/\.css$/i, use: ['style-loader', { loader:'css-loader', }] }, { test:/\.(png|jpg)$/, loader: 'file-loader', options: { publicPath: './dist/', name: '[name].[ext]?[hash]', } }..
참조 : https://medium.com/benx-tech-blog/react%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%8D%BC%ED%8F%AC%EB%A8%BC%EC%8A%A4-%EA%B0%9C%EC%84%A0%EA%B8%B0-%EB%B6%80%EC%A0%9C-1000%EA%B0%9C-%EC%9D%B4%EC%83%81%EC%9D%98-%EC%95%84%EC%9D%B4%ED%85%9C%EC%9D%84-%EA%B0%80%EC%A7%84-%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A5%BC-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0-8403a6c47b1c React의 렌더링 퍼포먼스 개선기 (부제: 1000개 이상의 아이템을 가진 리스트를..