How to make Web Based Collaborate Code Editor

by Ethan

Transcript

1. Copyright ⓒ All Right Reserved by Buzzvil How to make Web Based Collaborate Code Editor Created by Ethan.Yoo
2. Copyright ⓒ All Right Reserved by Buzzvil 해커랭크 같은 사이트는 어떻게 만들 수 있을지 고민하다가 조사를 시작 발표 동기
3. Copyright ⓒ All Right Reserved by Buzzvil 기능 분류 • Syntax Highlighting • Code Compile • Collaborate Edit ◦ Realtime Communication ▪ WebSocket / WebRTC ◦ Data Sync ▪ OT / CRDT
4. Copyright ⓒ All Right Reserved by Buzzvil Syntax highlighting • 본질은 CSS • 다양한 언어를 지원해주는 오픈 소스가 있음 ◦ Monaco ◦ Code Mirror ◦ Ace ◦ … • 보통 오픈소스가 HTML의 <textarea> 태그에 스타일을 입히거나, 자신의 태그를 리턴해줌
5. Copyright ⓒ All Right Reserved by Buzzvil Syntax highlighting - Monaco • Microsoft 가 제공하는 Open Source • VS Code와 기능을 공유한다고 함 • VS Code와 유사한 유저 경험 가능 • 강력하지만 언어 지원이 적은 편
6. Copyright ⓒ All Right Reserved by Buzzvil Syntax highlighting - Codemirror • 작고 가볍고 유명 • 언어 지원 많은 편 • Monaco에 비해 기능 완성도는 조금 약한 느낌
7. Copyright ⓒ All Right Reserved by Buzzvil Code Compile • 컴파일 구현 방법 ◦ 컴파일에 필요한 정보는 언어와 코드. 이를 기반으로 서버와 상호작용. ▪ req : { lang: “js”, code: “console.log(‘hi’)” } ▪ res : { output: “hi” } ◦ 단일 파일의 경우 해당 언어가 설정된 서버 환경에서 코드를 받아와서 실행하고 이를 결과로 리턴 ◦ 다중 파일의 경우 환경 설정이 연계되어야 해서 복잡해짐 • 오픈소스 및 클라우드 서비스 존재 ◦ Judge0 ▪ 오픈소스 ▪ 셀프 호스팅 및 유료 API 모두 지원 ▪ 루비 기반 ◦ Jdoodle
8. Copyright ⓒ All Right Reserved by Buzzvil Code Compile - Judge0 • 오픈소스 • 셀프 호스팅 및 유료 API 모두 지원 • 루비 기반
9. Copyright ⓒ All Right Reserved by Buzzvil Code Compile - Jdoodle • 유료 API 제공
10. Copyright ⓒ All Right Reserved by Buzzvil Collaborate Edit • 실시간으로 유저 간의 문서를 동기화 해야 함 ◦ 브라우저 간에 실시간으로 데이터를 전달하는 기술 필요 ▪ WebSocket / WebRTC ◦ 연결된 문서 간의 데이터를 동기화 하는 기술 필요 ▪ OT / CRDT
11. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebSocket • 클라이언트 - 서버 통신 • 브라우저가 서버와 소켓을 여는 방법 • HTTP 요청을 통해 핸드쉐이크 하고 TCP 소켓을 연결하는 방식
12. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebSocket
13. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebSocket 이 방식은 간편하지만 서버 부하가 있는 편
14. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC WebRTC를 활용하면 P2P 통신 가능
15. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC • Peer to Peer 통신 • 브라우저간에 소켓을 여는 방법 • 주소를 어떻게 획득하는지는 정의되지 않음 ◦ 이론적으로는 서로 전화로 IP:Port 알려줘도 됨 ◦ 일반적으로 Websocket 기반의 Signaling server 구현 • 관련 용어 ◦ Signaling server : 주소 정보 공유 서버 ◦ SDP : 주소 정보 규격 ◦ ICE : 통신 경로 규격 ◦ STUN server : 주소 확인 서버 ◦ TURN server : 데이터 중계 서버
16. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC 가장 간단한 WebRTC 흐름 SDP(Session Description Protocol) SDP SDP SDP를 통해서 서로 연결에 필요한 정보를 교환
17. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC 가장 간단한 WebRTC 흐름 ICE(Interactive Connectivity Establishment) ICEs ICEs ICE Candidates를 교환해서 가장 효율적인 네트워크 경로 확정
18. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC Private network 안에 있는 클라이언트는 자신의 Public IP를 모름 결국 다른 Peer에게 자신의 Private IP를 기반으로 접속을 요청할 것이고 상대는 자신을 찾을 수 없음 NAT(Network Address Translation)
19. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC 상대에게 주소 정보를 전달하기 전에 STUN Server를 통해서 자신의 Public IP를 획득 STUN(Simple Traversal of User Datagram Protocol)
20. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC 자신이 요청한 주소를 기준으로 응답을 받을지 말지 결정 Symmetric NAT의 경우 요청하는 대상이 달라지면 external port 역시 달라짐 NAT 정책 종류
21. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC STUN 서버에서 NAT 종류역시 확인을 해줌
22. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC Peer 간의 NAT 종류에 따라 어떤 방식으로 통신할지 결정 중계 서버(TURN) 사용 여부는 Hole Punching 이 가능한지에 따름 Hole Punching은 네트워크 간에 정책 제약을 없애는 행위
23. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC 직접 연결이 불가능한 Peer의 경우 TURN 서버로 각자 연결시켜서 데이터 중계 TURN(Traversal Using Relays around NAT)
24. Copyright ⓒ All Right Reserved by Buzzvil • 실제 서비스를 만들 때는 이론을 모두 이해할 필요는 없음 • Signaling Server ◦ WebSocket으로 Peer 간에 signal 정보 전달하도록 구현 ◦ 정해진 규격이 없기 때문에 웹에 있는 샘플들 보면서 작성 필요 • STUN Server ◦ Google이 무료 서버 제공. 설정에 해당 URL 넣어주면 끝 • TURN Server ◦ HTTP Server 처럼 규격이 정해진 서버라 오픈소스 사용해서 EC2 같은 곳에 올릴 수 있음 ◦ 클라우드 기반으로 사용량에 따라 돈을 내는 SaaS도 존재 Realtime Communication - WebRTC
25. Copyright ⓒ All Right Reserved by Buzzvil Realtime Communication - WebRTC
26. Copyright ⓒ All Right Reserved by Buzzvil Data Sync • 협업 에디터가 동작하는 원리
27. Copyright ⓒ All Right Reserved by Buzzvil Data Sync • 두 가지 방식이 존재. OT / CRDT
28. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - OT 먼저 처리되는 Operation 내용을 반영해서 다음 Operation을 수정
29. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - OT 모든 Operation을 순서대로 처리해야 하는 제약 중앙 서버를 통해야만 함
30. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - CRDT 모든 개체를 유니크한 값으로 보는게 포인트. 이러면 순서가 바뀌어도 머지 후 같은 결과를 보장
31. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - CRDT 동일 지점에 동시입력이 일어날 때 랜덤한 유니크 ID 간의 충돌이 일어난다
32. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - CRDT - 동시입력을 어떻게 처리할지에 대한 알고리즘 - 초록색이라고 무조건 좋은 것은 아님. 속도와 메모리 사용량도 고려해야 함 - CRDT의 경우 한 지점에 대한 동시 입력이 아니면 고유함이 보장되기 때문에 어느정도 정확성을 포기해도 말이 됨
33. Copyright ⓒ All Right Reserved by Buzzvil Data Sync - CRDT • 실제 구현을 직접하기는 쉽지 않음 • 다행스럽게도 유명한 오픈소스들이 존재 ◦ Automerge ◦ Yjs ◦ … • 특별히 많은 조사를 하지는 않았는데 Yjs가 쓰기 편했음 ◦ 유명 에디터 라이브러리들의 플러그인을 제공 ◦ 서버 구현부에 대해서 플러그인을 제공
34. Copyright ⓒ All Right Reserved by Buzzvil Simple Architecture Signaling Server [EC2] Frontend App [Amplify] Frontend App [Amplify] TURN server [Cloud Service] STUN server [Cloud Service] Yjs CodeMirror WebRTC 추후 고려사항 - Signaling Server 가 스케일을 키우려면 Redis와 같은 별도 DB가 필요 (Pub/Sub 이용)
35. Copyright ⓒ All Right Reserved by Buzzvil 후기 • 각 분야의 전문적인 지식을 모두 알기는 어려움 ◦ 만들어진 것을 최대한 활용하자. OpenSrc, SaaS 등 다양한 도구로 이미 존재한다. ◦ 다양한 언어를 알아두면 좋고, 웹 기반은 JavaScript 라이브러리가 많다고 느낌. ◦ 프론트엔드의 경우 대부분 React, Vue를 가정하기 때문에 이들의 코어 컨셉은 알면 좋음 • 로컬에서는 잘 되어도 웹에 올리려면 다양한 고민이 필요. 네트워크 지식은 알아두면 좋음. ◦ HTTPS ◦ CORS ◦ DNS ◦ … • 초기 구축은 프론트엔드가 더 리소스가 많이 필요한 느낌.. ◦ 엮인게 많음. Bundling, Tranfile 등 (RCA or VueCli 같은 초기화 도구 좋은 듯) ◦ Webpack, Parcel 등 번들러 하나 정도는 알아두면 좋음. 간단한거 (Vite도 좋은 거 같음) • 전체적으로 알아야 할게 많지만 막상 해보면 금방 함. 모두 알고 해보기보다는 해보면서 찾아가는게 좋은 듯
36. Copyright ⓒ All Right Reserved by Buzzvil Thanks Q & A
37. Copyright ⓒ All Right Reserved by Buzzvil Bye Bye~
38. Copyright ⓒ All Right Reserved by Buzzvil 출처 https://microsoft.github.io/monaco-editor/ https://codemirror.net/ https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols https://dzone.com/articles/scaling-webrtc-based-applications https://support.medialooks.com/hc/en-us/articles/360000213312-%D0%95nvironment-signaling- STUN-and-TURN-servers https://en.wikipedia.org/wiki/STUN https://www.slideshare.net/crsgypinChiu/web-rtc-65613228 https://speakerdeck.com/ept/crdts-the-hard-parts https://www.rfc-editor.org/rfc/pdfrfc/rfc6455.txt.pdf