How to make Web Based Collaborate Code Editor

Copyright ⓒ All Right Reserved by Buzzvil
How to make
Web Based
Collaborate Code Editor
Created by Ethan.Yoo

View Slide

해커랭크 같은 사이트는 어떻게 만들 수 있을지 고민하다가 조사를 시작
발표 동기

View Slide

기능 분류
● Syntax Highlighting
● Code Compile
● Collaborate Edit
○ Realtime Communication
■ WebSocket / WebRTC
○ Data Sync
■ OT / CRDT

View Slide

Syntax highlighting
● 본질은 CSS
● 다양한 언어를 지원해주는 오픈 소스가 있음
○ Monaco
○ Code Mirror
○ Ace
○ …
● 보통 오픈소스가 HTML의 태그에 스타일을 입히거나, 자신의 태그를
리턴해줌

View Slide

Syntax highlighting - Monaco
● Microsoft 가 제공하는 Open Source
● VS Code와 기능을 공유한다고 함
● VS Code와 유사한 유저 경험 가능
● 강력하지만 언어 지원이 적은 편

View Slide

Syntax highlighting - Codemirror
● 작고 가볍고 유명
● 언어 지원 많은 편
● Monaco에 비해 기능 완성도는 조금 약한
느낌

View Slide

Code Compile
● 컴파일 구현 방법
○ 컴파일에 필요한 정보는 언어와 코드. 이를 기반으로 서버와 상호작용.
■ req : { lang: “js”, code: “console.log(‘hi’)” }
■ res : { output: “hi” }
○ 단일 파일의 경우 해당 언어가 설정된 서버 환경에서 코드를 받아와서 실행하고 이를 결과로
리턴
○ 다중 파일의 경우 환경 설정이 연계되어야 해서 복잡해짐
● 오픈소스 및 클라우드 서비스 존재
○ Judge0
■ 오픈소스
■ 셀프 호스팅 및 유료 API 모두 지원
■ 루비 기반
○ Jdoodle

View Slide

Code Compile - Judge0
● 오픈소스
● 셀프 호스팅 및 유료 API 모두 지원
● 루비 기반

View Slide

Code Compile - Jdoodle
● 유료 API 제공

View Slide

Collaborate Edit
● 실시간으로 유저 간의 문서를 동기화 해야 함
○ 브라우저 간에 실시간으로 데이터를 전달하는 기술 필요
■ WebSocket / WebRTC
○ 연결된 문서 간의 데이터를 동기화 하는 기술 필요
■ OT / CRDT

View Slide

Realtime Communication - WebSocket
● 클라이언트 - 서버 통신
● 브라우저가 서버와 소켓을 여는 방법
● HTTP 요청을 통해 핸드쉐이크 하고 TCP 소켓을 연결하는 방식

View Slide


View Slide

이 방식은 간편하지만
서버 부하가 있는 편

View Slide

Realtime Communication - WebRTC
WebRTC를 활용하면 P2P 통신
가능

View Slide

● Peer to Peer 통신
● 브라우저간에 소켓을 여는 방법
● 주소를 어떻게 획득하는지는 정의되지 않음
○ 이론적으로는 서로 전화로 IP:Port 알려줘도 됨
○ 일반적으로 Websocket 기반의 Signaling
server 구현
● 관련 용어
○ Signaling server : 주소 정보 공유 서버
○ SDP : 주소 정보 규격
○ ICE : 통신 경로 규격
○ STUN server : 주소 확인 서버
○ TURN server : 데이터 중계 서버

View Slide

가장 간단한 WebRTC
흐름
SDP(Session Description Protocol)
SDP
SDP
SDP를 통해서 서로 연결에 필요한 정보를
교환

View Slide

가장 간단한 WebRTC
흐름
ICE(Interactive Connectivity Establishment)
ICEs
ICEs
ICE Candidates를 교환해서 가장 효율적인 네트워크 경로
확정

View Slide

Private network 안에 있는 클라이언트는 자신의 Public IP를 모름
결국 다른 Peer에게 자신의 Private IP를 기반으로 접속을 요청할 것이고 상대는 자신을
찾을 수 없음
NAT(Network Address Translation)

View Slide

상대에게 주소 정보를 전달하기 전에 STUN Server를 통해서 자신의 Public
IP를 획득
STUN(Simple Traversal of User Datagram Protocol)

View Slide

자신이 요청한 주소를 기준으로 응답을 받을지 말지 결정
Symmetric NAT의 경우 요청하는 대상이 달라지면 external port 역시 달라짐
NAT 정책
종류

View Slide

STUN 서버에서 NAT 종류역시 확인을
해줌

View Slide

Peer 간의 NAT 종류에 따라 어떤 방식으로
통신할지 결정
중계 서버(TURN) 사용 여부는 Hole Punching 이 가능한지에
따름
Hole Punching은 네트워크 간에 정책 제약을 없애는 행위

View Slide

직접 연결이 불가능한 Peer의 경우 TURN 서버로 각자 연결시켜서
데이터 중계
TURN(Traversal Using Relays around NAT)

View Slide

● 실제 서비스를 만들 때는 이론을 모두 이해할 필요는 없음
● Signaling Server
○ WebSocket으로 Peer 간에 signal 정보 전달하도록 구현
○ 정해진 규격이 없기 때문에 웹에 있는 샘플들 보면서 작성 필요
● STUN Server
○ Google이 무료 서버 제공. 설정에 해당 URL 넣어주면 끝
● TURN Server
○ HTTP Server 처럼 규격이 정해진 서버라 오픈소스 사용해서 EC2 같은
곳에 올릴 수 있음
○ 클라우드 기반으로 사용량에 따라 돈을 내는 SaaS도 존재

View Slide


View Slide

Data Sync
● 협업 에디터가 동작하는 원리

View Slide

Data Sync
● 두 가지 방식이 존재. OT / CRDT

View Slide

Data Sync - OT
먼저 처리되는 Operation 내용을 반영해서 다음 Operation을
수정

View Slide

Data Sync - OT
모든 Operation을 순서대로 처리해야 하는
제약
중앙 서버를 통해야만 함

View Slide

Data Sync - CRDT
모든 개체를 유니크한 값으로 보는게 포인트. 이러면 순서가 바뀌어도 머지 후 같은
결과를 보장

View Slide

Data Sync - CRDT
동일 지점에 동시입력이 일어날 때 랜덤한 유니크 ID 간의 충돌이
일어난다

View Slide

Data Sync - CRDT
- 동시입력을 어떻게 처리할지에
대한 알고리즘
- 초록색이라고 무조건 좋은
것은 아님. 속도와 메모리
사용량도 고려해야 함
- CRDT의 경우 한 지점에 대한
동시 입력이 아니면 고유함이
보장되기 때문에 어느정도
정확성을 포기해도 말이 됨

View Slide

Data Sync - CRDT
● 실제 구현을 직접하기는 쉽지 않음
● 다행스럽게도 유명한 오픈소스들이 존재
○ Automerge
○ Yjs
○ …
● 특별히 많은 조사를 하지는 않았는데 Yjs가 쓰기 편했음
○ 유명 에디터 라이브러리들의 플러그인을 제공
○ 서버 구현부에 대해서 플러그인을 제공

View Slide

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 이용)

View Slide

후기
● 각 분야의 전문적인 지식을 모두 알기는 어려움
○ 만들어진 것을 최대한 활용하자. OpenSrc, SaaS 등 다양한 도구로 이미 존재한다.
○ 다양한 언어를 알아두면 좋고, 웹 기반은 JavaScript 라이브러리가 많다고 느낌.
○ 프론트엔드의 경우 대부분 React, Vue를 가정하기 때문에 이들의 코어 컨셉은 알면 좋음
● 로컬에서는 잘 되어도 웹에 올리려면 다양한 고민이 필요. 네트워크 지식은 알아두면 좋음.
○ HTTPS
○ CORS
○ DNS
○ …
● 초기 구축은 프론트엔드가 더 리소스가 많이 필요한 느낌..
○ 엮인게 많음. Bundling, Tranﬁle 등 (RCA or VueCli 같은 초기화 도구 좋은 듯)
○ Webpack, Parcel 등 번들러 하나 정도는 알아두면 좋음. 간단한거 (Vite도 좋은 거 같음)
● 전체적으로 알아야 할게 많지만 막상 해보면 금방 함. 모두 알고 해보기보다는 해보면서
찾아가는게 좋은 듯

View Slide

Thanks
Q & A

View Slide

Bye Bye~

View Slide

출처
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

View Slide

How to make Web Based Collaborate Code Editor

How to make Web Based Collaborate Code Editor

Buzzvil

More Decks by Buzzvil

Other Decks in Programming

Featured

Transcript