React - 성능 최적화 (Cache Busting)

• 웹 페이지는 많은 파일들과 이미지들로 구성되어 있어, 매번 페이지를 새로고침할 때마다 이들을 읽어오는 것은 시간이 낭비될 수 있다. 이를 해결하기 위해 웹 브라우저는 캐시를 활용하여 이미 읽어온 파일들을 저장해두고, 다음번 호출 시에는 캐시에서 데이터를 바로 가져온다.

• 그러나 이러한 캐시 기능은 파일이 수정되었을 때 브라우저가 그것을 인식하지 못하면, 수정된 파일을 서버에 요청하지 않고 기존의 캐시된 데이터를 사용하는 문제가 있다. 이는 특히 리액트와 같은 SPA에서 치명적인 문제가 될 수 있다. 이를 해결하기 위한 방법 중 하나는 cache-control 부분에 no-cache를 사용하여 항상 서버에 요청하는 것이다.

• 캐시 버스팅(Cache Busting)은 웹페이지의 성능을 향상시키는 기법으로, 웹팩(Webpack)을 통해 파일명에 해시값을 추가하여 파일이 수정되었을 때 새로운 파일을 불러오게 한다.

• Nginx의 Cache-Control을 통해 max-age를 최대한(1년)으로 설정하여 성능을 최적화하며, 수정이 없을 경우 항상 캐시된 파일을 불러와 성능을 향상시킨다.