캐시 무력화 질문입니다
482
投稿した質問数 10
이미지 파일의 파일명을 지정해줄 때 쿼리스트링으로 해시값을 설정해주는 이유가 궁금합니다! 배워가는 단계라 어떠한 이점이 있는지 모르겠습니다..
回答 3
8
브라우저의 동작을 좀 살펴보는 것이 좋습니다. 브라우져는 html과 여기에 포함된 정적리소스(js, css, image, font)를 추가로 다운로드합니다. 이렇게 브라우져에 다운로드하는 파일은 캐쉬 정책에 따라 활용되고요.
가령 24시간동안 캐쉬하도록 설정되어 있다고 가정해 보죠. 24시간 내에 이 페이지를 다시 접속하면 서버에 리소스 요청을 하지 않습니다. 이미 다운 받은 파일을 사용하는 것이죠.
다시 질문으로 돌아가서. 웹팩으로 빌드한 파일을 서버에 배포했는데 캐쉬 정책에 의해서 브라우져가 이미 다운로드한 이전 버전의 파일을 사용하게 되면 배포한 파일을 볼 수 없을 겁니다. 그래서 빌드할때 쿼리 스트링을 붙여주는데요. 브라우져는 "파일명 + 쿼리 스트링"(이것을 uri라고 합니다)을 기준으로 파일을 캐쉬하기 때문에 쿼리스트링이 변경되면 새로운 파일로 판단합니다. 그럼 브라우져에 다운로드한 파일을 무시하고 서버로 새로운 요청을 보내겠죠.
답변이 되었는지 모르겠네요.
지금 시점에서 해당 강의를 듣는 것에 대하여
1
111
3
2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)
1
223
1
에러 해결 공유드립니다
1
224
2
webpack 4 버전과 호환되는 플러그인 버전 공유드립니다
1
233
2
eslint
0
380
3
도와주세요!
0
167
2
[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전
1
145
1
질문 an error occurred while loading the image
1
469
1
webpack에서 babel-loader 사용할때 질문
1
150
1
자주 사용하는 플러그인 에서 질문이 있습니다.
1
168
1
eslint no-extra-semi 관련 질문
1
144
1
webpack5 에서 open index.html하는법 + 질문
1
167
1
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
2
302
1
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
1
371
1
에러없이 png안뜨시는 분들
1
274
1
Error: Cannot find module 'node:crypto'
1
464
1
DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함
1
406
1
깃허브 확인 문의
0
575
1
폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문
0
405
1
해쉬값과 캐쉬 갱신
1
461
1
Hash 에러 발생
1
2667
2
webpack.config.js에서의 CommonJS방식에 대한 질문
0
831
3
웹팩 버전
0
524
1
웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?
0
484
1