JS, TS 13

Disk Cache를 이해하고 다루는 법

00. 직면한 문제 아마존 S3서버에서 JSON파일을 받아 수정하고 다시 업로드를 해 조회하는 작업을 수행해야해습니다. 그러나 저장하고 업로드했는데도 이전 파일의 결과만을 받을 수 있었습니다. S3의 콘솔에 직접가서 확인해보니 변경사항은 잘 적용되어 있었는데도요! 어떻게 하면 새로 업로드한 파일을 가져올 수 있을까요? 01. 캐시 때문에 그렇습니다. 브라우저의 네트워크탭을 한번 확인해보겠습니다. 새 파일을 받아야하는 곳의 size of a file이 '(disk cache)'라고 나타는데요. 일반적으로는 네트워크 응답을 통해 다운로드한 파일의 크기가 표시되는 곳입니다. 즉 네트워크 응답으로 파일을 받은게 아니라 disk cache로 부터 파일을 받았다는 것을 알려주고 있습니다. 03. 디스크캐시 캐싱은 ..

JS, TS 2023.06.02

도커, nginx, Vue환경에서 "WebSocket Connection to 'ws://some_ip/ws' failed" 에러해결

드디어! 오랜 문제를 해결했습니다. 절대로 해결하지 못할 것 같던 문제를 해결하고 공유하게 되어서 기쁘네요 ㅎㅎ 어쩌다 이런일이? 도커환경에서 nginx를 사용하여 여러 서버들을 운용하고 있었는데, Vue 또한 그랬었죠. 도커의 Node 버전을 올림에 따라 Vue의 버전도 2.5.x에서 2.6.x 버전으로 그에 맞추어 업그레이드 해야만했습니다. 그리고 문제를 만나버렸습니다. 다른 것들은 괜찮았는데 HMR(Hot Module Replacement)가 제대로 동작하지 않았고 브라우저 콘솔에는 "WebSocket Connection to 'ws://some_ip/ws' failed~" 에러메시지만 나타났을 뿐이였습니다. 개발환경과 설정 Mac OS Docker and Nginx Vue 2.6.x (using ..

JS, TS 2023.06.02