프로젝트 주제 선정을 위해 만들어본 working demo.
IDE 및 live share 기능 구현에 대한 가능성 검증.
https://live-share-omega.vercel.app 접속 후,
Editor링크 클릭.
liveshare-demo.mov
NextJS 15 사용.
다만, React19 support을 하지 않는 패키지들이 있어서 18.2.0으로 downgrade.
codemirror6 사용. (https://codemirror.net/)
문서 편집을 위한 기본적인 기능만 제공하고 있는만큼, 목적에 맞게 이용하기 적절하다는 생각이 듬.
partyKit 사용. (https://docs.partykit.io/reference/y-partykit-api/)
프로젝트 시에는 소켓 관리 부분을 직접해보거나, SocketIO를 사용할 수 있을 것 같음.
커서의 위치를 계산해서 동기화.
다른 사용자의 커서는 <div>로 표현.
데모인만큼 서버에 코드 내용을 저장하고 있지 않기 때문에 conditional하게 render하게 되면
다른 파일로 이동 시 코드 내용이 유지되지 않음.
이를 해결하기 위해, portal로 실제로는 다른 곳에 모든 파일에 대한 에디터를 render 시키고,
에디터 위치에는 현재 선택된 파일에 대한 에디터만 보여줌.
예전에 여기서 봤던 방 6AE5 식 (https://youtu.be/uEnLhxL8Afs?si=tUe8n7oDAGjU_7jO)
터미널 구현
터미널에서 명령어를 실행할 수 있어야 하기 때문에 실행 환경 도커 이미지를 만들어서 띄워줘야 할 것 같음.
커밋 구현
커밋을 위한 action을 만들어줘야 함. 사용자가 깃허브의 리포를 연동했을 때, action을 만들어줘야 하고 커밋 시에는 커밋이 완료되면 notify해줄 수 있어야 함.
코드 상태 저장
실시간으로 코드를 저장해줘야 함. Socket 구현 서버에서 해주면 될 것 같음.
preview용 브라우저
프론트엔드 프로젝트를 위해 preview용 브라우저를 넣어줘야함.. 어떻게 하는지 모름..
에디터 세부 기능
shortcut 등 에디터 세부 기능에서 구현해야할 것이 너무 많음..
Replit에서 keybinding 라이브러리들을 만들어놓은게 있긴 한데 그걸 고려해도 쉽지 않을 듯. (https://blog.replit.com/codemirror)
intellisense만 생각해도 벌써 머리가 아프다..
테스트 및 에러 처리의 문제
여러 사용자가 동시에 사용해야 하고, user interaction이 많다보니까 테스트나 에러 처리 난이도가 확 증가함.
Synchronization 문제
누가 더 높은 우선순위를 가질 것인가에 대한 문제는 role-based로 하거나, Excalidraw처럼 라인별로 version number 부여 / 유저별로 random한 숫자를 생성 후 더 높은 사람에게 부여하면 될 것 같음. (https://youtu.be/gvEoTVjVjB8?si=tSUqyxLGSE5wZPrf)
IDE 및 live share 기능 구현에 대한 어려움 파악.
대신 동시 편집 기능의 구현에 대한 가능성 검증.