Skip to content

Commit cbf56f5

Browse files
summersummerwhysummersummerwhy
committed
docs: 이모티콘, 순서 변경
1 parent 7462b9e commit cbf56f5

File tree

1 file changed

+29
-79
lines changed

1 file changed

+29
-79
lines changed

‎README.md‎

Lines changed: 29 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,34 @@
2626

2727
<br>
2828

29-
### 🕸️ 관계형 지식 관리 툴
29+
### 🪡 관계형 지식 관리 툴
3030

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

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

3636
<br>
3737

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

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

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

4545
<br>
4646

47-
### ⛺️ 워크스페이스 초대 기능
47+
### 📮 워크스페이스 초대 기능
4848

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

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

5454
<br><br><br><br>
5555

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

5858
<br>
5959

@@ -123,89 +123,25 @@ https://github.com/user-attachments/assets/0c096e40-bed4-4cee-bb8e-40f72a5d43f2
123123

124124
<br><br>
125125

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>
126+
<h1 id="Octodocs 팀의 핵심 경험">🗜️ Octodocs 팀의 핵심 경험</h1>
189127

190-
<h1 id="문제와해결과정">🚧 문제와 해결과정</h1>
191-
192-
### 🐙 실시간 편집 구현 과정
128+
### 🗣️ 실시간 편집 구현 과정
193129

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

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

198134
<br>
199135

200-
### 🌊 데이터 흐름 변경
136+
### ☄️ 데이터 흐름 변경
201137

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

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

206142
<br>
207143

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

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

@@ -245,7 +181,21 @@ Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유
245181

246182
<br><br>
247183

248-
<h1 id="팀원소개">🧸 팀원 소개</h1>
184+
<h1 id="프로젝트구조">⚙️ 프로젝트 구조</h1>
185+
186+
### 🖥️ System Architecture
187+
188+
![image (13)](https://github.com/user-attachments/assets/bee51119-c814-4f57-8cda-60ea4bfdd2dd)
189+
190+
<br><br>
191+
192+
<h1 id="프로젝트타임라인">🗺️ 프로젝트 타임라인</h1>
193+
194+
![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)
195+
196+
<br><br>
197+
198+
<h1 id="팀원소개">🍻 팀원 소개</h1>
249199

250200
| [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) |
251201
| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |

0 commit comments

Comments
 (0)