[django + s3] 장고에서 정적 파일 반영 후에도 바로 적용되지 않는 오류 해결하기

 

안녕하세요

 

 

오늘은 장고에서 정적(static) 파일을 갱신할 때 발생하는 오류에 대해 알아봅시다.

 

사실은 굳이 장고에 국한되지 않고, 정적 파일을 웹 서버에 올리는 방식이라면 어떠한 환경에서도 발생할 수 있습니다.

 

 

백엔드 세팅 시에 정적 파일을 어떻게 처리할 것인지 설정을 했을 겁니다.

 

보통은 스태틱 파일을 웹 스토리지에 배포 하고 이를 꺼내오는 방식을 주로 사용하게 됩니다. 따라서 로컬에서 static 파일,

 

예를 들어 css파일을 수정한다고 쳐도 바로 반영이 되지 않고 이 웹 스토리지에 적용해 주는 작업이 필요합니다.

 

이러한 과정에서 저는 웹 스토리지로 amazon s3을 사용하였고, 정적 파일을 업로드 할때

 

python manage.py collectstatic 명령어를 이용하여 s3에 배포하는 과정을 거쳐야만 static이 적용될 겁니다.

 

보통 장고에서 정적 파일을 수정하실 때 이런 방법을 많이 이용하실 텐데요..

 

저도 그동안 오류 없이 잘 써먹었습니다.

 

 

---

 

<상황>

 

하지만, 어제 우리 디자이너님이 청천벽력같은 소리를 하셨습니다.

 

'준님, 전달받은 이미지 수정 반영한 스크린샷이 실제 페이지에는 적용이 안 되어 있는데요?'

 

순간 제가 배포를 잘못했나? 브랜치 머지나 커밋을 잘못했나? 한참 고민을 했습니다.

 

찾아보니 단순한 브라우저 캐시 문제인데요, 해결하고 굉장히 현타가 왔습니다 

 

 

웹 캐시 

사용자가 웹 사이트(Server)에 접속할 때, 정적 컨텐츠(image, Html, Css 등)를 특정 위치에 저장하여, 웹 사이트 서버에 해당 컨텐츠를 매번 요청하여 받는 것이 아니라, 특정 위치에서 불러옴으로써 사이트 응답시간을 줄이고, 서버 트래픽 감소 효과를 볼 수 있는 것 

(출처: https://sangcho.tistory.com/entry/%EC%9B%B9-%EC%BA%90%EC%8B%9C)

 

브라우저는 처음 들어가는 페이지에 진입할 때 그곳에 존재하는 정적 파일(images, js, css)등을 로드합니다.

 

다음 번에 다시 그 페이지에 진입하였을 때, 정적 파일에 변동사항이 있다면 다시 로드하겠죠.

 

하지만 위의 설명대로, 서버 트래픽 감소를 위해 '매번' 받아오는 게 아니라 '특정' 시점에서 받아오게 됩니다.

 

이렇기 때문에 (특히나 이 사이트에 많이 접속한 사람이라면 더욱)  브라우저에 캐시가 쌓이게 되면, 이런 정적 파일 로드를 브라우저가 눈치껏(?) 하지 않는 현상이 발생합니다.

 

나는 바로바로 결과를 보고 싶은데 브라우저는 느릿느릿... 천천히... 로드해야지... 이러고 있는거죠

 

 

 

 

이럴때는 단순히 브라우저 캐시를 밀어주면 되는데요.

 

크롬

방문 기록 -> 인터넷 사용 기록 삭제 -> 이미지 캐시 삭제

 

사파리

설정 -> 방문 기록 및 웹 사이트 데이터 지우기

 

 

 

 

 

혹은 클리어 캐시 단축키를 이용해도 되는데요.

 

맥의 경우 cmd + shift + r

 

윈도우의 경우 ctrl + shift + r로 밀어주면

 

캐시를 클리어하고 페이지를 로드하게 됩니다.

 

 

 

 

 

 

별거 아니지만 저 같은 초보 프론트 개발자에게는 접하기 낯선 오류였습니다. 

로컬에서는 멀쩡하게 되다가 배포를 하는 순간 안되는 경우도 많았거든요 ㅠ ㅠ

구글링해도 깔끔하게 나오지 않는 부분이라 많은 참고가 되었으면 좋겠습니다.

 

이상으로 포스팅을 마칩니다