[Error] LocalStorage 용량 에러 극복기

고객에게 서비스 제공중에 갑자기 에러가 났다!!!

이런적이 없었기 때문에 매우 당황...

B2C에서 에러관련 문의가오면 등줄기가 서늘해진다..

대략적으로 확인했을 때 화면 전환시에 필요한 데이터를 못들고가는 현상같았다.

console을 보니 localStorage setItem에서 에러가 나고있었다.

 

간헐적으로 에러가 나길래 원인을 분석해보니

localStorage 용량 문제였다.

LocalStorage의 최대 용량은 5MB인데 첨부파일이 5MB를 넘어버린것이다.

 

몇가지 대안을 생각했다.

1. IndexedDB로 대체

2. history.push 할 때 props로 넘겨주기

3. redux에 저장했다가 불러오기

 

로직을 살펴보니 복잡하게 할 필요가 없이 history.push에서 넘겨주면 됐어서 2번을 선택했다.

그럼 진작에 이렇게하지 왜 굳이 localStorage에 저장했었을까?

=> 다른 동료에게 물어보니 기획이 바뀌었던것 같았다.

오래전에 짰던 코드다보니 정확히 기억은 잘 못하는것 같았다.

 

하지만, 저장 방식을 바꾸는것이기 때문에 코드분석을 꼼꼼히 하고 

정말 history.push props로 대체가 되는지 QA도 열심히 해서 결국 운영에 배포하여 에러를 수정했다.

 

※프론트엔드의 에러는 고객과 직접적으로 맞닿기 때문에 기획이 바뀐다면 해당 기획에 맞춰서 원래 있던 코드를 사용해도 괜찮은지 확인 해봐야한다는걸 깨달은 하루였다.