코딩하는 고릴라

🐶 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 요청에 대한 응답 값을 ..

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

🦍 상황- React-three/fiber를 활용하여 별이 떠있는 밤하늘을 3D로 구현해야했다. - 별들의 x, y, z 좌표를 계산해 하늘에 띄워야 했고, 별들을 잇는 선분들의 좌표 또한 필요로 했다.🐈 로직1. 별 띄우기1. 별자리 이미지를 구해온다 (스텔라리움) 2. 블렌더에서 해당 별자리 이미지를 배경으로 설정하고 별들이 위치한 곳에 구체(Sphere)를 위치시켜 X, Z 좌표를 구한다.3. 별들의 높이(Y 좌표)는 피타고라스 정리를 통하여 구한다. 4. 모든 별들의 X, Y, Z 좌표를 하드코딩하여 배열로 저장# data.js // position : 별 [x, y, z] export const position = [ // 0 URSA MINOR 작은곰자리 [ [0, 35, 0], [-1.8, ..

🦍 상황 - Three.js(React-three/fiber)를 활용한 프로젝트 진행 중, 특정 별자리내 모든 별의 불을 밝히면 해당 별자리를 선명하게 표현해야 하는 기능을 구현했어야 했음 🐌 로직 1. 별자리 형성 여부 체크 - 모든 별들의 등록 상태를 담고 있는 누적합 세그먼트 트리 생성 - 등록된 별의 경우 point update를 이용해 해당 별의 정보를 담고 있는 리프노드의 값을 1로 설정 - 별자리 형성을 체크할 때는 range query를 활용해 해당 별자리 내 별의 개수와 등록된 별 개수를 비교, 일치할 때 별자리 형성 2. 별자리 형성 여부에 따른 props 전달 및 react-three/fiber 오브젝트 속성 제어 - GroupStar 컴포넌트 레벨에서 해당 별자리의 생성 여부를 체크..

🎃 상황 게시글 작성 기능을 만드는 도중 작성한 게시글에 대한 기본적인 정보(게시글 내용, 작성일자, 작성자 등)와 첨부된 사진파일을 post요청을 통해 전송해야했고, 두 번에 걸쳐 따로 보낼 수 있었으나 이는 비효율적이라 생각해 개선 필요성을 느낌 🎀 로직 - 게시글 정보를 담고 있는 객체 data와 첨부파일 정보를 담고 있는 배열 files를 하나의 FormData에 담아 백엔드단에 전송 - FormData에 객체 정보를 담기 위해 객체를 Blob의 형태로 변환 🎨 코드 // 새로운 FormData 생성 const formData = new FormData(); // 첨부파일 정보를 'files' 라는 이름으로 FormData에 저장 // (files: 첨부파일 정보를 담고 있는 배열) for (le..