[FE] 게시글 등록 상태에 따른 별자리 형성, 해제

🦍 상황

 - Three.js(React-three/fiber)를 활용한 프로젝트 진행 중, 특정 별자리내 모든 별의 불을 밝히면 해당 별자리를 선명하게 표현해야 하는 기능을 구현했어야 했음

 

🐌 로직

1. 별자리 형성 여부 체크

- 모든 별들의 등록 상태를 담고 있는 누적합 세그먼트 트리 생성

- 등록된 별의 경우 point update를 이용해 해당 별의 정보를 담고 있는 리프노드의 값을 1로 설정

- 별자리 형성을 체크할 때는 range query를 활용해 해당 별자리 내 별의 개수와 등록된 별 개수를 비교, 일치할 때 별자리 형성

---

2. 별자리 형성 여부에 따른 props 전달 및 react-three/fiber 오브젝트 속성 제어

- GroupStar 컴포넌트 레벨에서 해당 별자리의 생성 여부를 체크

- 별자리 생성 여부에 따른 boolean 값을 props를 통해 Line 컴포넌트로 전달

- transparent 속성과 opacity 속성을 활용해 별자리 선의 투명도 조절

    - transparent: true로 설정해 두어야 opacity 속성 조절을 통한 오브젝트 투명도 조절 가능

    - opacity: 0 ~ 1 범위의 값 설정을 통해 오브젝트 투명도 조절

function Line(props) {

	// ...

    return (
        <line geometry={lineGeometry}>
            <lineBasicMaterial
                attach="material"
                ref={lineRef}
                transparent={true}
                opacity={
                    !props.lineColor {/*전달받은 lineColor props를 통해 투명도 조절*/}
                        ? 1
                        : starLineOpacity === groupNum
                        ? 0.05
                        : 0.01
                }
                color={0xced6ff}
            />
        </line>
    );
}

---

3. 결과

🦢 고찰

- 별의 등록, 삭제 시마다 State값에 1을 더하거나 빼주는 식으로 로직을 구성하면 성능적으로 더 우수할 것으로 예상

    - 불필요한 세그먼트트리 생성 및 조작 과정을 사용하지 않으므로

- 프로젝트를 진행하면서 이전에 학습했던 알고리즘을 적용해 보고 싶었던 시도로써 적용