React 동적 이미지 캐시 무효화

오늘 했던 것

• 아티스트 팬레터 페이지 과제
• 배너 이미지와의 치열한 싸움
  사실 나만의 리그였다.

오늘 학습한 것

• 브라우저의 동적 이미지 캐싱 무효화

오늘 문제

• React의 메인 페이지에서
  디테일 페이지로 넘어간 후
  수정 || 삭제 작업을 하고 메인으로 돌아가면
  메인의 배너 이미지가 안 뜨는 문제.
• 분명 개발자 도구의 console 탭에도 배너 이미지가 찍히고,
  element 탭에도 정상적으로 background-image의 url이 제대로 찍혀 있다.

고민했던 것

• 혹시 내가 redux가 서툴러서
  reducer에서 불변성을 안 지키고 data를 처리했나?
• 이미지 url이 담긴 배열에서 랜덤으로 뽑아서
  동적으로 url 속성을 할당하는데 혹시 랜덤의 범위를 잘못 설정했나?
• 트릭인가? 컴퓨터가 나를 괴롭히는건가????????

마침내 떠오른 접근방법

• 브라우저의 캐싱에 대해 떠올랐다.
  혹시 동적으로 할당하는 이미지를
  이미 캐싱되어 있다고 인식하고 있어서
  동적으로 안 가져오나 싶었던 것이다.

해결방법

• 브라우저가 이미지를 캐싱 안 된 새로운 파일이라고 인식하도록
  img url 뒤에 임의의 값을 매번 새롭게 같이 할당해주는 것.

이렇게 하면 이미지의 동적 할당 캐싱 무효화를 성공적으로 할 수 있다.
이제 뒤로갔다, 앞으로 갔다, 왔다 갔다, 수정, 삭제 뭘 해도
계속 새로운 이미지가 동적으로 할당된다.

background-image: `url('assets/${props.$randomBack}?time=${new Date().getTime()}')`};

const BannerImg = styled.div`
  width: 100%;
  height: 100%;
  background-image: ${(props) =>
    `url('assets/${props.$randomBack}?time=${new Date().getTime()}')`};
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  animation: ${FadeAnimation} 1s forwards;
`;

느낀점

• 오늘 배운 브라우저의 작동 원리는 평생 못 잊는다.
  새로운 관점의 접근법을 찾아서 정말 기쁘다.