React프로젝트 브라우저 캐시문제

이번 포스팅에선 프론트엔드 개발자로 실무를 경험하면서 만났던 브라우저 캐시문제에 대해 이야기 해보려 한다.

현재 회사에서 교육플랫폼을 서비스하고있는데 중간에 교육생들의 출석을 관리할수 있는 기능이 필요하여 급하게 기능을 추가하였는데 반영이 안되는 문제가 발생하였다.

브라우저에서 코드가 바뀐것을 감지하지 못하고 캐싱된 파일을 불러와서 적용이 안되는 문제였다.

개발자 도구에서 강력한 새로고침을 하면 해당 문제는 해결이 되지만 모든 교육생에게 “강력한 새로고침 부탁드립니다.” 라고 할수도 없지않은가.. 그래서 근본적인 해결방법을 찾기로 했다.

 

코드로 해결할 수 있는 방법들

1. Html 에 아래와 같은 캐시컨트롤을 넣어준다.
2. Cache-Control: no-cache, no-store, must-revalidate
3. 캐시에 expire 기간을 설정하여 해당 시간마다 새로운 코드를 반영하게 한다.

위 방법들은 별로 좋은 방법들은 아니다. 사용자가 브라우저를 사용할 때 마다 새로은 코드를 받아와서 적용해야 하므로 페이지 성능저하의 원인이 될 수 있다.

위 문제를 해결하고자 cache busting 기술을 사용하였다.

 

Cache Busting

Cache Busting 은 고유한 version identifier를 사용하여 브라우저에게 변경사항이 있음을 알려 새로운 버전을 받아 사이트를 업데이트 할수 있도록 유도할수 있는 기술이다.

Cache busting 에는 몇가지 방법이 존재하는데 본 포스팅에서는 파일네임에 versioning을 하는 방법을 사용하겠다.

react 프로젝트 에서 File Name Versioning을 사용하기 위해선 webpack 설정파일에 아래의 코드를 추가하면 된다.

module.exports = {
	...
 	output: {
		// 빌드시 build라는 이름 뒤에 청크해시를 붙임
		filename: "build.[chunkhash].js"
	},
	...
};

하지만 여기에서 한가지 문제가 생기는데 바로 CRA 로 만들어진 프로젝트 에서 웹팩의 설정을 하려면 eject를 해야하는데 eject을 하게되면 숨겨져있던 모든 설정파일이 나타나게 되어 가독성이 떨어지고 다시 원상태로 돌아갈수 없어 하지 않는것이 좋다고 한다.

 

그럼 어떻게 해?

react-app-rewired라는 라이브러리를 사용하면 CRA 로 만들어진 프로젝트에서 eject 없이 webpack 이나 babel을 설정할수 있도록 도와준다.

아래 예제코드에서 webpack설정파일에 필요한 설정을 오버라이딩 해보자!

프로젝트 최 상단에서 config-overrieds.js 라는 파일을 생성하고 아래 코드처럼 필요한 설정을 추가한다.

module.exports = function override(config, env) {
  return { ...config, output: { filename: "build.[chunkhash].js" } };
};

해당 예제에서는 Cache Busting을 위한 설정만을 추가하였으나 모든 webpack설정을 추가할 수 있다.

프로젝트를 다시 배포해보면 새로고침을 하지 않아도 변경사항이 잘 반영된다!