[TIL] 2021.05.16 - 부제 : LRU 알고리즘, 버그의 늪, TDD의 필요성

블로그에 꽤나 오랫동안 손을 못대고 있었던 것 같다.

무한 과제 지옥 + 버그 지옥 + 운동 중독 + 그 외

위 4가지 조건이 내 일상을 타임랩스로 만들었다.

입사 후 두달. 짧다면 짧은 시간인데 공적, 사적으로 정말 많은 일들이 있었던 시기가 아니었나싶다.

오늘은 일요일이라 헬스장도 안 열고..비와서 런닝도 못하고..나가기도 싫고..오랜만에 블로깅을 해보려고 한다.

일단 회사에서 본격적인 서비스 리뉴얼 + 서비스 확장의 기간을 보냈는데  (아직 안 끝남) 그 중 제일 기억에 남는 작업이 있었다.

며칠이면 끝낼 수 있지 않나 했던 작업이었는데, 무수히 많은 엣지 케이스, 코드 퀄리티, 알고리즘과의 씨름이었다.

머지까지 약 13일 정도의 기간이 소요되었다.

어떤 작업이었냐 하면,

기존에는 특정 페이지 접속 시 > 데이터 요청 > 응답 > 렌더링 : 데이터가 5 ~ 600kb 사이즈이다 보니 로딩에 5초 이상의 시간이 소요 되는 문제가 발생

서버에서 데이터 용량을 줄이는 데에 한계가 있어 클라이언트에서 내부 로직을 설계해서 처리를 해야 했었다.

이를 해결하기 위해 특정 조건을 걸고, 조건에 해당하는 상태가 된다면 모든 데이터를 미리 localStorage에 저장해 놓은 뒤, 특정 페이지 접속 > localStorage에 저장되어 있는 데이터로 바로 렌더링하는 작업이었다.

저장하는 것 까진 간단하게 해결할 수 있을 것이라고 생각했었는데, 일부 데이터가 저장되지 않는 문제가 발생했었다.

이는 localStorage limit memory, 로컬스토리지 최대 저장 용량과 관련이 있었는데, 실행 브라우저에 따라 해당 도메인에 제공되는 용량이 제한되어있기 때문이었다.

용량이 제한되어 있기 때문에 데이터의 우선순위를 정해 저장하는 로직이 필요했다. 

LRU (Least Recently Used) 페이지 교체 알고리즘

- 가장 오랫동안 참조되지 않은 데이터를 제거

LRU 알고리즘으로 데이터를 관리하는 로직을 만들었다.

• 1. 유저가 가장 최근 참조했던 데이터 확인 + 필터링
• 2. 내부 특정 조건을 만족하는 것들에 대해 우선순위를 부여하며 데이터 필터링
• 3. 남은 데이터 확인 + 필터링
• 4. 저장되어 있지 않은 데이터에 유저가 접근 > 가장 오랫동안 참조되지 않은 데이터 제거 > 접근한 데이터를 저장

...

이 외 다양한 조건들에 맞게 필터링 + 정렬 + 가공 등을 했었는데 localStorage에 대해 좀 더 공부할 수 있는 계기가 되어 너무 좋은 경험이었던 것 같다. 

외적으로 보이는 요소가 아닌 데이터 처리에 대한 작업이었기때문에 정말 무수히 많은 디버깅을 시도 했었는데, 이 코드를 수정하면 저기가 터지고 저기를 막으면 여기가 터지고 코드가 지저분한 것 같아서 좀 줄이면 타입스크립트가 기가 막히게 에러를 내뿜는다던가 시크릿 모드에서 작동이 안된다던가.. 목업 데이터를 넣었다가 뺐다가 이랬다가 저랬다가 왔다 갔다

정말 이래서 TDD를 하는구나 싶었다. 내부적으로 시간 여유가 없어 개발에 테스트 코드를 추가하지 못하는 상황인데 나중에 여유가 조금 생긴다면.. 바로 도입했으면 좋겠다.

그리고 지저분한 코드에 인내의 맘을 갖고 코드 리뷰를 해주신 선배님께도 정말 감사했다. 

스택 오버플로우가 존재하는 시대에 살고 있음에도 감사하고.. 

위에서 말했다싶이 내부 코드에 대한 이해를 더 할 수 있는 좋은 시간이었고, LocalStorage에 대해 알게 된 게 좀 많아서 이는 따로 포스팅을 할 생각이다. 

다음 주부터 단독 리뉴얼 작업에 들어가게 돼서 일부 나온 디자인으로 잠깐 작업을 하다가 금요일에 퇴근했었는데...역시...너무 재밌다.......천직이다.......

아 그리고 '우아한 테크러닝 4기'에 지원했다. 결과는 아직 안 나왔지만, 통과한다면 그 또한 좋은 배움의 기회가 되지 않을까 기대가 있다. 

내일부터 또 찢으러!  :fire: