Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@whoisrey
whoisrey authored Dec 21, 2024
1 parent 326250f commit 91f7bc6
Showing 1 changed file with 13 additions and 7 deletions.
20 changes: 13 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ _이러한 문제를 해결하기 위해 3D 가상 공간에서 스피커를 자

| 2D 화면에서 3D 모델 움직임 | 3D 공간에서 위치에 따른 소리 변화 |
| ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" src="https://github.com/user-attachments/assets/2d918e2e-dcae-41a2-8f5a-e56128977869 "> | <img width="360" height="260" src="https://github.com/user-attachments/assets/2e93699e-7fa4-4277-bda4-c67df10befe1"> |
| <img width="360" height="200" src="https://github.com/user-attachments/assets/2d918e2e-dcae-41a2-8f5a-e56128977869 "> | <img width="360" height="200" src="https://github.com/user-attachments/assets/2e93699e-7fa4-4277-bda4-c67df10befe1"> |

<br>

Expand Down Expand Up @@ -184,7 +184,7 @@ _마우스 이벤트와 3D 모델 좌표 실시간 연동_

| 거리가 가까운 경우 | 거리가 먼 경우 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" alt="스크린샷 2024-10-24 오후 4 41 50" src="https://github.com/user-attachments/assets/f3d77ad2-a5c5-4b02-9dca-affbdb17997a"> | <img width="360" height="260" alt="스크린샷 2024-10-24 오후 4 42 05" src="https://github.com/user-attachments/assets/6014f8c2-7391-4f19-9939-341cbc4526fc"> |
| <img width="360" height="200" alt="스크린샷 2024-10-24 오후 4 41 50" src="https://github.com/user-attachments/assets/f3d77ad2-a5c5-4b02-9dca-affbdb17997a"> | <img width="360" height="200" alt="스크린샷 2024-10-24 오후 4 42 05" src="https://github.com/user-attachments/assets/6014f8c2-7391-4f19-9939-341cbc4526fc"> |

<br>

Expand Down Expand Up @@ -216,7 +216,7 @@ _cos_ 함수 활용 방식은 아래와 같습니다.

| 왼쪽 배치 | 오른쪽 배치 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" alt="스크린샷 2024-10-24 오후 5 46 37" src="https://github.com/user-attachments/assets/15a14891-a185-466b-834e-39fa1b8dbcf9"> | <img width="360" height="260" alt="스크린샷 2024-10-24 오후 5 46 49" src="https://github.com/user-attachments/assets/c4a2080b-65c1-4e6b-a855-c78d80c6f369"> |
| <img width="360" height="200" alt="스크린샷 2024-10-24 오후 5 46 37" src="https://github.com/user-attachments/assets/15a14891-a185-466b-834e-39fa1b8dbcf9"> | <img width="360" height="200" alt="스크린샷 2024-10-24 오후 5 46 49" src="https://github.com/user-attachments/assets/c4a2080b-65c1-4e6b-a855-c78d80c6f369"> |

<br>

Expand All @@ -239,7 +239,7 @@ _cos_ 함수 활용 방식은 아래와 같습니다.

| 바닥 배치 | 천장 배치 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" alt="스크린샷 2024-10-24 오후 7 30 55" src="https://github.com/user-attachments/assets/8caf900f-4e91-43b8-bb2b-e8293bf4d97f"> | <img width="360" height="260" alt="스크린샷 2024-10-24 오후 7 31 18" src="https://github.com/user-attachments/assets/3294442d-62a0-4c57-9769-72ffaf19a2bd"> |
| <img width="360" height="200" alt="스크린샷 2024-10-24 오후 7 30 55" src="https://github.com/user-attachments/assets/8caf900f-4e91-43b8-bb2b-e8293bf4d97f"> | <img width="360" height="200" alt="스크린샷 2024-10-24 오후 7 31 18" src="https://github.com/user-attachments/assets/3294442d-62a0-4c57-9769-72ffaf19a2bd"> |

<br>

Expand Down Expand Up @@ -350,7 +350,7 @@ useEffect(() => {

| Google Docs | Soundrag |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" src="https://github.com/user-attachments/assets/4647616e-cc98-4cbb-bed8-e5f7931df880"> | <img width="360" height="260" src="https://github.com/user-attachments/assets/2ced6fd1-01d6-4651-9397-51d39ffca650"> |
| <img width="360" height="200" src="https://github.com/user-attachments/assets/4647616e-cc98-4cbb-bed8-e5f7931df880"> | <img width="360" height="200" src="https://github.com/user-attachments/assets/2ced6fd1-01d6-4651-9397-51d39ffca650"> |

#### <p align="right"><a href="#top">목차👆🏼</a></p>

Expand Down Expand Up @@ -411,7 +411,7 @@ _느린 네트워크 환경에서 마주한 빈 화면_

| Before | After |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| <img width="360" height="260" src="https://github.com/user-attachments/assets/c920ba8c-768d-4fe6-96a1-40dea5700d35"> | <img width="360" height="260" src="https://github.com/user-attachments/assets/6ad1ca3b-2e50-40ec-8913-3d4241836981"> |
| <img width="360" height="200" src="https://github.com/user-attachments/assets/c920ba8c-768d-4fe6-96a1-40dea5700d35"> | <img width="360" height="200" src="https://github.com/user-attachments/assets/6ad1ca3b-2e50-40ec-8913-3d4241836981"> |

#### <p align="right"><a href="#top">목차👆🏼</a></p>

Expand Down Expand Up @@ -584,7 +584,7 @@ _낙관적 업데이트가 적용된 동기화 과정_
#### (1) 다양한 컴포넌트에서 공유되는 전역 상태
컴포넌트 간의 데이터 흐름을 간소화하고 추적을 용이하게 하기 위해, **두 개 이상의 컴포넌트**에서 관리되거나 **두 번 이상의 props drilling**이 발생하는 상태를 전역 상태로 관리하였습니다. 특히, 3D 모델의 위치와 회전 정보는 음향 변화 뿐만 아니라 버전 저장, 회전 값 변경, 위치 변경 등 다양한 영향을 미치는 프로젝트의 핵심 상태로, 전역 상태로 관리하는 대표적인 상태입니다.
컴포넌트 간의 데이터 흐름을 간소화하고 추적을 용이하게 하기 위해, **두 개 이상의 컴포넌트**에서 관리되거나 **두 번 이상의 props drilling**이 발생하는 상태를 **Zustand** 라이브러리를 사용해 전역 상태로 관리하였습니다. 특히, 3D 모델의 위치와 회전 정보는 음향 변화 뿐만 아니라 버전 저장, 회전 값 변경, 위치 변경 등 다양한 영향을 미치는 프로젝트의 핵심 상태로, 전역 상태로 관리하는 대표적인 상태입니다.
<div align="center">
<img width="630" alt="스크린샷 2024-12-21 오후 5 54 45" src="https://github.com/user-attachments/assets/154b8e52-37d3-4c48-ab9d-7e5f4d40c841" />
Expand All @@ -593,6 +593,8 @@ _3D 모델 위치, 회전 정보 전역 상태 관리 시각화_
</div>
<br>
#### (2) 중앙 집중화된 상수 데이터 파일
코드의 가독성과 재사용성을 향상시키기 위해 **중앙 집중화**된 단일 파일에서 관리하도록 구현하였습니다. 해당 파일에는 프로젝트에서 사용되는 고정된 값이나, 전역적으로 참조되는 데이터를 관리하도록 설계하였습니다.
Expand All @@ -606,6 +608,8 @@ _3D 모델 위치, 회전 정보 전역 상태 관리 시각화_
const ROOM_SIZE = 30;
```
<br>
#### (3) 코드의 중복을 줄이는 공통 컴포넌트
코드 중복을 줄이고 유지보수성을 높이기 위해 UI에서 **공통적으로 사용**하는 컴포넌트를 구현하였습니다. 이러한 공통 컴포넌트는 state와 props를 활용하여 다양한 상황에 맞게 유연하게 동작하도록 설계하였습니다.
Expand All @@ -619,6 +623,8 @@ _3D 모델 위치, 회전 정보 전역 상태 관리 시각화_
ㄴ 📁 NavHeader.tsx
```
<br>
#### (4) 관심사 분리를 적용한 커스텀 훅
코드의 재사용성을 향상시키고 파일명만 보더라도 어떠한 기능을 수행하는 파일인지 명료하게 나타나기 위해 **관심사 분리** 원칙을 적용하여 기능별로 커스텀 훅을 구현하였습니다.
Expand Down

0 comments on commit 91f7bc6

Please sign in to comment.