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도 좋은 거 같음)
● 전체적으로 알아야 할게 많지만 막상 해보면 금방 함. 모두 알고 해보기보다는 해보면서
찾아가는게 좋은 듯