You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Octodocs팀은 **애자일한 개발**을 최우선 목표로 삼고, 이를 팀의 색깔로 자리잡게 했습니다. 부스트캠프야 말로 주차별로 고정 테스터를 확보할 수 있고, 이를 통해 **운영과 개발의 경험**을 해볼 수 있는 최적의 환경이라고 생각했기 때문인데요. 빠른 배포 후 매주 다양한 피드백을 받아오며 문제를 해결하고 개선해 나가는 과정을 직접 확인해보세요!
70
+
71
+
<br>
72
+
73
+
### 3주차 피드백 반영
74
+
75
+
→ [🔗 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)
→ ✅ 캔버스에서 마우스를 움직이는 중인 유저들의 커서를 보여주고, 유저는 자신의 **커서 색깔을 커스텀**할 수 있는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/219)
83
+
84
+
<br>
85
+
86
+
🙏🏻 **연결같은거 하다보면 복잡해지네요**
87
+
88
+
→ ✅ 엣지들이 엉켜보이는 것이 문제점이라고 판단했고 엣지의 시작점과 끝점이 항상 **최단 경로**가 되게 하는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/201)
45
89
46
90
<br>
47
91
92
+
🙏🏻 **스크린 높이를 작게 한 상태에서 왼쪽 사이드바가 버튼 UI를 가려버려용**
93
+
94
+
→ ✅ 사이드바 UI를 수정, **사이드바를 닫을 수 있는 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/228)
95
+
96
+
<br><br>
97
+
98
+
### 4주차 피드백 반영
99
+
100
+
→ [🔗 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)
🙏🏻 **테두리가 더 두꺼워서 에디터랑 아래의 기본 배경이 더 구분이 잘 되었으면 좋겠어요! 색상을 변경할 수 있으면 좋겠습니다!**
106
+
107
+
→ ✅ 노드의 색깔을 사용자가 결정할 수 있으면 공통적인 문제(노드가 배경으로부터 분리되어 보였으면 좋겠다)가 해결된다고 판단했고 **노드의 색깔을 커스텀**할 수 있는 기능을 추가하였습니다. [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)
108
+
109
+
<br>
110
+
111
+
🙏🏻 **favicon에 문어 넣어주세요 문어 귀여워요...**
112
+
113
+
→ ✅ 현재 배포된 사이트 [**https://octodocs.site**](https://octodocs.site/)를 통해 확인할 수 있습니다.
114
+
115
+
<br>
116
+
117
+
🙏🏻 **사용자 프로필 (이름하고 색깔) 변경하는 기능이 잘 눈에 안 띄어요. 사용하기 쉬웠으면 좋겠습니다.**
118
+
119
+
→ ✅ 프로필을 변경할 수 있는 버튼을 눈에 띄는 곳에 새로 생성한 후, 사용자가 본인의 커서를 직접 보고 체험할 수 있는 **커서 프리뷰 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/274)
> 5주차에는 데모 발표 중 사용자의 트래픽이 몰리면서 예상하지 못했던 버그로 인해 서버가 다운되었습니다. 이또한 **실사용자로부터 온** 중요한 피드백이라고 생각하였고 다른 피드백보다 서비스 복구를 최우선 과제로 삼았습니다. 이 과정에서 어떤 문제가 있었고 이를 어떻게 해결했을까요?
132
+
>
133
+
134
+
→ [🔗 어? 금지, 모니터 앞에 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)
participant WS_Server as websocket server (ysocketio)
163
+
participant PageModule as page 모듈 (node 모듈)
164
+
participant Redis as redis
165
+
participant Postgres as postgres
166
+
%% 웹소켓 연결 플로우
167
+
note over Subscriber, YSocket: [웹소켓 연결 플로우]
168
+
Subscriber->>OctoDocs: Y.Doc 생성 요청
169
+
OctoDocs->>Yjs: Y.Doc 생성 수행
170
+
Yjs->>YSocket: Y.Doc 공유 요청
171
+
alt [Y.Doc이 존재하지 않을 때]
172
+
YSocket->>WS_Server: 웹소켓 연결
173
+
WS_Server->>PageModule: 데이터 조회 요청
174
+
PageModule->>Redis: 데이터 조회 요청
175
+
Redis->>PageModule: 데이터 조회 응답
176
+
PageModule->>WS_Server: 데이터 조회 응답
177
+
WS_Server->>YSocket: Y.Doc에 초기 데이터 셋팅
178
+
YSocket->>Yjs: 웹소켓 연결 완료
179
+
else [Y.Doc이 존재할 때]
180
+
YSocket->>WS_Server: 웹소켓 연결
181
+
YSocket->>Yjs: 웹소켓 연결 완료
182
+
end
183
+
%% 페이지 정보 변경 플로우
184
+
note over OctoDocs, WS_Server: [페이지 정보 변경 플로우]
185
+
OctoDocs->>Yjs: Y.Doc 데이터 변경
186
+
Yjs->>YSocket: 변경된 데이터 전달
187
+
YSocket->>WS_Server: 소켓 요청
188
+
WS_Server->>PageModule: 소켓 요청
189
+
PageModule->>Redis: 변경 사항 저장
190
+
Redis->>PageModule: 변경 사항 저장 알림
191
+
PageModule-->>WS_Server: 저장 완료 알림
192
+
WS_Server-->>YSocket: 변경된 데이터 전달
193
+
YSocket-->>Yjs: 모든 참여자들에게 Y.Doc 데이터 변경
194
+
%% 데이터베이스 영속화 플로우
195
+
note over Redis, Postgres: [데이터베이스 영속화 플로우]
196
+
loop [스케줄러]
197
+
Redis->>Postgres: 변경 사항 저장
198
+
Postgres->>Redis: 변경 사항 저장 알림
199
+
end
200
+
```
201
+
202
+
203
+
<br><br>
204
+
205
+
<h1id="문제와해결과정">🚧 문제와 해결과정</h1>
206
+
207
+
### 🐙 실시간 편집 구현 과정
208
+
209
+
실시간으로 여러 사용자가 동일한 문서를 편집할 때, 충돌 없이 동기화하는 것은 어려운 문제입니다. Octodocs 팀은 이를 직접 구현하는 대신 **YJS**와 **Socket.IO**를 결합하는 전략을 선택했습니다. 하지만 이 두 라이브러리를 통합하는 과정에서 예상치 못한 문제들을 어떻게 해결했을까요?
210
+
211
+
→ [🔗 실시간 편집의 비밀, 지금 바로 확인하기](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)
Octodocs 팀은 기존 RESTful API 기반 상태 관리를 버리고 **YDoc 중심의 단일 Truth Source**와 **소켓 기반 단방향 흐름**으로 전환했습니다. 이로 인해 모든 상태가 YDoc을 통해 일관되게 관리되고, 데이터 흐름도 간소화되었습니다. 기존 방식을 버리고 이 변화를 선택한 이유는 무엇일까요? 또한, 중복 관리와 데이터 충돌을 줄이기 위한 **data flow 변화**의 핵심은 무엇이었을까요?
64
218
65
-
# 🗺️ 프로젝트 타임라인
219
+
→ [🔗 데이터 흐름에 몸을 맡겨보기](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)
짧은 기간의 스프린트를 빠르게 반복하여 개발했던 Octodocs 팀은 어느 순간부터 기능을 추가하고 유지보수하기 어렵다는 문제점을 마주하였습니다. 기존 **프로젝트 구조**의 문제점을 어떻게 파악했고, 어떤 방법으로 개선 했을까요?
71
226
72
-
### 실시간 편집 구현 과정
227
+
→ [🔗 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)
73
228
74
-
Octodocs 팀은 핵심 기능인 에디터와 노드 캔버스의 **실시간 편집**을 위해 **CRDT** 라이브러리인 **YJS**와 **SocketIO**를 어떻게 활용 했을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
229
+
<br>
75
230
76
-
### 데이터 흐름 변경
231
+
### ✨ 드래그 이벤트 발생 시 생기는 쿼리 최적화
77
232
78
-
YDoc과 소켓을 사용하면서도 RESTful 방식으로 일부 상태를 관리하던 구조를, YDoc 중심의 **단일 truth source**와 소켓 기반 **단방향 흐름**으로 단순화했습니다. 그 결과 모든 상태가 YDoc을 통해 일관성 있게 관리되며, 클라이언트와 서버 간 데이터 흐름도 간소화되었습니다. 중복 관리와 데이터 충돌을 줄이기 위한 이런 **data flow 변화**의 핵심은 무엇이었을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
233
+
노트 카드를 **드래그할 때 너무 많은 쿼리가 발생**해 서버가 멈추는 치명적인 문제가 있었습니다. 핵심 기능인 캔버스를 아예 이용할 수 없었기에, 반드시 해결해야 하는 과제였습니다. Octodocs 팀은 소수점 단위로 변하는 좌표를 DB에 저장하기 위해 어떤 최적화를 도입했을까요?
Octodocs 팀은 기존 **프로젝트 구조**의 문제점을 어떻게 파악했고, 어떤 방법으로 개선을 했을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
237
+
<br>
83
238
84
-
### 드래그 이벤트 발생 시 생기는 쿼리 최적화
239
+
### 🧨 Redis를 활용한 데이터베이스 부하 줄이기
240
+
241
+
실시간으로 문서를 동시에 편집하면 굉장히 많은 변경 사항이 발생합니다. 누군가 타이핑을 할 때마다 변경 사항들을 모두 데이터베이스에 반영하기에는 부하가 너무 발생했기에, Octodocs 팀은 redis를 도입하기로 결정했습니다. 어떤 지점에서 redis 도입을 결정했고, 어떻게 redis를 활용하고 있을까요?
242
+
243
+
→ [🔗 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)
244
+
245
+
<br>
85
246
86
-
**노트 카드를 드래그** 할 때, 그 위치를 DB에 저장하기 위해 **너무 많은 쿼리가 발생**하는 문제가 있었습니다. 이를 위해 **쿼리를 최적화**해야할 필요성이 생겼는데 이를 어떻게 해결할 수 있었을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
247
+
### 🐳 개발 환경, 배포 환경 및 CI/CD에 대한 개선 과정
87
248
88
-
### redis 캐싱으로 데이터베이스 부하 감소
249
+
Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유지와 개발자 친화적인 쾌적한 개발 환경 조성을 위해 많은 노력을 기울였습니다. 멀티 레포에서 모노레포로의 전환, GitHub Actions를 활용한 CI/CD 구축, Docker와 Docker Compose의 도입까지—우리는 어떤 변화를 거쳤을까요?
89
250
90
-
실시간 문서 동시 편집에서 발생하는 굉장히 많은 변경 사항을 모두 데이터베이스에 저장하기에는 데이터베이스 부하가 너무 많이 발생했고, 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)
251
+
→ [🔗 환경 개선의 여정 따라가기](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)
91
252
92
-
### 개발 환경, 배포 환경 및 CI/CD에 대한 개선 과정
253
+
<br><br>
93
254
94
-
Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유지와 개발자 친화적인 쾌적한 개발 환경 조성을 위해 많은 노력을 기울였습니다. 멀티 레포에서 모노레포로의 전환, GitHub Actions를 활용한 CI/CD 구축, Docker와 Docker Compose의 도입까지—우리는 어떤 변화를 거쳤을까요? [🔗 링크 준비 중](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki)
0 commit comments