일대다 코딩 수업을 위한 실시간 코드 공유 서비스

강의를 개설하고, 내가 교수자인 강의와 참가중인 강의를 확인 할 수 있습니다.

(강의 개설하기)

1주차 수업, 2주차 수업과 같이 레슨을 추가 할 수 있습니다.

강의 관련 정보들을 수정, 강의를 종료시킬수 있습니다.

수업에 필요한 자료들을 업로드, 다운로드 할수 있습니다.

수업에 참가시킬 학생들을 추가 할 수 있습니다.

교수자나 학생이 수업에 입장하면 나타나는 페이지 입니다. 코드 에디터는 microsoft의 오픈소스 Monaco Editor를 사용하였습니다. UI는 goormIDE를 참고 하였습니다.

유저의 온&오프라인 여부를 실시간으로 확인 가능하며, 유저의 Read, Write, Exec 권한을 제어 할 수 있습니다. 또한 다른 유저의 프로젝트에 접근 할 수 있습니다.

각각의 파일을 CRUD 할 수 있습니다.

각각의 파일을 열수 있습니다.

하단의 터미널 창에서 파일을 실행시킨 결과를 확인 할 수 있습니다.

학생은 질문하고 싶은 라인에 커서를 위치시키고 F8을 누르면 질문을 생성하는 창이 생깁니다.

교수자는 수업 중 들어온 질문을 확인 할 수 있고, 질문 내용의 파일 제목을 클릭하면 해당 파일로 이동합니다.

• React.js
• CSS(Sass)
• socket.io
• xterm.js
• Monaco Editor

• https://ide.goorm.io/
• https://microsoft.github.io/monaco-editor/api/index.html
• https://www.npmjs.com/package/@monaco-editor/react
• https://socket.io/

• a2tt
• 권순용 (boyfromthewell)

데모 영상 링크 : https://youtu.be/znzmxhIVmqs