[React] 리액트 Cache Busting 관련 문제 해결법

리액트 프로젝트를 서버에 올리면 항상 브라우저를 매우 강력하게 새로고침을 해야하는 불편함이 있다. 따로 개발자 모드 화면에서 캐시를 사용하지 안기로 한게 아니라면 일반 새로고침으로는 반영 하기가 어렵다.

해결방법은
서버에 반영되는 파일이 기존의 파일과 다르다고 인식하게 하면 됩니다.
그래서 웹팩에서 번들파일 생성시, 생성되는 이름을 매번 다르게 해주면 반영이 되면 파일명이 다른걸 인식하고 새로 내려받는 과정을 거치게 된다.

아래와 같이 webpack.config.js 파일을 아래와같이 변경해주면 된다.

output: {
	path: path.join(__dirname, '/src/'),
	filename: '[name].[chunkhash:8].js',
},

이렇게 하면 파일이 변경될때마다 hash값이 변경되면서 새로운 이름으로 번들파일이 생성되 서버에 반영되게 된다.