디버깅 (3) 썸네일형 리스트형 [Webpack5] webpack-dev-server 변경 사항 바로 반영되지 않을 때, 개발모드에서 live reloading, Hot Module Replacement, 새로고침 안 될 때. (웹팩 watchOptions) 타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중 평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️) 웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ? 문제 우리 webpack-dev-server는요... 개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는! 아주 유용한 도구라죠... 그런데 가장 핵심인 이 기능이 동작하지 않는다. 개발자 도구를 열어보면, 콘솔에 [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading e.. [React] Can't perform a React state update on an unmounted component. 에러 해결 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 위 에러는 컴포넌트가 언마운트 되어 사용할 수 없는데도 해당 컴포넌트의 state를 바꾸려고 했을 때 나타나는 에러다. 에러 메시지를 잘 읽어보면, 아무 실행도 되진 않겠지만, 어플리케이션의 메모리 누수가 발생할 수 있으니 useEffect의 cleanup 함수에 구독과 비동기 작업을 모두 취소하는 방식으로 고칠 수 .. [React] React 리액트 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. 에러 해결 const logOutButtonClickHandler = () => { localStorage.removeItem('jwt'); localStorage.removeItem('registerState'); location.reload(); }; react_devtools_backend.js:2273 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. → 로그아웃 이후 로그인 화면으로 돌아왔을 때 위와 같은 오류가 발생했다. 처음엔 화면이 전부 렌더되지 않았을 때 사용자가 시작하기 버튼 클릭 시 위와같.. 이전 1 다음
