코딩하는 고릴라

** 원인 파악중인 에러로 아직 해결하지 못했습니다,,, 🦙 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 요청에 대한 응답 값을 ..

리액트 프로젝트를 진행하는데 있어 메모이제이션을 고려한 최적화는 생각해 본 적이 없었습니다. 이와 관련하여 성능적으로 보다 우수한 프로젝트를 진행해보고자 이에 대해 학습해 보았습니다. 1. React.memo() 첫번째로 React.memo()의 기능을 테스트를 통해 확인하였습니다. 먼저 React.memo를 적용시키기 이전입니다. App 컴포넌트의 state를 변경시켜 App 컴포넌트의 리렌더링을 일으켰습니다. 이 때 하위 컴포넌트인 Child 컴포넌트도 따라서 리렌더링 되는 것을 볼 수 있습니다. 다음은 Child 컴포넌트에 React.memo를 적용시킨 결과입니다. 이 때는 App 컴포넌트의 state를 변경시켜 리렌더링 시켜도 하위 컴포넌트인 Child 컴포넌트에서의 리렌더링이 일어나지 않고 있습..

🍕 에러 발생 시점 - react를 사용한 프로젝트 진행 중, 환경변수를 process.env로 접근하려 하자 위와 같은 에러가 발생했다. - 기존 프로젝트는 위와 같은 방법으로 진행했을 때 문제가 없었으나 현재 진행중인 프로젝트에서 문제가 발생했다. - 기존 프로젝트는 React 프로젝트 생성에 CRA를 사용했고 지금의 프로젝트는 직접 webpack을 설정했는데 이 차이에서 해당 에러의 원인을 찾아볼 수 있을 것이라 생각해 서치해봤다. 🍔 문제 해결 dotenv 라이브러리 설치 후 다음과 같이 코드를 작성해 해결했다. // webpack.common.js const webpack = require('webpack'); const dotenv = require('dotenv'); dotenv.config..

🦍 상황- 별을 클릭하여 게시글을 등록하거나 조회해야 하는데, 별의 크기가 너무 작아 클릭이 어려웠다. - 편의성 증대를 위해 별을 둘러싸고 있는 보다 커다랗고 투명한 구를 생성하여 클릭 시 편의성을 향상시켰다. - 이 때, 별과 별 사이를 잇는 별자리 선이 끝까지 이어지지 못하고 끊어져 보이는 렌더링 문제가 발생하였다.🐈 문제 원인 파악 및 해결 - 문제의 원인은 별을 잇는 선분과 별 주위 구체가 겹쳤기 때문이었다. 각 오브젝트들이 차지하는 공간은 다음과 같다. - 별을 잇는 선분과 클릭 편의성을 위해 만든 구체가 차지하는 공간이 겹쳐 일부는 제대로 보이고, 일부는 그렇지 않은 오류가 발생했다. - Material의 속성 중 depthTest라는 속성을 이용해 문제를 해결하였다. - depthTest ..