인프런 커뮤니티 질문&답변

찡태님의 프로필 이미지
찡태

작성한 질문수

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

자주 사용하는 로더

캐시 무력화 질문입니다

작성

·

352

2

이미지 파일의 파일명을 지정해줄 때 쿼리스트링으로 해시값을 설정해주는 이유가 궁금합니다! 배워가는 단계라 어떠한 이점이 있는지 모르겠습니다..

답변 3

8

김정환님의 프로필 이미지
김정환
지식공유자

브라우저의 동작을 좀 살펴보는 것이 좋습니다. 브라우져는 html과 여기에 포함된 정적리소스(js, css, image, font)를 추가로 다운로드합니다. 이렇게 브라우져에 다운로드하는 파일은 캐쉬 정책에 따라 활용되고요. 

가령 24시간동안 캐쉬하도록 설정되어 있다고 가정해 보죠. 24시간 내에 이 페이지를 다시 접속하면 서버에 리소스 요청을 하지 않습니다. 이미 다운 받은 파일을 사용하는 것이죠. 

다시 질문으로 돌아가서. 웹팩으로 빌드한 파일을 서버에 배포했는데 캐쉬 정책에 의해서 브라우져가 이미 다운로드한 이전 버전의 파일을 사용하게 되면 배포한 파일을 볼 수 없을 겁니다. 그래서 빌드할때 쿼리 스트링을 붙여주는데요. 브라우져는 "파일명 + 쿼리 스트링"(이것을 uri라고 합니다)을 기준으로 파일을 캐쉬하기 때문에 쿼리스트링이 변경되면 새로운 파일로 판단합니다. 그럼 브라우져에 다운로드한 파일을 무시하고 서버로 새로운 요청을 보내겠죠. 

답변이 되었는지 모르겠네요.

0

감사합니다 저도 궁금했는데 도움받고 가요!

0

찡태님의 프로필 이미지
찡태
질문자

감사합니다!! 이해되었습니다!

찡태님의 프로필 이미지
찡태

작성한 질문수

질문하기