Together Coding

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

프로젝트 설계 및 제작

Front-End UI/UX 구성도

Front-End 컴포넌트 구성도

구현 및 개발 내용

내 정보 페이지

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

(강의 개설하기)

교수자의 메인 페이지

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

강의 관리

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

템플릿 업로드 & 다운로드

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

참여자 추가

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

웹 IDE

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

유저 현황

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

파일 관리

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

파일 열기

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

파일 실행

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

실시간 코드 수정 , 커서 위치 공유

질문 생성

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

질문 확인

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

---

사용한 기술

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

Reference

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

Contributor

• a2tt
• 권순용 (boyfromthewell)

---

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