Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/#156 server에 Page별 editor crdt 적용 #163

Merged
merged 28 commits into from
Nov 21, 2024
Merged

Feature/#156 server에 Page별 editor crdt 적용 #163

merged 28 commits into from
Nov 21, 2024

Conversation

hyonun321
Copy link
Collaborator

@hyonun321 hyonun321 commented Nov 21, 2024 •
edited
Loading

📝 변경 사항

  1. CRDT구조로 client와 server 연동
  2. useSocket -> useSocketStore Zustand 로 소켓 연결 관리
  3. 각종 작업 관련 버그 수정
  4. 직렬화된 정보를 사용하는 곳에서 class로 역직렬화를 하고, 이를 Props로 자식요소에 전달해주는 방식을 사용.
  5. 서버에서 pageId를 생성하여 클라이언트에 부여 (create/page)

🔍 변경 사항 설명

  1. CRDT구조로 client와 server 연동
    | Workspace -> Page -> editorCRDT -> Block -> Char ..
  • 의 구조로 동작하도록 각 client의 editor와 server의 API 통일

  1. useSocket -> useSocketStore Zustand 로 소켓 연결 관리

  2. 각종 작업 관련 버그 수정

  • 불필요한 Props interface 개선
  • 필요한 Props interface 추가
    • pageId, BlockId 등 인터페이스 개선
  1. 직렬화된 정보를 사용하는 곳에서 class로 역직렬화를 하고, 이를 Props로 자식요소에 전달해주는 방식을 사용.
  • 사용되는 컴포넌트에서 역직렬화 메소드를 통해 useState상태 및 useRef로 활용하여 컴포넌트 렌더링에 사용
  • 현재는 workspace부터, editorCRDT까지만 해당하는 클래스에서 역직렬화 하여 사용되고, 이후 editorCRDT부터 나머지 Char까지는 모든 자식요소에 클래스 인스턴스로 전달하고 있다.
  • 이유는 해당 요소에 도착할때마다 인스턴스화를 할경우, 기존에 있는 값들 끼리 비교하는 insert연산을 할때 역직렬화를 하지 않아 메소드를 찾지 못하는 현상이 발생하여 props로 바로 클래스를 넘겨주었습니다.
  1. 서버에서 pageId를 생성하여 클라이언트에 부여 (create/page)
  • 페이지 버튼을 누르면 서버에서 pageId를 부여받고 이를 기반하여 클라이언트 인스턴스에 등록&렌더링이 진행된다.

🙏 질문 사항

  • 동작 테스트 부탁드립니다. (버그제보 받습니다!)
    • 아직 Page의 Id끼리 입력된 값을 분류하여 넣어지지는 않습니다.
    • MongoDB가 없어도 client <-> server와의 간단한 동작테스트를 하실 수 있습니다.

📷 스크린샷 (선택)

  • 작업 사항
    image

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

Ludovico7 and others added 27 commits November 19, 2024 15:08
@Ludovico7
feat: 페이지 클릭해도 캐럿 이동 구현
4818000
@Ludovico7
Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-boost…
37ade42 
…project into Feature/#155_페이지_클릭시_캐럿_이동
@hyonun321 @Ludovico7
작업사항 저장 추후 삭제
359d346 
Co-authored-by: Yeonkyu Min <[email protected]>
@Ludovico7
Merge branch 'Feature/#156_server에_Page별_EditorCRDT_적용' of https://gi…
2f039d7 
…thub.com/boostcampwm-2024/web33-boostproject into Feature/#156_server에_Page별_EditorCRDT_적용
@Ludovico7
temp: 작업사항 커밋
ebc8048
@Ludovico7
feat: 기존 editorref구조로 수정
c38c5c5
@Ludovico7 @hyonun321
refactor: editor, 키입력 핸들러 서버에서 받아온 값 사용하도록 수정
e6f495f 
Co-authored-by: hyonun <[email protected]>
@Ludovico7
fix: 캐럿 이상하게 초기화되는 문제 수정
0565a7a
@Ludovico7
refactor: CRDT 라이브러리 직렬화, 역직렬화 메서드 추가
d246ded 
#156
@Ludovico7
feat: workspace 직렬화, 역직렬화 메서드 추가
9ab3021
@Ludovico7
feat: 소켓 데이터 수신하여 로컬 인스턴스 생성
81f4767
@Ludovico7
feat: 서버 인스턴스 메서드 추가
16a9038 
- 블록 추가
- 블록 삭제
- 페이지 아이디 생성
@Ludovico7
feat: 소켓 연결 커스텀 훅 zustand로 변경
81679a3
@Ludovico7
refactor: authUser 역직렬화
c687408
@Ludovico7
fix: 진행사항 커밋
1f7f8f8
@Ludovico7
변경사항 저장
c01f779
@Ludovico7 @hyonun321 @minjungw00
fix: 서버와 클라이언트 CRDT 인스턴스 동기화
3c1c3cf 
Co-authored-by: hyonun <[email protected]>
Co-authored-by: minjungw00 <[email protected]>
@hyonun321
chore: build 에러 수정
5082250 
- useSocket 사용안되는곳 제거
- workspace useState 추후 사용예정이므로 console.log 추가해둠
@Ludovico7
fix: 블럭 업데이트 수정
d9519c0 
- 타입 변경시 텍스트 추가 불가
- 타입 변경시 block 역직렬화 안되있음
@Ludovico7
fix: 블록 타입 변경시 통신 안되는 버그 수정
4aac477
@hyonun321
chore : build되게 개선
2fcfeba 
- 사용하지 않는 모듈 제거
@Ludovico7
fix: 페이지 추가 진행상황 저장
bb091a6
@Ludovico7
변경사항 저장
54b6e76
@hyonun321
feat: create/page 연동 추가
641fbc8 
- 새로고침하면 page isVisible False로 변경
- emit -> braodcast, emit 으로 송신자와 나머지에게 전부 보내도록 수정
- pages, workspace 에 usePagesManage 의존성 부여하여 바로 반영되도록 수정

#156
@hyonun321
chore: 빌드에러 수정
cae8395 
- 불필요한 console.log 제거
@hyonun321
Merge branch 'Feature/#156_server에_page별_EditorCRDT_적용' of https://gi…
71db95e 
…thub.com/boostcampwm-2024/web33-Nocta into Feature/#156_server에_page별_EditorCRDT_적용
@pipisebastian
Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-Nocta …
bcddda1 
…into Feature/#156_server에_Page별_EditorCRDT_적용

# Conflicts:
#	client/src/App.tsx
#	client/src/features/editor/Editor.tsx
#	client/src/features/editor/components/block/Block.tsx
#	client/tsconfig.tsbuildinfo
@hyonun321 hyonun321 added FE 프론트엔드 작업 BE 백엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 labels Nov 21, 2024
@hyonun321 hyonun321 added the P1 긴급/즉시 반영 label Nov 21, 2024
@Ludovico7 @hyonun321
@minjungw00 @pipisebastian
chore: lint 설정
5024188 
Co-authored-by: hyonun <[email protected]>
Co-authored-by: minjungw00 <[email protected]>
Co-authored-by: Jang seo yun <[email protected]>
minjungw00
minjungw00 approved these changes Nov 21, 2024
View reviewed changes
Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다!!!

pipisebastian
pipisebastian approved these changes Nov 21, 2024
View reviewed changes
Copy link
Member

@pipisebastian pipisebastian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

짱입니닷,,,... 꼼꼼하게 못봐드려서 죄송합니다,,, 🙇‍♂️

@github-actions github-actions bot merged commit 95b0f0d into dev Nov 21, 2024
5 checks passed
@pipisebastian pipisebastian deleted the Feature/#156_server에_Page별_EditorCRDT_적용 branch November 26, 2024 04:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pipisebastian pipisebastian pipisebastian approved these changes

@minjungw00 minjungw00 minjungw00 approved these changes

@Ludovico7 Ludovico7 Awaiting requested review from Ludovico7

Assignees

@Ludovico7 Ludovico7

@hyonun321 hyonun321

Labels
BE 백엔드 작업 FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 P1 긴급/즉시 반영
Projects
None yet
Milestone
하나의 문서를 동시에 편집할 수 있다.
Development

Successfully merging this pull request may close these issues.
4 participants
@hyonun321 @minjungw00 @pipisebastian @Ludovico7