Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to make Web Based Collaborate Code Editor

15bd1106c5a327d6564f793a1951f269?s=47 Buzzvil
August 04, 2021

How to make Web Based Collaborate Code Editor

by Ethan

15bd1106c5a327d6564f793a1951f269?s=128

Buzzvil

August 04, 2021
Tweet

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