종종 웹 프로젝트를 진행하면서, 새로운 JS나 CSS 파일을 서버에 반영했음에도 불구하고 브라우저에서 이전 파일이 여전히 사용되는 문제가 발생된다.
이러한 문제가 발생하는 주된 이유는 브라우저가 이전에 다운로드한 파일을 캐싱하여 재사용하기 때문이다. 캐시는 성능 향상을 위해 사용되지만, 개발 중에는 새로운 코드나 리소스를 반영하기 위해 캐시를 무효화하는 것이 필요할 수 있다.
이러한 문제를 해결하기 위해 몇 가지 효과적인 해결 방법들을 소개한다.
1. 새로고침(F5) or 강력 새로고침(Ctrl + F5):
웹 페이지를 갱신하여 브라우저가 최신 파일을 가져오도록 하는 간단하면서도 효과적인 방법이다. 사용자 경험이나 앱 환경에서도 유용한 방법 중 하나이다.
2. Cache 비활성화 (개발자 도구 사용 필요):
- 크롬과 같은 브라우저에서 개발자 도구를 열고 네트워크 탭으로 이동한다.
- "Disable Cache" 옵션을 체크하여 캐시를 무효화하고, 그 후 페이지를 새로고침한다.
- 주의: 이 방법은 개발자 도구가 활성화되어 있어야 하며, 실제 사용자에게는 적용되지 않는다.
3. 소스코드에서 작업 (추천):
파일명 뒤에 변수를 쿼리스트링 형태로 추가하여 브라우저가 이전 캐시된 파일과 다른 파일로 감지하도록 하는 방법이다.
예시:
<!-- 기존 방식 -->
<link href="./common/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./common/script.js"></script>
<!-- 개선된 방식 -->
<link href=".common/style.css?dt=231206" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./common/script.js?dt=231206"></script>
위의 방법 추천 이유:
- 1번과 2번의 경우, 웹에서만 가능하다는 제약이 있다. 그에 비해 위의 방법은 웹 및 하이브리드 앱 등 다양한 환경에서 적용 가능하며, 별도의 캐시 삭제가 필요 없다.
웹 프로젝트에서의 파일 업데이트 문제를 유연하게 해결하기 위해 위의 방법들을 조합하여 활용해보자. 특히 소스코드에서의 작업은 다양한 환경에서 실용적이며, 업데이트 과정을 간편하게 만들어준다. 이러한 방법들을 적용하여 프로젝트의 성능을 최적화하자.
#Referecnes
반응형
'FrontEnd' 카테고리의 다른 글
| AJAX와 SPA, 차이점 (0) | 2023.05.22 |
|---|---|
| [오류해결] Browserslist: caniuse-lite is outdated. Please run 오류 (0) | 2022.12.19 |
| browserslist란? (0) | 2022.12.19 |
| 프론트 엔드의 상태(state)에 대해 (0) | 2022.12.05 |