Skip to content

Commit

Permalink
Merge pull request #388 from boostcampwm-2024/docs-#381
Browse files Browse the repository at this point in the history 
README 완성
  • Loading branch information
@yewonJin
yewonJin authored Dec 3, 2024
2 parents fc6b107 + 328254d commit 607ad51
Showing 1 changed file with 195 additions and 35 deletions.
230 changes: 195 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,36 @@
![Sprint 33](https://github.com/user-attachments/assets/2b23184d-90ed-458d-9dc4-dab9579c1e48)

[![Sprint 33](https://github.com/user-attachments/assets/2b23184d-90ed-458d-9dc4-dab9579c1e48)](https://octodocs.site)

<br>








<div align="center">

![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2024%2Fweb15-OctoDocs&count_bg=%23000000&title_bg=%23000000&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false) [![Group 112 (1)](https://github.com/user-attachments/assets/b7b4387e-ffe9-4469-82b7-c14509282d86)](https://octodocs.site)
[![Group 83 (2)](https://github.com/user-attachments/assets/2d106d94-430c-47bc-a9e2-1f0026f76c2f)](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki) [![Group 84 (2)](https://github.com/user-attachments/assets/b29b191b-8172-42a9-b541-40fdb8f165f3)](https://github.com/orgs/boostcampwm-2024/projects/120)

</div>

# 🐙 프로젝트 소개
<p align="center">
<a href="#옥토독스소개">🐙 옥토독스 소개</a> <br>
<a href="#주차별피드백">🌱 주차별 피드백을 통한 점진적 개선</a> <br>
<a href="#프로젝트타임라인">🗺️ 프로젝트 타임라인</a> <br>
<a href="#프로젝트구조">🛠️ 프로젝트 구조</a> <br>
<a href="#문제와해결과정">🚧 문제와 해결과정</a> <br>
<a href="#팀원소개">🧸 팀원 소개</a> <br>
</p>

<br><br>

<h1 id="옥토독스소개">🐙 옥토독스 소개</h1>

![Group 117 (2)](https://github.com/user-attachments/assets/04e39b34-9483-4896-bd6b-6456c4784eee)

<br>

### 🕸️ 관계형 지식 관리 툴


> 문서들을 작성하고 연결하면서 문서들 간의 연관 관계를 시각적으로 확인 가능.
🌱 마크다운, 이미지, 코드 등을 활용해서 간편하게 **문서 작성**이 가능합니다. <br>
🌱 작성한 문서들을 **연결**하고 **배치**하면서 새로운 아이디어를 쉽게 떠올릴 수 있습니다.

https://github.com/user-attachments/assets/1ac81d56-a0ce-403c-9e3f-7ba092b6a5b6

Expand All @@ -32,68 +40,220 @@ https://github.com/user-attachments/assets/1ac81d56-a0ce-403c-9e3f-7ba092b6a5b6

### 🧸 실시간 동시 편집 및 협업 기능

> 실시간으로 다른 사용자들과 동시 편집 및 협업 가능.
🌱 에디터에서 간편하게 **실시간 동시 편집**이 가능합니다. <br>
🌱 작성된 문서들도 **함께 연결하고 배치**해 보며 우리 팀만의 구조를 만들어 볼 수 있습니다.


https://github.com/user-attachments/assets/86b0dcaf-3640-4836-8b91-207b39b17b05

https://github.com/user-attachments/assets/ad1f6dc9-50af-46e4-bac4-267b1432b301

<br>


### ⛺️ 워크스페이스 초대 기능

> 개별 워크 스페이스에 다른 사용자들을 초대해서 함께 이용 가능.
🌱 우리 팀만의 **워크 스페이스를 생성**하고 팀원들을 **초대**할 수 있습니다. <br>
🌱 워크 스페이스의 **공개 범위**를 설정해서 누구나 참여할 수 있는 공간도 생성이 가능합니다.


https://github.com/user-attachments/assets/0c096e40-bed4-4cee-bb8e-40f72a5d43f2



<br><br><br><br>

<h1 id="주차별피드백">🌱 주차별 피드백을 통한 점진적 개선</h1>

<br>

> Octodocs팀은 **애자일한 개발**을 최우선 목표로 삼고, 이를 팀의 색깔로 자리잡게 했습니다. 부스트캠프야 말로 주차별로 고정 테스터를 확보할 수 있고, 이를 통해 **운영과 개발의 경험**을 해볼 수 있는 최적의 환경이라고 생각했기 때문인데요. 빠른 배포 후 매주 다양한 피드백을 받아오며 문제를 해결하고 개선해 나가는 과정을 직접 확인해보세요!
<br>

### 3주차 피드백 반영

→ [🔗 3주차 전체 사용자 피드백 반영 기록 보러가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/3%EF%B8%8F%E2%83%A3-3%EC%A3%BC%EC%B0%A8-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%B0%98%EC%98%81-%EA%B8%B0%EB%A1%9D)

![image 23](https://github.com/user-attachments/assets/a566ce1e-b2ab-4690-80a0-3189613debc2)


🙏🏻 **보드랑, 문서노드에 마우스 포인터가 달랐으면 좋겠어요.**

→ ✅ 캔버스에서 마우스를 움직이는 중인 유저들의 커서를 보여주고, 유저는 자신의 **커서 색깔을 커스텀**할 수 있는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/219)

<br>

🙏🏻 **연결같은거 하다보면 복잡해지네요**

→ ✅ 엣지들이 엉켜보이는 것이 문제점이라고 판단했고 엣지의 시작점과 끝점이 항상 **최단 경로**가 되게 하는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/201)

<br>

🙏🏻 **스크린 높이를 작게 한 상태에서 왼쪽 사이드바가 버튼 UI를 가려버려용**

→ ✅ 사이드바 UI를 수정, **사이드바를 닫을 수 있는 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/228)

<br><br>

### 4주차 피드백 반영

→ [🔗 4주차 전체 사용자 피드백 반영 기록 보러가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/4%EF%B8%8F%E2%83%A3-4%EC%A3%BC%EC%B0%A8-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%B0%98%EC%98%81-%EA%B8%B0%EB%A1%9D)

# 🛠️ 프로젝트 구조

![Group 115 (1)](https://github.com/user-attachments/assets/1da2266f-247a-43ba-9b75-b7e4f7129b30)

🙏🏻 **테두리가 더 두꺼워서 에디터랑 아래의 기본 배경이 더 구분이 잘 되었으면 좋겠어요! 색상을 변경할 수 있으면 좋겠습니다!**

→ ✅ 노드의 색깔을 사용자가 결정할 수 있으면 공통적인 문제(노드가 배경으로부터 분리되어 보였으면 좋겠다)가 해결된다고 판단했고 **노드의 색깔을 커스텀**할 수 있는 기능을 추가하였습니다. [PR 링크 1(FE)](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/201) [PR 링크 2(BE)](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/4%EF%B8%8F%E2%83%A3-4%EC%A3%BC%EC%B0%A8-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%B0%98%EC%98%81-%EA%B8%B0%EB%A1%9D)

<br>

🙏🏻 **favicon에 문어 넣어주세요 문어 귀여워요...**

→ ✅ 현재 배포된 사이트 [**https://octodocs.site**](https://octodocs.site/)를 통해 확인할 수 있습니다.

<br>

🙏🏻 **사용자 프로필 (이름하고 색깔) 변경하는 기능이 잘 눈에 안 띄어요. 사용하기 쉬웠으면 좋겠습니다.**

→ ✅ 프로필을 변경할 수 있는 버튼을 눈에 띄는 곳에 새로 생성한 후, 사용자가 본인의 커서를 직접 보고 체험할 수 있는 **커서 프리뷰 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/274)

<br><br>

### 5주차 피드백 반영

![스크린샷 2024-12-03 오후 8 09 51 1](https://github.com/user-attachments/assets/74d02bff-e476-425c-8086-a377aa2cb482)

<br>

🚨 **데모 중 서비스가 다운되는 문제가 발생했어요**

> 5주차에는 데모 발표 중 사용자의 트래픽이 몰리면서 예상하지 못했던 버그로 인해 서버가 다운되었습니다. 이또한 **실사용자로부터 온** 중요한 피드백이라고 생각하였고 다른 피드백보다 서비스 복구를 최우선 과제로 삼았습니다. 이 과정에서 어떤 문제가 있었고 이를 어떻게 해결했을까요?
>
→ [🔗 어? 금지, 모니터 앞에 3명 이상 서있기 금지](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/5%EF%B8%8F%E2%83%A3-5%EC%A3%BC%EC%B0%A8-%EB%B2%84%EA%B7%B8-%EA%B8%B0%EB%A1%9D)

<br><br>

<h1 id="프로젝트타임라인">🗺️ 프로젝트 타임라인</h1>

![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)


<br><br>


<h1 id="프로젝트구조">🛠️ 프로젝트 구조</h1>

### 🖥️ System Architecture

![image (13)](https://github.com/user-attachments/assets/60bfb7a1-3c1a-436d-b961-5a30dc9dba7f)
![image (13)](https://github.com/user-attachments/assets/bee51119-c814-4f57-8cda-60ea4bfdd2dd)

<br>

### 🐳 Sequence Diagram

<div align="center">
```mermaid
sequenceDiagram
participant Subscriber as 구독자
participant OctoDocs as OctoDocs 워크스페이스
participant Yjs as yjs 라이브러리
participant YSocket as y-socketIO provider
participant WS_Server as websocket server (ysocketio)
participant PageModule as page 모듈 (node 모듈)
participant Redis as redis
participant Postgres as postgres
%% 웹소켓 연결 플로우
note over Subscriber, YSocket: [웹소켓 연결 플로우]
Subscriber->>OctoDocs: Y.Doc 생성 요청
OctoDocs->>Yjs: Y.Doc 생성 수행
Yjs->>YSocket: Y.Doc 공유 요청
alt [Y.Doc이 존재하지 않을 때]
YSocket->>WS_Server: 웹소켓 연결
WS_Server->>PageModule: 데이터 조회 요청
PageModule->>Redis: 데이터 조회 요청
Redis->>PageModule: 데이터 조회 응답
PageModule->>WS_Server: 데이터 조회 응답
WS_Server->>YSocket: Y.Doc에 초기 데이터 셋팅
YSocket->>Yjs: 웹소켓 연결 완료
else [Y.Doc이 존재할 때]
YSocket->>WS_Server: 웹소켓 연결
YSocket->>Yjs: 웹소켓 연결 완료
end
%% 페이지 정보 변경 플로우
note over OctoDocs, WS_Server: [페이지 정보 변경 플로우]
OctoDocs->>Yjs: Y.Doc 데이터 변경
Yjs->>YSocket: 변경된 데이터 전달
YSocket->>WS_Server: 소켓 요청
WS_Server->>PageModule: 소켓 요청
PageModule->>Redis: 변경 사항 저장
Redis->>PageModule: 변경 사항 저장 알림
PageModule-->>WS_Server: 저장 완료 알림
WS_Server-->>YSocket: 변경된 데이터 전달
YSocket-->>Yjs: 모든 참여자들에게 Y.Doc 데이터 변경
%% 데이터베이스 영속화 플로우
note over Redis, Postgres: [데이터베이스 영속화 플로우]
loop [스케줄러]
Redis->>Postgres: 변경 사항 저장
Postgres->>Redis: 변경 사항 저장 알림
end
```


<br><br>

<h1 id="문제와해결과정">🚧 문제와 해결과정</h1>

### 🐙 실시간 편집 구현 과정

실시간으로 여러 사용자가 동일한 문서를 편집할 때, 충돌 없이 동기화하는 것은 어려운 문제입니다. Octodocs 팀은 이를 직접 구현하는 대신 **YJS**와 **Socket.IO**를 결합하는 전략을 선택했습니다. 하지만 이 두 라이브러리를 통합하는 과정에서 예상치 못한 문제들을 어떻게 해결했을까요?

→ [🔗 실시간 편집의 비밀, 지금 바로 확인하기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%ED%8E%B8%EC%A7%91-%EA%B5%AC%ED%98%84-%EA%B3%BC%EC%A0%95)

<br>

![image (14)](https://github.com/user-attachments/assets/ea6853d8-398e-4448-ae0a-07bffc653722)
### 🌊 데이터 흐름 변경

</div>
Octodocs 팀은 기존 RESTful API 기반 상태 관리를 버리고 **YDoc 중심의 단일 Truth Source**와 **소켓 기반 단방향 흐름**으로 전환했습니다. 이로 인해 모든 상태가 YDoc을 통해 일관되게 관리되고, 데이터 흐름도 간소화되었습니다. 기존 방식을 버리고 이 변화를 선택한 이유는 무엇일까요? 또한, 중복 관리와 데이터 충돌을 줄이기 위한 **data flow 변화**의 핵심은 무엇이었을까요?

# 🗺️ 프로젝트 타임라인
→ [🔗 데이터 흐름에 몸을 맡겨보기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%86%8C%EC%BC%93%EC%9C%BC%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%9D%98-%EB%B3%B5%EC%9E%A1%EC%84%B1%EA%B3%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%9D%90%EB%A6%84-%EB%B3%80%EA%B2%BD)

![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)
<br>

### 🕸️ FE 프로젝트 구조 개선 과정

# 🚧 문제와 해결과정
짧은 기간의 스프린트를 빠르게 반복하여 개발했던 Octodocs 팀은 어느 순간부터 기능을 추가하고 유지보수하기 어렵다는 문제점을 마주하였습니다. 기존 **프로젝트 구조**의 문제점을 어떻게 파악했고, 어떤 방법으로 개선 했을까요?

### 실시간 편집 구현 과정
→ [🔗 FSD, 힙하지만 막 갖다 쓰진 않았습니다](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/FE-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95)

Octodocs 팀은 핵심 기능인 에디터와 노드 캔버스의 **실시간 편집**을 위해 **CRDT** 라이브러리인 **YJS**와 **SocketIO**를 어떻게 활용 했을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
<br>

### 데이터 흐름 변경
### ✨ 드래그 이벤트 발생 시 생기는 쿼리 최적화

YDoc과 소켓을 사용하면서도 RESTful 방식으로 일부 상태를 관리하던 구조를, YDoc 중심의 **단일 truth source**와 소켓 기반 **단방향 흐름**으로 단순화했습니다. 그 결과 모든 상태가 YDoc을 통해 일관성 있게 관리되며, 클라이언트와 서버 간 데이터 흐름도 간소화되었습니다. 중복 관리와 데이터 충돌을 줄이기 위한 이런 **data flow 변화**의 핵심은 무엇이었을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
노트 카드를 **드래그할 때 너무 많은 쿼리가 발생**해 서버가 멈추는 치명적인 문제가 있었습니다. 핵심 기능인 캔버스를 아예 이용할 수 없었기에, 반드시 해결해야 하는 과제였습니다. Octodocs 팀은 소수점 단위로 변하는 좌표를 DB에 저장하기 위해 어떤 최적화를 도입했을까요?

### FE 프로젝트 구조 개선 과정
→ [🔗 우측으로 1mm만 옮겨주세요](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B4%80%EC%B0%B0%2C-%EC%BF%BC%EB%A6%AC-%EB%B0%9C%EC%83%9D-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B3%BC%EC%A0%95)

Octodocs 팀은 기존 **프로젝트 구조**의 문제점을 어떻게 파악했고, 어떤 방법으로 개선을 했을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
<br>

### 드래그 이벤트 발생 시 생기는 쿼리 최적화
### 🧨 Redis를 활용한 데이터베이스 부하 줄이기

실시간으로 문서를 동시에 편집하면 굉장히 많은 변경 사항이 발생합니다. 누군가 타이핑을 할 때마다 변경 사항들을 모두 데이터베이스에 반영하기에는 부하가 너무 발생했기에, Octodocs 팀은 redis를 도입하기로 결정했습니다. 어떤 지점에서 redis 도입을 결정했고, 어떻게 redis를 활용하고 있을까요?

→ [🔗 Redis 같은 걸 끼얹나?](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/redis%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%BF%BC%EB%A6%AC-%EC%A4%84%EC%9D%B4%EA%B8%B0)

<br>

**노트 카드를 드래그** 할 때, 그 위치를 DB에 저장하기 위해 **너무 많은 쿼리가 발생**하는 문제가 있었습니다. 이를 위해 **쿼리를 최적화**해야할 필요성이 생겼는데 이를 어떻게 해결할 수 있었을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
### 🐳 개발 환경, 배포 환경 및 CI/CD에 대한 개선 과정

### redis 캐싱으로 데이터베이스 부하 감소
Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유지와 개발자 친화적인 쾌적한 개발 환경 조성을 위해 많은 노력을 기울였습니다. 멀티 레포에서 모노레포로의 전환, GitHub Actions를 활용한 CI/CD 구축, Docker와 Docker Compose의 도입까지—우리는 어떤 변화를 거쳤을까요?

실시간 문서 동시 편집에서 발생하는 굉장히 많은 변경 사항을 모두 데이터베이스에 저장하기에는 데이터베이스 부하가 너무 많이 발생했고, Octodocs 팀은 redis를 도입하기로 결정했습니다. 저희는 왜 redis를 도입하기로 결정했고 또 redis를 어떻게 활용했을까요? [🔗 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/redis%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%BF%BC%EB%A6%AC-%EC%A4%84%EC%9D%B4%EA%B8%B0)
→ [🔗 환경 개선의 여정 따라가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%2C-%EB%B0%B0%ED%8F%AC-%ED%99%98%EA%B2%BD-%EB%B0%8F-CI-CD%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95)

### 개발 환경, 배포 환경 및 CI/CD에 대한 개선 과정
<br><br>

Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유지와 개발자 친화적인 쾌적한 개발 환경 조성을 위해 많은 노력을 기울였습니다. 멀티 레포에서 모노레포로의 전환, GitHub Actions를 활용한 CI/CD 구축, Docker와 Docker Compose의 도입까지—우리는 어떤 변화를 거쳤을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
<h1 id="팀원소개">🧸 팀원 소개</h1>

# 🧸 팀원 소개
| [J032_김동준](https://github.com/djk01281) | [J075_김현준](https://github.com/Tolerblanc) | [J097_민서진](https://github.com/summersummerwhy) | [J162_유성민](https://github.com/ezcolin2) | [J248_진예원](https://github.com/yewonJin) |
|:----------------------------------------:|:------------------------------------------:|:------------------------------------------------:|:----------------------------------------:|:----------------------------------------:|
| <img width="204" alt="스크린샷 2024-10-29 오후 4" src="https://github.com/user-attachments/assets/71a5a38e-f60c-4f60-97e3-30d7a73a3c77"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 04" src="https://github.com/user-attachments/assets/e093f852-a6ea-4937-b0ce-b89276bd7135"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 55" src="https://github.com/user-attachments/assets/0f638ba9-a1ad-47b8-a874-957c0119384c"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 00" src="https://github.com/user-attachments/assets/1d77b650-70f1-4dee-9489-dc0122b7c9ff"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 40 31" src="https://github.com/user-attachments/assets/db99b6b2-ae06-4758-8687-17ebb860a52b"> |
Expand Down

0 comments on commit 607ad51

Please sign in to comment.