유저가 어떤 언어의 syntax highlighting을 사용할지 선택할 수 있도록 UI를 만들어야 할 거 같아요

CodeMirror 문서를 보니 자동완성도 지원한다고 합니다. 예제로 나와있는것에선 뭔가 잘 안됐던거 같기도 한데.. 일단 조금 더 알아보고 안되면 다른 라이브러리 찾아봐야 할거 같아요

• run.py, views.py, ...

ㅈㄱㄴ

버그 수정 필요

• SNS Login 기능 구현(kakao, google, ...)

Tests are required in the final report.

• Unit tests
• Component tests
• System tests

React or vanilla javascipt in Flask?

문제점

닉네임 API는 현재 '사용자가 탭을 닫을 때' 서버에 '닉네임을 릴리즈하도록 요청'하고 있습니다.
이것과 관련해서 몇가지 문제를 발견했습니다.

1. 다수의 탭을 열면 모든 탭이 쿠키를 공유하므로 닉네임도 공유합니다.
   하지만 하나의 탭이 닫히면 닉네임이 만료되어 기존 탭들의 정체성이 이상해집니다.
   (다시 요청하면 새 닉네임을 받고, 그 전까진 기존의 닉네임을 사용하지만,그 동안 피어의 목록에 자신이 표시되지 않음)
2. 사용자가 갑작스럽게 종료한 경우(인터넷 끊김, 전원 끊김 등) '닉네임을 릴리즈하도록 요청'하는 것이 불가능합니다.
   동일한 쿠키를 들고 동일한 문서로 돌아가서 제대로 종료해주면 해결되지만, 그동안 귀신 피어가 남아있게 됩니다.

재현 방법

1.의 문제점의 경우

1. 2개 이상의 탭으로 동일한 문서에 접속합니다. 피어목록에는 모두 동일하게 1명으로 나타납니다.(쿠키가 같아야합니다)
2. 탭 하나를 닫습니다.
3. 남은 탭의 피어 목록에서 자신의 이름이 사라집니다.

2.의 문제점의 경우

1. 2개의 서로 다른 환경A,B에서 같은 문서에 접속합니다. 이 때 피어목록에는 2명이 표시됩니다.
2. A에서 인터넷을 끊습니다.
3. A에서 codelive를 종료합니다.
4. 그 후 A가 인터넷을 다시 연결해도, B의 피어 목록에는 계속해서 2명이 표시됩니다.

(가능한) 해결 방법

• 접속 수를 카운트하고, 탭을 닫을 때 카운트를 하나씩 감소시킵니다. 카운트가 0이 될 때 닉네임을 릴리즈합니다.
  이 것은 문제점1은 해결하지만 문제점2는 해결하지 않습니다.
• 닉네임의 릴리즈 결정을 백엔드 측에서 담당합니다.
  예를들어, socketio연결을 형성하고, 같은 쿠키의 연결 수를 카운트하다가, 카운트가 0이 되면 닉네임을 릴리즈합니다.
  socketio는 클라이언트가 말 없이 종료된 경우, timeout제로 기존의 beforeunload와 비슷한 연결 종료 이벤트를 발생시킵니다. 물론 말하고 종료한 경우에도 발생합니다.
  이 것은 두 문제점을 모두 해결합니다.

https://conversejs.org/

• 로그인/로그아웃 시 자동으로 peers 업데이트되도록
• 로그아웃 하면 랜덤한 닉네임이 뜨도록

• Context Diagram
• UML
• Process Model
• 형식은 자유!

• 코드쉐어 레이아웃 참고

react 공부하기

• react vs 그냥 html & 자바스크립트 쓰기

#12 에서 yorkie를 사용한 데모 에디터를 올려두었는데요, modular 하지 않고 한 html 파일 안에 모든 코드가 들어있어 많이 지저분한것 같습니다.

리팩토링 한번 해야 할 것 같아요!

• yorkie 예제 적용해서 동시 편집 가능한 메모장 형태 만들기

Try both and pick one

• https://codeshare.io/500KpD와 같이 뒷부분에 넣은 key에 따라 구분해서 데이터 받아오기

• feature 추가 시 사용할 수 있는 오픈소스 탐색
• 여러 언어 지원 및 각 언어별 syntax highlighting
• https://highlightjs.org/
• 데모 제작

Make it possible to change the font size

create-react-app 만들때 생성된 리드미가 그대로 남아있네요. 현재 플라스크를 사용하고 있으니 리드미 업데이트가 필요할 것 같습니다.