코딩하는 고릴라

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