실시간 웹 협업도구 만들기 v0.3
DESCRIPTION
TRANSCRIPT
![Page 1: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/1.jpg)
실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13
![Page 2: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/2.jpg)
실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13
![Page 3: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/3.jpg)
실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13
![Page 4: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/4.jpg)
About Me
Sunday, October 13, 13
![Page 5: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/5.jpg)
About Me
Javascript
Sunday, October 13, 13
![Page 6: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/6.jpg)
Sunday, October 13, 13
![Page 7: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/7.jpg)
Sunday, October 13, 13
![Page 8: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/8.jpg)
Sunday, October 13, 13
![Page 9: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/9.jpg)
Sunday, October 13, 13
![Page 10: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/10.jpg)
Sunday, October 13, 13
![Page 11: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/11.jpg)
Sunday, October 13, 13
![Page 12: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/12.jpg)
https://github.com/HackerWins/summernote
Sunday, October 13, 13
![Page 13: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/13.jpg)
https://github.com/HackerWins/summernote
Sunday, October 13, 13
![Page 14: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/14.jpg)
Sunday, October 13, 13
![Page 15: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/15.jpg)
Sunday, October 13, 13
![Page 16: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/16.jpg)
실시간 웹 협업도구 만들기
Sunday, October 13, 13
![Page 17: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/17.jpg)
Collaborationis everything
Sunday, October 13, 13
![Page 18: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/18.jpg)
Sunday, October 13, 13
![Page 19: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/19.jpg)
조장A: “제길 내가 조장 ㅠ”
팀원 C: “대학은 술먹는 곳”
팀원 B: “아인슈타인은 내친구”
Sunday, October 13, 13
![Page 20: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/20.jpg)
Email based Collaboration
Sunday, October 13, 13
![Page 21: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/21.jpg)
조장A: 템플릿 받으셈
Sunday, October 13, 13
![Page 22: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/22.jpg)
조장A:나도 내부분 작성
팀원 B: “E=mc^2”
팀원 C: “지식인에서 C & P”
Sunday, October 13, 13
![Page 23: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/23.jpg)
팀원 C: “난 한글 없어서 HWP 파일 편집 못해”
Sunday, October 13, 13
![Page 24: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/24.jpg)
조장 A: “다했으면 보내주셈”
Sunday, October 13, 13
![Page 25: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/25.jpg)
조장A: 취합 취합
Sunday, October 13, 13
![Page 26: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/26.jpg)
조장 A: “이거 다시보내 주셈”
Sunday, October 13, 13
![Page 27: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/27.jpg)
팀원 C: “지식인에서 C & P”
Sunday, October 13, 13
![Page 28: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/28.jpg)
조장 A: “제대로 고쳤나?”
Sunday, October 13, 13
![Page 29: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/29.jpg)
조장A: “취합 취합 (파일이 많아졌어...)”
Sunday, October 13, 13
![Page 30: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/30.jpg)
조장A: “취합 취합(죽겠네...)”
Sunday, October 13, 13
![Page 31: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/31.jpg)
첨부파일을 이용한 이메일 기반 협업
로컬 컴퓨터에 편집기가 설치되어 있어야함
리비전 관리가 어려움
Sunday, October 13, 13
![Page 32: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/32.jpg)
조장A: “문서 링크 받으셈”
http://wiki.ooo.com
Sunday, October 13, 13
![Page 33: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/33.jpg)
Sunday, October 13, 13
![Page 34: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/34.jpg)
Sunday, October 13, 13
![Page 36: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/36.jpg)
Lock, Save
Sunday, October 13, 13
![Page 37: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/37.jpg)
Lock & Save
Sunday, October 13, 13
![Page 38: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/38.jpg)
사용자 C: “Blah Blah”
Sunday, October 13, 13
![Page 39: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/39.jpg)
사용자 B: “문서에 락걸렸네”
Sunday, October 13, 13
![Page 40: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/40.jpg)
사용자 C: “저장!”
Sunday, October 13, 13
![Page 41: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/41.jpg)
사용자 B: “이제 편집된다.”
Sunday, October 13, 13
![Page 42: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/42.jpg)
사용자 B: “몽창 날라갔다.ㅠ”
Sunday, October 13, 13
![Page 43: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/43.jpg)
Lock & Save 협업 도구
페이지 락을 기다리는 불편함이 있음
네트워크가 끊어질 경우 데이터 손실의 위험이 있음
Sunday, October 13, 13
![Page 44: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/44.jpg)
real-time collaboration
Sunday, October 13, 13
![Page 45: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/45.jpg)
Sunday, October 13, 13
![Page 46: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/46.jpg)
Sunday, October 13, 13
![Page 47: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/47.jpg)
Sunday, October 13, 13
![Page 48: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/48.jpg)
사용자 C: “Blah Blah”
사용자 B: “Blah Blah”
조장A: “취합이 필요없군”
Sunday, October 13, 13
![Page 49: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/49.jpg)
웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구
Sunday, October 13, 13
![Page 50: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/50.jpg)
웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구
Sunday, October 13, 13
![Page 51: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/51.jpg)
편집기 만들기
Sunday, October 13, 13
![Page 52: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/52.jpg)
입력
출력
Sunday, October 13, 13
![Page 53: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/53.jpg)
이벤트 핸들러
Sunday, October 13, 13
![Page 54: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/54.jpg)
이벤트 핸들러
Sunday, October 13, 13
![Page 55: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/55.jpg)
도큐먼트 모델
이벤트 핸들러
Sunday, October 13, 13
![Page 56: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/56.jpg)
도큐먼트 모델
렌더러
이벤트 핸들러
Sunday, October 13, 13
![Page 57: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/57.jpg)
도큐먼트 모델
렌더러
이벤트 핸들러
코드가 많아
Sunday, October 13, 13
![Page 58: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/58.jpg)
도큐먼트 모델
렌더러
‘가’이벤트 핸들러
Sunday, October 13, 13
![Page 59: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/59.jpg)
도큐먼트 모델
렌더러
‘가’ doc.addText(‘가’)
이벤트 핸들러
Sunday, October 13, 13
![Page 60: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/60.jpg)
도큐먼트 모델
렌더러
‘가’ doc.addText(‘가’)
renderer.paint(para)
이벤트 핸들러
Sunday, October 13, 13
![Page 61: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/61.jpg)
도큐먼트 모델
렌더러
‘가’ doc.addText(‘가’)
renderer.paint(para)
<P>가</P>{HTML}
이벤트 핸들러
Sunday, October 13, 13
![Page 62: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/62.jpg)
‘node cookbook’번역중...
학기말 과제 작성중...
난 그냥 들어와 봤어...
Sunday, October 13, 13
![Page 63: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/63.jpg)
‘node cookbook’번역중...
나도 껴줘~!!!
Sunday, October 13, 13
![Page 64: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/64.jpg)
Sunday, October 13, 13
![Page 65: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/65.jpg)
‘가’
Sunday, October 13, 13
![Page 66: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/66.jpg)
‘가’ doc.addText(‘가’)
Sunday, October 13, 13
![Page 67: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/67.jpg)
‘가’ doc.addText(‘가’)
update(doc)
Sunday, October 13, 13
![Page 68: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/68.jpg)
‘가’ doc.addText(‘가’)
update(doc)
change(doc)
Sunday, October 13, 13
![Page 69: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/69.jpg)
‘가’ doc.addText(‘가’)
update(doc)
change(doc)
renderer.paint(doc)
renderer.paint(para)
Sunday, October 13, 13
![Page 70: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/70.jpg)
‘가’ doc.addText(‘가’)
<P>가</P>{HTML}
update(doc)
change(doc)
renderer.paint(doc)<P>가</P>{HTML}
renderer.paint(para)
Sunday, October 13, 13
![Page 71: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/71.jpg)
‘가’ doc.addText(‘가’)
<P>가</P>{HTML}
update(doc)
change(doc)
renderer.paint(doc)<P>가</P>{HTML}
renderer.paint(para)
동일한 결과~!!!
Sunday, October 13, 13
![Page 72: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/72.jpg)
‘가’ doc.addText(‘가’)
<P>가</P>{HTML}
update(doc)
change(doc)
renderer.paint(doc)<P>가</P>{HTML}
renderer.paint(para)
하지만 문서를 전송해서느리다~!!!
Sunday, October 13, 13
![Page 73: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/73.jpg)
‘가’
‘나’
Sunday, October 13, 13
![Page 74: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/74.jpg)
‘가’ doc.addText(‘가’)
‘나’doc.addText(‘나’)
Sunday, October 13, 13
![Page 75: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/75.jpg)
‘가’ doc.addText(‘가’)
update(doc)
‘나’doc.addText(‘나’)
update(doc)
Sunday, October 13, 13
![Page 76: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/76.jpg)
‘가’ doc.addText(‘가’)
update(doc)
‘나’doc.addText(‘나’)
update(doc)
Conflict!동시편집은 무리
Sunday, October 13, 13
![Page 77: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/77.jpg)
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 78: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/78.jpg)
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 79: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/79.jpg)
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 80: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/80.jpg)
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 81: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/81.jpg)
스타크래프트 마린부대는이동중 모든 좌표를 전송할까?
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 82: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/82.jpg)
OT(Operational����������� ������������������ Transformation)
Sunday, October 13, 13
![Page 83: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/83.jpg)
OT����������� ������������������ (wikipedia)
• Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.
Sunday, October 13, 13
![Page 84: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/84.jpg)
OT����������� ������������������ (wikipedia)
• Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.
Sunday, October 13, 13
![Page 85: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/85.jpg)
“OT is likereal-time Git”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13
![Page 86: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/86.jpg)
• Data Model
• Operation Model
• OT Function
OT����������� ������������������ (basic)
Sunday, October 13, 13
![Page 87: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/87.jpg)
• Data Model
• Operation Model
• OT Function
OT����������� ������������������ (basic)
Sunday, October 13, 13
![Page 88: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/88.jpg)
• Data Model
• Operation Model
• OT Function
OT����������� ������������������ (basic)
Sunday, October 13, 13
![Page 89: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/89.jpg)
• Data Model
• Operation Model
• OT Function
OT����������� ������������������ (basic)
Sunday, October 13, 13
![Page 90: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/90.jpg)
도큐먼트 모델
렌더러
‘가’ doc.addText(‘가’)
renderer.paint(para)
<P>가</P>{HTML}
이벤트 핸들러
기억하세요?
Sunday, October 13, 13
![Page 91: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/91.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Sunday, October 13, 13
![Page 92: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/92.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Operation 실행
Sunday, October 13, 13
![Page 93: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/93.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Operation 전송
Sunday, October 13, 13
![Page 94: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/94.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Operation 변환
Sunday, October 13, 13
![Page 95: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/95.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Operation 변환
OT Function
Sunday, October 13, 13
![Page 96: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/96.jpg)
replicated����������� ������������������ architecture����������� ������������������ for����������� ������������������ shared����������� ������������������ documents
Operation 실행
Sunday, October 13, 13
![Page 97: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/97.jpg)
OT(Function)
Time
Client 1 Client 2“APL” “APL”
Sunday, October 13, 13
![Page 98: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/98.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’)
“APPL”
OT(Function)
Sunday, October 13, 13
![Page 99: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/99.jpg)
O1 = INS(1, ‘P’)
Sunday, October 13, 13
![Page 100: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/100.jpg)
O1 = INS(1, ‘P’)
INSERT : 삽입
Sunday, October 13, 13
![Page 101: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/101.jpg)
O1 = INS(1, ‘P’)
글자의 삽입 위치
삽입 문자
Sunday, October 13, 13
![Page 102: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/102.jpg)
“APL” ?
O1 = INS(1, ‘P’)
Sunday, October 13, 13
![Page 103: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/103.jpg)
“APL” “APPL”
O1 = INS(1, ‘P’)
Sunday, October 13, 13
![Page 104: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/104.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’)
“APPL”
OT(Function)
Sunday, October 13, 13
![Page 105: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/105.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 106: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/106.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1 = INS(1, ‘P’)
“APPLE”
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 107: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/107.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1 = INS(1, ‘P’)O2 = INS(3, ‘E’)
“APPLE”“APPEL”
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 108: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/108.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1 = INS(1, ‘P’)O2 = INS(3, ‘E’)
“APPLE”“APPEL”
“APLE”“APPL”
APPEL ≠ APPLE
OT(Function)
Sunday, October 13, 13
![Page 109: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/109.jpg)
Time
Client 1 Client 2“APL” “APL”
OT(Function)
Sunday, October 13, 13
![Page 110: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/110.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’)
“APPL”
OT(Function)
Sunday, October 13, 13
![Page 111: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/111.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 112: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/112.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1’ = INS(1, ‘P’)
“APPLE”
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 113: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/113.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)
“APPLE”“APPLE”
“APLE”“APPL”
OT(Function)
Sunday, October 13, 13
![Page 114: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/114.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)
“APPLE”“APPLE”
“APLE”“APPL”
O2’ : index++
OT(Function)
Sunday, October 13, 13
![Page 115: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/115.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)
“APPLE”“APPLE”
“APLE”“APPL”
APPLE = APPLE
OT(Function)
Sunday, October 13, 13
![Page 116: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/116.jpg)
Time
Client 1 Client 2“APL” “APL”
O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)
O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)
“APPLE”“APPLE”
“APLE”“APPL”
APPLE = APPLE
OT(Function)
Sunday, October 13, 13
![Page 117: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/117.jpg)
O1'⋅O2 = O2'⋅O1
where
(O1', O2') = transform(O1, O2)
OT(Function)
Sunday, October 13, 13
![Page 118: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/118.jpg)
Visualization of OT with a central server
http://localhost:8080/visualization.html
Sunday, October 13, 13
![Page 119: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/119.jpg)
‘가’ doc.addText(‘가’)
update(doc)
‘나’doc.addText(‘나’)
update(doc)
Conflict!동시편집은 무리
Sunday, October 13, 13
![Page 120: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/120.jpg)
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 121: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/121.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
동시 편집시 충돌 발생
Sunday, October 13, 13
![Page 122: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/122.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
Sunday, October 13, 13
![Page 123: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/123.jpg)
Sunday, October 13, 13
![Page 124: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/124.jpg)
Sunday, October 13, 13
![Page 125: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/125.jpg)
Sunday, October 13, 13
![Page 126: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/126.jpg)
Sunday, October 13, 13
![Page 127: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/127.jpg)
Sunday, October 13, 13
![Page 128: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/128.jpg)
Sunday, October 13, 13
![Page 129: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/129.jpg)
OTServer
OTClient
Sunday, October 13, 13
![Page 130: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/130.jpg)
OTServer
OTClient
Operation만 전송
Sunday, October 13, 13
![Page 131: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/131.jpg)
문제����������� ������������������ 없나요?
Sunday, October 13, 13
![Page 132: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/132.jpg)
OTServer
OTClient
Sunday, October 13, 13
![Page 133: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/133.jpg)
OTServer
OTClient
Sunday, October 13, 13
![Page 134: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/134.jpg)
var document = { insertText : function(){ ... }, deleteText : function(){ ... }, updateStyle : function(){ ... }, ...};
class Document { public Document(){ ... } public void insertText(){ ... } public void deleteText(){ ... } public void updateStyle(){ ... } ...};
비슷하게 생겼는데쉽게 포팅 가능?
Sunday, October 13, 13
![Page 135: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/135.jpg)
Javascript는 Java와 완전히 달라
- 더글라스 크락포드
Sunday, October 13, 13
![Page 136: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/136.jpg)
자바스크립트
“C 언어의 옷을 입은 LISP”
- 더글라스 크락포드
함수 = 일급 객체
클로져
Sunday, October 13, 13
![Page 137: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/137.jpg)
도큐먼트 모델
렌더러
이벤트 핸들러
코드가 많아
Sunday, October 13, 13
![Page 138: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/138.jpg)
문제의 본질은 중복
Sunday, October 13, 13
![Page 139: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/139.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
Document Model 중복
Sunday, October 13, 13
![Page 140: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/140.jpg)
한편...
Sunday, October 13, 13
![Page 141: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/141.jpg)
이벤트 기반의 논 블러킹 I/O작은 서버
- 라이언 달(Node.js)
Sunday, October 13, 13
![Page 142: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/142.jpg)
C? 루아? 하스켈?
Sunday, October 13, 13
![Page 143: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/143.jpg)
Javascript !!!
Sunday, October 13, 13
![Page 144: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/144.jpg)
Sunday, October 13, 13
![Page 145: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/145.jpg)
Javascript가서버에서
돌아간다 ㅠㅠ
Sunday, October 13, 13
![Page 146: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/146.jpg)
var document = { insertText : function(){ ... }, deleteText : function(){ ... }, updateStyle : function(){ ... },...};
class Document { public Document(){ ... } public void insertText(){ ... } public void deleteText(){ ... } public void updateStyle(){ ... }...};
Sunday, October 13, 13
![Page 147: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/147.jpg)
OTServer
OTClient
같은 코드
Sunday, October 13, 13
![Page 148: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/148.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 중복
Sunday, October 13, 13
![Page 149: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/149.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
Sunday, October 13, 13
![Page 150: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/150.jpg)
One����������� ������������������ more����������� ������������������ thing...
R.I.P.����������� ������������������ Jobs
Sunday, October 13, 13
![Page 151: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/151.jpg)
JSON POJO
OR-MAPPINGJSON to POJOPOJO to JSON
Server RDBBrowser
Table
Sunday, October 13, 13
![Page 152: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/152.jpg)
우린 왜? 이유없이 데이터 형변환을 하고 있을까?
문서에 무결성이 왠말이냐!!
Sunday, October 13, 13
![Page 153: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/153.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
불필요한 형변환
Sunday, October 13, 13
![Page 154: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/154.jpg)
OR-MAPPINGJSON to POJOPOJO to JSON
Server NoSQL
JSON JSON
Browser
Document
Sunday, October 13, 13
![Page 155: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/155.jpg)
cradlenano mongoskin
Interfacing with Databases
가벼운 API
강력함 API
깨끗한 API
Sunday, October 13, 13
![Page 156: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/156.jpg)
실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
형변환 최소화
Sunday, October 13, 13
![Page 157: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/157.jpg)
Real-time(OT)����������� ������������������ server����������� ������������������ vs����������� ������������������ Web����������� ������������������ server
Sunday, October 13, 13
![Page 158: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/158.jpg)
Long����������� ������������������ connection����������� ������������������ vs����������� ������������������ Short����������� ������������������ connection
Sunday, October 13, 13
![Page 159: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/159.jpg)
Long����������� ������������������ connection����������� ������������������ vs����������� ������������������ Short����������� ������������������ connection
Sunday, October 13, 13
![Page 160: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/160.jpg)
Long����������� ������������������ connection����������� ������������������ vs����������� ������������������ Short����������� ������������������ connection
Sunday, October 13, 13
![Page 161: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/161.jpg)
Sunday, October 13, 13
![Page 162: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/162.jpg)
Web����������� ������������������ sockets
Sunday, October 13, 13
![Page 163: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/163.jpg)
Sunday, October 13, 13
![Page 164: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/164.jpg)
Realtime application framework for Node.JS, with HTML5 WebSockets and cross-browser fallbacks support.
Sunday, October 13, 13
![Page 165: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/165.jpg)
Sunday, October 13, 13
![Page 166: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/166.jpg)
Request/broadcast����������� ������������������ vs����������� ������������������ Request/response
Sunday, October 13, 13
![Page 167: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/167.jpg)
Request/broadcast����������� ������������������ vs����������� ������������������ Request/response
Sunday, October 13, 13
![Page 168: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/168.jpg)
Request/broadcast����������� ������������������ vs����������� ������������������ Request/response
Sunday, October 13, 13
![Page 169: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/169.jpg)
Request/broadcast����������� ������������������ vs����������� ������������������ Request/response
Sunday, October 13, 13
![Page 170: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/170.jpg)
var joined = false;var room = io.connect('/room');var content = $('#room-content');room.on('connect', function() { $('#room-form').css('display', 'block'); content.append($('<p>').text('Connected'));});
...
Sunday, October 13, 13
![Page 171: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/171.jpg)
Real-time(OT)����������� ������������������ server����������� ������������������ vs����������� ������������������ Web����������� ������������������ server
• Long connection vs Short connection
• Request/broadcast vs request/response
Sunday, October 13, 13
![Page 172: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/172.jpg)
어 때요? 참 쉽죠?
Sunday, October 13, 13
![Page 173: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/173.jpg)
Sunday, October 13, 13
![Page 174: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/174.jpg)
“Unfortunately, implementing OT sucks.”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13
![Page 175: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/175.jpg)
Sunday, October 13, 13
![Page 176: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/176.jpg)
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
etherpad-lite(2941)
Collaborative editor
Changeset Ace socket.io uberDBChattingCursorUndo
etherpad-lite
Sunday, October 13, 13
![Page 177: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/177.jpg)
“Check out ShareJS. Its the one true way ;)”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13
![Page 178: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/178.jpg)
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
ShareJS(2235)
OT framework
ot-typeAce
CodemirrorTextarea
browserchannel
livedb
ShareJS
Sunday, October 13, 13
![Page 179: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/179.jpg)
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
ot.js(220)
OT framework
ot.js Codemirror socket.io N/ACursorUndo
ot.js
Sunday, October 13, 13
![Page 180: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/180.jpg)
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
Changeset(30)
Library Changeset N/A N/A N/A
Changeset
Sunday, October 13, 13
![Page 181: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/181.jpg)
OT with node.js
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
etherpad-lite(2941)
Collaborative editor
Changeset Ace socket.io uberDBChattingCursorUndo
ot.js(220)
OT framework
ot.js Codemirror socket.io N/ACursorUndo
ShareJS(2235)
OT framework
ot-typeAce
CodemirrorTextarea
browserchannel
livedb
Changeset(30)
Library Changeset N/A N/A N/A
Sunday, October 13, 13
![Page 182: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/182.jpg)
Summary• Real-time collaboration
• Text Editor?
• Operational Transformation
• OT with node.js
• OT software in node.js
Sunday, October 13, 13
![Page 183: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/183.jpg)
한편...
Sunday, October 13, 13
![Page 184: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/184.jpg)
Tony����������� ������������������ Stark����������� ������������������ and����������� ������������������ Mark����������� ������������������ 42
Sunday, October 13, 13
![Page 185: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/185.jpg)
마크 1토니가 아이언맨 1편에서 처음 만듬
Sunday, October 13, 13
![Page 186: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/186.jpg)
Tony����������� ������������������ Stark:����������� ������������������ 아이언맨����������� ������������������ 수트����������� ������������������ 42개����������� ������������������ 이상����������� ������������������ 만든����������� ������������������ 용자
Sunday, October 13, 13
![Page 187: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/187.jpg)
Sunday, October 13, 13
![Page 188: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/188.jpg)
Sunday, October 13, 13
![Page 189: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/189.jpg)
ot-summernote
Sunday, October 13, 13
![Page 190: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/190.jpg)
https://github.com/HackerWins/summernote
Sunday, October 13, 13
![Page 191: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/191.jpg)
https://github.com/HackerWins/ot-summernote
ot-summernote
Name(Github Star)
Type OT Engine Editor C/S Channel Persistence Features
ot-summernote
(2)
experimental
Changeset summernote socket.io N/A N/A
Sunday, October 13, 13
![Page 193: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/193.jpg)
FAQ
Sunday, October 13, 13
![Page 194: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/194.jpg)
FAQQ) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요~? 라는게 가장 궁금하네요. by OO Son
Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO
Sunday, October 13, 13
![Page 195: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/195.jpg)
FAQ
A) 한 개발자의 건전한 주말 취미생활 수준
Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요~? 라는게 가장 궁금하네요. by OO Son
Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO
Sunday, October 13, 13
![Page 197: 실시간 웹 협업도구 만들기 V0.3](https://reader036.vdocuments.mx/reader036/viewer/2022081716/5467d294af7959d51d8b5258/html5/thumbnails/197.jpg)
감사합니다.
Sunday, October 13, 13