네트워크 통신 및 캐싱 구현

✨네트워크 통신 및 캐싱 구현

안녕하세요 TriplexLab 입니다.
오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다.

👉🏻네트워크 통신

먼저 네트워크 통신은 하단에 영상 처럼
입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다.

👉🏻문제인식

근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고,
서버입장에서는 부담되는 일을 하는것입니다.

👉🏻문제해결

캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다.
처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다.

하단 영상을 자세히 보시면 오른쪽 검은창이 네트워크 통신하는 내역을 확인하는것이고, 왼쪽은 UI 화면입니다.

처음에는 '암, 질병'을 입력할때는 네트워크 요청을 하고 두번째로 '암, 질병'을 입력하면 네트워크 통신을 하지 않는것을 확인 할수 있습니다. 그리고 또 새로운 '간'을 입력하면 새로운 텍스트니깐 네트워크 요청 보내고 있죠.

이렇게해서 API 호출 최적화를 할수 있었습니다.

 

 

👉🏻브라우저 메모리 확인하기

아마도 이부분은 대부분의 사람들은 모르고 있을것 같아 생각합니다.
우리가 위에서 입력란에 텍스트를 입력하는것을 메모리에 저장이 될것인데 그 메모리를 직접 확인할수 있는 방법입니다.

브라우저 메모리 내역 확인하기

검사요소에서 Memory 탭으로 이동해서 하단에 Take snapshot 버튼을 클릭합니다.

브라우저 메모리 내역 확인하기

그럼 Snapshot 1라는 파일이 생성합니다. 그리고 스크롤을 이동하시면 Map이라는 키워드를 찾을수 있습니다.
그 Map에 화살표를 클릭해서 펼처서 보시면 또 같은 레벨로 Map이 여러게가 있는데 그중에 최근(맨위) 화살표를 클릭해서 보시면

브라우저 메모리 내역 확인하기

table이 있는데 화살표를 클릭해서 스크롤을 좀 내리시면 하단에 이미처럼 방금 내가 텍스트로 입력한 글들을 확인 할수 있습니다.!!

브라우저 메모리 내역 확인하기

여기서 참고로 메모리에 저장될때는 '@숫자'이런식으로 저장이 되는데
이것은 고유한 숫자가 붙고 메모리에 저장되는 시점에 생기는 공간의 이름이라고 생각하면 됩니다.😃😃🔥🔥