[Web - Front end] 수정한 JS, CSS 파일이 적용이 안될 때

흔히 프로젝트를 진행하면서 WEB 서버에 반영한 JS나 CSS 파일이 적용 안되는 경우가 있다.

그 이유로는 브라우저 캐쉬에 적재된 이전의 JS, CSS 파일을 사용하기 때문이며, 다음과 같은 방법으로 해결이 가능하다.

 

㉮ 새로고침(F5) or 강력 새로고침(Ctrl + F5)

여러번의 새로고침 혹은 강력 새로고침을 통해서 반영이 가능할 수 있다

 

㉯ Disable Cache (단, 이 경우에는 반드시 개발자도구 창이 켜져 있어야 한다)

1) 크롬의 경우, Devtools 콘솔을 킨다

- 윈도우: F12

- MAC: option + command + i

2) 네트워크 탭으로 들어간다

3) 상단의 Disable Cache를 체크하여 캐시를 사용하지 않도록 한다

4) 새로고침을 누른다

 

㉰ 소스코드에서 작업

아래의 소스와 같이 파일명 뒤에 변수를 쿼리스티링 형태로 추가하여 브라우저가 기존 캐시에 있는 파일과는 다른 파일로 인식시킨다

[기존 정의]
<link href="./common/mbl/header.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./common/mbl/co/mbrLgn.js"></script>

[변경 이후 정의]
<link href=".common/mbl/header.css?dt=20210323" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./common/mbl/co/mbrLgn.js?testNm=3"></script>

 

필자가 추천하는 방법은 ㉰ 소스코드에서 작업

이유:

㉮ 와 ㉯의 경우, 웹에서만 가능하다는 단점이 있다. 따라서 하이브리드 앱과 같은 경우, 앱에서는 별도의 캐시삭제가 요구된다. 하지만 ㉰의 경우, 별도 캐시삭제가 요구되지 않는다는 점에서 실제 서비스에 가장 적합한 방법이라고 생각한다.

 

 

[참고한 자료]

- kanu.tistory.com/30

- www.scorchsoft.com/blog/force-chrome-clear-cache/