코딩하는 고릴라

기존에 Map 객체를 활용해 API 응답 데이터 캐싱 로직을 구현했었습니다.const cacheData = API_CACCHE_DATA.get('http://localhost:8080/api/team'); if (!cacheData || cacheData.exp { // 캐시 데이터 설정 {data, exp} API_CACHE_DATA.set('http://localhost:8080/api/team', { data: res.data, exp: new Date().getTime + 1000 * 60 * 10, }) // 응답 데이터 활용 console.log..

** 원인 파악중인 에러로 아직 해결하지 못했습니다,,, 🦙 WHY- 프로젝트 진행 과정에서 특정 PC에서만 렌더링 오류가 발생하는 버그를 마주쳤습니다. - 오류가 크게 발생하는 PC는 GPU 성능이 우수한 PC로 GPU 성능이 낮은 PC보다 훨씬 더 눈에 띄는 렌더링 오류가 발생했습니다. -> 성능 낮은 PC에서는 계속해서 윈도우 리사이징을 반복해야 GPU 사용률이 상승하는 정도이나 성능이 좋은 PC에서는 input에 텍스트를 입력할 때 화면 일부가 사라져 보이는 등의 심각한 에러가 발생했습니다. - 여러 스타일이 적용된 가상 요소 ::after를 적용시킨 페이지에서 렌더링 오류가 발생했으며, 리플로우와 리페인트 과정에서 GPU 점유율이 크게 뛰는 원인을 파악하기 위해 여러 시도들을 진행했습니다. 🦓 ..

🐶 WHY 기존 프로젝트에서는 디렉토리 구조를 크게 [assets / pages / components]로 구성하였습니다. pages 폴더 내부에는 URL 라우팅에 따라 출력될 페이지들을, components 폴더 내부에는 해당 pages 내부에 들어갈 컴포넌트들을 작성했습니다. 이 과정에서 UI와 로직을 담당하는 함수들을 분리해놓지 않아 한 파일 내에 너무나도 많은 코드들이 얽혀있어 필요한 부분을 찾는데 다소 어려움을 겪었습니다. 이와 같은 어려움을 해소하기 위해 어떤 방법이 있나 찾아보던 와중 FSD 아키텍처를 알게 되었고 이를 간소화하여 프로젝트에 적용해보았습니다. 🦍 WHAT FSD(Feature-Sliced Design, 기능 분할 설계) 아키텍처는 크게 Layers, Slices, Segmen..

🕊 배경 프로젝트 진행 중 동일한 요청에 동일한 응답을 받아오는 API 요청을 계속해서 전송하는 경우가 있었습니다. 따라서, 불필요한 API 요청 횟수를 줄이기 위한 방법을 고민해보고 프로젝트에 적용해 보았습니다. 🦙 내용 1. 기존 로직 - API 요청이 필요할 때 마다 요청을 보내고 그 응답 데이터를 활용 - 매 번 API 요청을 하기 때문에 불필요하게 많은 횟수의 API 요청 가능성 2. 개선 로직 - API 요청이 필요한 상황에 캐시 데이터 체크 - 캐시 데이터에 필요로 하는 요청에 대한 응답값이 저장되어 있다면 캐시 데이터 활용 - 캐시 데이터에 필요로 하는 요청에 대한 응답값이 없다면 API 요청 2-1. 캐시 데이터 체크 로직 // API_CACHE_DATA: API 요청에 대한 응답 값을 ..