Skip to content

Commit f9471e6

Browse files
github-actions[bot]github-actions[bot]
authored
Merge pull request #396 from boostcampwm-2024/hotfix-docs-3
README 피드백 위주 변경
2 parents 7462b9e + 553d19a commit f9471e6

File tree

1 file changed

+55
-94
lines changed

1 file changed

+55
-94
lines changed

‎README.md‎

Lines changed: 55 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111

1212
<p align="center">
1313
<a href="#옥토독스소개">🐙 옥토독스 소개</a> <br>
14-
<a href="#주차별피드백">🌱 주차별 피드백을 통한 점진적 개선</a> <br>
14+
<a href="#주차별피드백">🏗️ 피드백을 반영한 점진적 개선</a> <br>
1515
<a href="#프로젝트타임라인">🗺️ 프로젝트 타임라인</a> <br>
16-
<a href="#프로젝트구조">🛠️ 프로젝트 구조</a> <br>
17-
<a href="#문제와해결과정">🚧 문제와 해결과정</a> <br>
18-
<a href="#팀원소개">🧸 팀원 소개</a> <br>
16+
<a href="#프로젝트구조">⚙️ 프로젝트 구조</a> <br>
17+
<a href="#핵심경험">🗜️ 팀의 핵심 경험</a> <br>
18+
<a href="#팀원소개">🍻 팀원 소개</a> <br>
1919
</p>
2020

2121
<br><br>
@@ -26,34 +26,45 @@
2626

2727
<br>
2828

29-
### 🕸️ 관계형 지식 관리 툴
29+
<div align="center">
30+
31+
### 🪡 관계형 지식 관리 툴
3032

31-
🌱 마크다운, 이미지, 코드 등을 활용해서 간편하게 **문서 작성**이 가능합니다. <br>
32-
🌱 작성한 문서들을 **연결**하고 **배치**하면서 새로운 아이디어를 쉽게 떠올릴 수 있습니다.
33+
📢 마크다운, 이미지, 코드 등을 활용해서 간편하게 **문서 작성**이 가능합니다. <br>
34+
📢 작성한 문서들을 **연결**하고 **배치**하면서 새로운 아이디어를 쉽게 떠올릴 수 있습니다.
3335

34-
https://github.com/user-attachments/assets/1ac81d56-a0ce-403c-9e3f-7ba092b6a5b6
36+
![문서 작성과 연결 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391353713-1ac81d56-a0ce-403c-9e3f-7ba092b6a5b6-ezgif.com-video-to-gif-converter.gif)
3537

3638
<br>
3739

38-
### 🧸 실시간 동시 편집 및 협업 기능
40+
### 👥 실시간 동시 편집 및 협업 툴
3941

40-
🌱 에디터에서 간편하게 **실시간 동시 편집**이 가능합니다. <br>
41-
🌱 작성된 문서들도 **함께 연결하고 배치**해 보며 우리 팀만의 구조를 만들어 볼 수 있습니다.
42+
📢 에디터에서 간편하게 **실시간 동시 편집**이 가능합니다. <br>
43+
📢 작성된 문서들도 **함께 연결하고 배치**해 보며 우리 팀만의 구조를 만들어 볼 수 있습니다.
4244

43-
https://github.com/user-attachments/assets/86b0dcaf-3640-4836-8b91-207b39b17b05
45+
![실시간 동시편집 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391975638-86b0dcaf-3640-4836-8b91-207b39b17b05-ezgif.com-video-to-gif-converter.gif)
4446

4547
<br>
4648

47-
### ⛺️ 워크스페이스 초대 기능
49+
### 📮 워크스페이스 초대 가능
50+
51+
📢 우리 팀만의 **워크 스페이스를 생성**하고 팀원들을 **초대**할 수 있습니다. <br>
52+
📢 워크 스페이스의 **공개 범위**를 설정해서 누구나 참여할 수 있는 공간도 생성이 가능합니다.
4853

49-
🌱 우리 팀만의 **워크 스페이스를 생성**하고 팀원들을 **초대**할 수 있습니다. <br>
50-
🌱 워크 스페이스의 **공개 범위**를 설정해서 누구나 참여할 수 있는 공간도 생성이 가능합니다.
54+
![워크스페이스 초대 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391998820-0c096e40-bed4-4cee-bb8e-40f72a5d43f2-ezgif.com-video-to-gif-converter.gif)
5155

52-
https://github.com/user-attachments/assets/0c096e40-bed4-4cee-bb8e-40f72a5d43f2
56+
<br>
57+
</div>
5358

54-
<br><br><br><br>
59+
<div align="center">
60+
<a href="https://octodocs.site/" target="_blank">
61+
➡️ 지금 옥토독스 사용해보러 가기!
62+
</a>
63+
</div>
64+
65+
<br><br>
5566

56-
<h1 id="주차별피드백">🌱 주차별 피드백을 통한 점진적 개선</h1>
67+
<h1 id="주차별피드백">🏗️ 피드백을 반영한 점진적 개선</h1>
5768

5869
<br>
5970

@@ -117,135 +128,85 @@ https://github.com/user-attachments/assets/0c096e40-bed4-4cee-bb8e-40f72a5d43f2
117128

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

120-
> 5주차에는 데모 발표 중 사용자의 트래픽이 몰리면서 예상하지 못했던 버그로 인해 서버가 다운되었습니다. 이또한 **실사용자로부터 온** 중요한 피드백이라고 생각하였고 다른 피드백보다 서비스 복구를 최우선 과제로 삼았습니다. 이 과정에서 어떤 문제가 있었고 이를 어떻게 해결했을까요?
131+
> 5주차에는 데모 발표 중 사용자의 트래픽이 몰리면서 예상하지 못했던 버그로 인해 서버가 다운되었습니다. 이 또한 **실사용자로부터 온** 중요한 피드백이라고 생각하였고 다른 피드백보다 **서비스 복구를 최우선 과제로** 삼았습니다. 이 과정에서 어떤 문제가 있었고 이를 어떻게 해결했을까요?
121132
122133
→ [🔗 어? 금지, 모니터 앞에 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)
123134

124135
<br><br>
125136

126-
<h1 id="프로젝트타임라인">🗺️ 프로젝트 타임라인</h1>
127-
128-
![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)
129-
130-
<br><br>
131-
132-
<h1 id="프로젝트구조">🛠️ 프로젝트 구조</h1>
133-
134-
### 🖥️ System Architecture
135-
136-
![image (13)](https://github.com/user-attachments/assets/bee51119-c814-4f57-8cda-60ea4bfdd2dd)
137-
138-
<br>
139-
140-
### 🐳 Sequence Diagram
141-
142-
```mermaid
143-
sequenceDiagram
144-
participant Subscriber as 구독자
145-
participant OctoDocs as OctoDocs 워크스페이스
146-
participant Yjs as yjs 라이브러리
147-
participant YSocket as y-socketIO provider
148-
participant WS_Server as websocket server (ysocketio)
149-
participant PageModule as page 모듈 (node 모듈)
150-
participant Redis as redis
151-
participant Postgres as postgres
152-
%% 웹소켓 연결 플로우
153-
note over Subscriber, YSocket: [웹소켓 연결 플로우]
154-
Subscriber->>OctoDocs: Y.Doc 생성 요청
155-
OctoDocs->>Yjs: Y.Doc 생성 수행
156-
Yjs->>YSocket: Y.Doc 공유 요청
157-
alt [Y.Doc이 존재하지 않을 때]
158-
YSocket->>WS_Server: 웹소켓 연결
159-
WS_Server->>PageModule: 데이터 조회 요청
160-
PageModule->>Redis: 데이터 조회 요청
161-
Redis->>PageModule: 데이터 조회 응답
162-
PageModule->>WS_Server: 데이터 조회 응답
163-
WS_Server->>YSocket: Y.Doc에 초기 데이터 셋팅
164-
YSocket->>Yjs: 웹소켓 연결 완료
165-
else [Y.Doc이 존재할 때]
166-
YSocket->>WS_Server: 웹소켓 연결
167-
YSocket->>Yjs: 웹소켓 연결 완료
168-
end
169-
%% 페이지 정보 변경 플로우
170-
note over OctoDocs, WS_Server: [페이지 정보 변경 플로우]
171-
OctoDocs->>Yjs: Y.Doc 데이터 변경
172-
Yjs->>YSocket: 변경된 데이터 전달
173-
YSocket->>WS_Server: 소켓 요청
174-
WS_Server->>PageModule: 소켓 요청
175-
PageModule->>Redis: 변경 사항 저장
176-
Redis->>PageModule: 변경 사항 저장 알림
177-
PageModule-->>WS_Server: 저장 완료 알림
178-
WS_Server-->>YSocket: 변경된 데이터 전달
179-
YSocket-->>Yjs: 모든 참여자들에게 Y.Doc 데이터 변경
180-
%% 데이터베이스 영속화 플로우
181-
note over Redis, Postgres: [데이터베이스 영속화 플로우]
182-
loop [스케줄러]
183-
Redis->>Postgres: 변경 사항 저장
184-
Postgres->>Redis: 변경 사항 저장 알림
185-
end
186-
```
187-
188-
<br><br>
189-
190-
<h1 id="문제와해결과정">🚧 문제와 해결과정</h1>
137+
<h1 id="핵심경험">🗜️ Octodocs 팀의 핵심 경험</h1>
191138

192-
### 🐙 실시간 편집 구현 과정
139+
### 🗣️ 실시간 편집 구현 과정
193140

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

196143
→ [🔗 실시간 편집의 비밀, 지금 바로 확인하기](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)
197144

198145
<br>
199146

200-
### 🌊 데이터 흐름 변경
147+
### ☄️ 데이터 흐름 변경
201148

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

204151
→ [🔗 데이터 흐름에 몸을 맡겨보기](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)
205152

206153
<br>
207154

208-
### 🕸️ FE 프로젝트 구조 개선 과정
155+
### 🛠️ FE 프로젝트 구조 개선
209156

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

212159
→ [🔗 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)
213160

214161
<br>
215162

216-
### 🔑 워크스페이스 별 권한 부여 구현 과정
163+
### 🔑 워크스페이스 별 권한 부여
217164

218165
Octodocs 팀은 배포를 끝낸 사이트를 발표에 직접 이용하다가, 발표를 듣는 사용자들이 발표 자료를 멋대로 변경할 수도 있다는 걱정을 마주했고 **사용자들이 워크스페이스별 권한을 관리**할 수 있어야겠다는 결론을 내렸습니다. 하지만 워크스페이스에 초대를 하면 알림이 가는 시스템을 만들기에는 개발 기간이 얼마 남지 않은 상태였어요. Octodocs 팀은 어떻게 워크스페이스별 권한 관리를 구현하였을까요?
219166

220167
→ [🔗 발표 자료 워크스페이스 접근 금지](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%9B%8C%ED%81%AC%EC%8A%A4%ED%8E%98%EC%9D%B4%EC%8A%A4-%EA%B6%8C%ED%95%9C-%EC%84%A4%EA%B3%84%2C-%EA%B5%AC%ED%98%84-%EA%B3%BC%EC%A0%95)
221168

222169
<br>
223170

224-
### ✨ 드래그 이벤트 발생 시 생기는 쿼리 최적화
171+
### ✨ 드래그 이벤트 발생 시 쿼리 최적화
225172

226173
노트 카드를 **드래그할 때 너무 많은 쿼리가 발생**해 서버가 멈추는 치명적인 문제가 있었습니다. 핵심 기능인 캔버스를 아예 이용할 수 없었기에, 반드시 해결해야 하는 과제였습니다. Octodocs 팀은 소수점 단위로 변하는 좌표를 DB에 저장하기 위해 어떤 최적화를 도입했을까요?
227174

228175
→ [🔗 우측으로 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)
229176

230177
<br>
231178

232-
### 🧨 Redis를 활용한 데이터베이스 부하 줄이기
179+
### 🧨 Redis를 활용해 데이터베이스 부하 줄이기
233180

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

236183
→ [🔗 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)
237184

238185
<br>
239186

240-
### 🐳 개발 환경, 배포 환경 및 CI/CD에 대한 개선 과정
187+
### 🐳 개발 환경, 배포 환경 및 CI/CD 개선해나가기
241188

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

244191
→ [🔗 환경 개선의 여정 따라가기](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)
245192

246193
<br><br>
247194

248-
<h1 id="팀원소개">🧸 팀원 소개</h1>
195+
<h1 id="프로젝트구조">⚙️ 프로젝트 구조</h1>
196+
197+
### System Architecture
198+
199+
![image (13)](https://github.com/user-attachments/assets/bee51119-c814-4f57-8cda-60ea4bfdd2dd)
200+
201+
<br><br>
202+
203+
<h1 id="프로젝트타임라인">🗺️ 프로젝트 타임라인</h1>
204+
205+
![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)
206+
207+
<br><br>
208+
209+
<h1 id="팀원소개">🍻 팀원 소개</h1>
249210

250211
| [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) |
251212
| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |

0 commit comments

Comments
 (0)