코딩하는 고릴라

https://openapi.nexon.com/ko/game/maplestory/?id=14 NEXON Open API | gameThis is a list of the games provided by NEXON Open API.openapi.nexon.com 메이플스토리에서 제공하는 open API를 활용한 프로젝트를 시작했습니다. Vite + Ts + Swc로 프로젝트를 구성했으며, [1] 디렉토리는 우선적으로 도메인 단위로 구분한 후, 세분화된 내용(component, hook, etc..)을 그 내부에 담는 방식을 활용했습니다.[2] 막상 해보려니 각각의 도메인에 특화된 컴포넌트들이 잘 떠오르지 않아 component, hook등을 우선적으로 나누는 방식을 활용하기로 변경했습니다.[3] 도메인처럼..

turborepo를 활용해 만든 next.js 프로젝트에서 blog 서비스에 대한 jest 테스트 실행 후 위와 같은 에러를 맞이했습니다. Page 컴포넌트 내에는 테스트용 Div 요소와 다른 패키지에서 가져온 Button 컴포넌트를 포함하고 있습니다. 에러 메시지를 토대로 예상했을 때, 서로 다른 패키지에서 작성된 컴포넌트를 하나의 패키지 내에서 렌더링 하려 했고, 각각의 패키지 내에 설치된 react의 버전이 다를 것이라 생각해 확인해 봤습니다. apps/blog/package.json "react": "19.0.0-rc-f994737d14-20240522", packages/ui/package.json "react": "^18.2.0", 페이지 컴포넌트가 존재하는 패키지와 Button 컴포넌트가 존..

🦍 Why프로젝트 진행 중, props로 전달된 값에 따라 div의 크기를 조절하는 스타일을 Styled-components를 활용해 작성했습니다. props로 전달되는 값은 수시로 변화하는 값이었으며, 이에 따라 무수히 많은 클래스가 생성되었고 이는 성능적 이슈를 일으켰습니다. 🐕 What기존에는 스타일드 컴포넌트가 어떤 원리로 동작하는지 이해하지 못했습니다. 이 문제를 해결하기 위해 크롬 관리자도구에서 DOM 요소를 확인해 봤을 때, 계속해서 클래스명이 변화하는 것을 통해 props가 변할 때 마다 새로운 클래스를 생성하고, 이를 적용시키는 과정이 반복됨을 확인했습니다. 따라서 계속되는 클래스 생성을 막으면 되지 않을까 생각했습니다. 문제 상황// 문제가 됐던 기존 코드// 스타일 코드export..

리액트 프로젝트를 진행하는데 있어 메모이제이션을 고려한 최적화는 생각해 본 적이 없었습니다. 이와 관련하여 성능적으로 보다 우수한 프로젝트를 진행해보고자 이에 대해 학습해 보았습니다. 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 ..