React 빌드에서 캐시 자동 무효화

브라우저에는 정적 파일 캐싱 문제가 존재한다는 것을 이미 알고 계실 것입니다. 문제의 핵심은 성능 향상을 위해 브라우저가 스타일시트, 스크립트, 이미지 파일들을 캐시한다는 점입니다.

이는 호스팅에서 스크립트나 스타일을 변경하더라도, 변경 사항은 새로운 사이트 방문자에게만 나타나고, 이전에 사이트를 방문한 적이 있는 기존 방문자는 캐시된 코드 버전을 보게 될 것임을 의미합니다. 이는 당연히 허용될 수 없습니다.

다행히도, React에서는 이 문제가 자동으로 해결됩니다. 해결 방법은 빌드 파일이 이름과 확장자 외에도 해시라고 불리는 임의의 문자열을 포함한다는 점입니다. 이 해시는 파일 내용에 대응됩니다. 이는 파일 내 코드가 변경될 때마다 파일 이름의 해시도 변경됨을 의미합니다. 따라서 브라우저는 이를 새로운 파일로 인식하고 다운로드하게 됩니다.

index.html에서 파일을 연결할 때 파일 해시를 확인할 수 있습니다: