브라우저 캐시 문제

브라우저는 연결된 CSS 스타일시트 파일, JavaScript 스크립트, 그리고 이미지를 캐시합니다. 캐싱이란, 브라우저가 사용자가 사이트에 처음 방문할 때만 연결된 파일을 다운로드한다는 것을 의미합니다. 이후 방문에서는 이 파일들을 다시 다운로드하지 않고, 브라우저의 캐시에서 가져옵니다.

캐싱은 유용합니다. 사이트 로딩 속도를 높이기 위해 만들어진 기능입니다. 브라우저가 매번 인터넷에서 파일을 다운로드하는 것보다 자신의 저장소에서 파일을 가져오는 것이 더 빠르기 때문입니다.

그러나, 이러한 속도 향상은 개발 시 불편함을 대가로 치르게 됩니다. 문제는 여러분이 코드를 수정한 후 변경사항을 호스팅에 업로드하면, 이미 여러분의 사이트에 방문한 적이 있는 모든 사용자들은 캐시된 이전 코드 복사본을 가지게 된다는 점입니다.

첫 번째 해결 방법

이런 현상을 방지하려면 변경된 파일마다 매번 이름을 바꿔야 합니다. 실제로는 이 방법이 불편하므로, 교묘한 방법이 사용됩니다. 핵심은 파일을 연결할 때 파일 이름 뒤에 물음표, 등호, 그리고 스크립트 버전 번호를 추가하는 것입니다. 이러한 구조를 GET 파라미터라고 합니다.

파일 이름에 GET 파라미터가 있다고 해서 서버 입장에서는 경로가 "손상"되지는 않으며, 여전히 동일한 파일을 가리킵니다. 그러나 브라우저 입장에서는 GET 파라미터를 변경하면 브라우저가 파일 경로가 변경된 것으로 간주하고 파일을 새로 다운로드하도록 강제합니다.

캐시 문제를 해결하기 위해, 코드 파일을 수정할 때마다 GET 파라미터 값을 1씩 증가시켜야 합니다. 다음은 이러한 접근 방식의 적용 예시입니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

두 번째 해결 방법

더 발전된 접근법도 존재합니다. 이 방법은 파일 이름에 무작위 문자열을 추가하는 것입니다. 예를 들면 다음과 같습니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

이 문자열들을 해시라고 합니다. 해시는 고유한 문자열입니다. 이는 파일 내용에서 특별한 방식으로 계산됩니다. 즉, 각 텍스트에는 고유한 해시가 대응됩니다. 파일 텍스트가 변경되면, 해시도 달라지며, 파일 이름에서 이를 변경해야 합니다.

물론, 수동으로 해시를 계산하고 파일 이름을 바꾸는 것은 좋은 방법이 아닙니다. 따라서 이 방법은 해시를 자동으로 계산하고 파일 이름을 변경하며, HTML 파일 내의 파일 이름도 새로운 것으로 변경할 수 있는 도구가 있을 때만 사용됩니다. 이 모든 것을 Webpack이 가능하게 합니다. 이것이 우리가 전체 교재를 통해 배울 내용입니다.