ConCoder는 ConCurrency + Coder의 합성어로, "동시에 코딩하는 사람들" 이라는 의미를 가지고 있다.
경희대학교 캡스톤디자인 수업 프로젝트의 일환으로 화상통화와 동시 프로그래밍 서비스를 결합하여 편리하게 하나의 웹 사이트에서 이용할 수 있는 서비스를 개발하였다.
높은 품질과 안정성을 보장하는 알고리즘 화상 교육 웹 서비스를 구현하기 위해 기본적인 웹 프레임워크에 WebRTC , Web Socket 통신, Multi-Thread 처리 등 여러 기술을 더하여 본 서비스를 개발하였다.
![메인화면](https://private-user-images.githubusercontent.com/69030160/240984011-7f852346-5982-4109-ad05-3618798c29e4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQwMTEtN2Y4NTIzNDYtNTk4Mi00MTA5LWFkMDUtMzYxODc5OGMyOWU0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY3ZmYwMTA1NDg3Mjg3MjdjMzEyOGNlNzY5NjA1YWFjYzZjNTdlYTQ3NGE2ODE4YjM4YmM4NmNlZWQyOTVmMjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OcO2_k2Aeqes3JwLIyq-2Hjm4BAlem8AcAGa3CnGq9Y)
✨ 사용자 아이디를 입력 받아 사이트의 사용자 정보와 연동한다.
![사용자 정보 2](https://private-user-images.githubusercontent.com/69030160/240983994-7342fb4b-c8e6-4ede-9e3a-dd71a598de2d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODM5OTQtNzM0MmZiNGItYzhlNi00ZWRlLTllM2EtZGQ3MWE1OThkZTJkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmMDU2ODVkZjdiN2FmZWRlZGY3OGI3NmNiNjNlOGMxM2JmMTU2YWQ4NmYwOGNiMmY4ZTBhN2JlOTJjMjU5NTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._SuyNXRT1ks3NLczXo50C0uDyKaiJPUh0reQ7Y6QQG8)
✨ 카테고리 목록 중 원하는 카테고리를 선택해 해당 카테고리 문제를 랜덤 추천 받을 수 있다.
![카테고리 목록](https://private-user-images.githubusercontent.com/69030160/240984297-6d866cae-741b-499a-b814-2bc0fd9f8183.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQyOTctNmQ4NjZjYWUtNzQxYi00OTlhLWI4MTQtMmJjMGZkOWY4MTgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmMGUwOGU4ZjU4ZGUwZDFkMDIyMjEyNTQ3ZWVmOTE3NGQzYzNkNDZiMWZlNWU4MTg0ZjljNjM0M2I5YmE2NmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.a7tAFt7wOLgP3B-EocQvbJC97yTS5PBTmHPS20z_D9E)
![카테고리 문제 조회](https://private-user-images.githubusercontent.com/69030160/240984303-eae1e767-2330-476e-a9cb-97d5a67fe7f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQzMDMtZWFlMWU3NjctMjMzMC00NzZlLWE5Y2ItOTdkNWE2N2ZlN2Y1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFiMjdiMGZmNjliOWFiMWJlN2E3ZWI1NGQzMDgyNjcxZmIxZGY5ODJiOGY1NWJjNDdkZTdkMjIyZWNhZmJkNTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.VidyvDnoTXRPCYfhW0OKrGuDQTNlsPUjwbAt41DKkx8)
✨ 실시간으로 질문해 답변받을 수 있도록 ChatGPT를 연결한다. 피드백 버튼으로 작성한 코드에 대해 피드백 받을 수 있다.
![gpt 연동 중](https://private-user-images.githubusercontent.com/69030160/240984268-b2e98b69-03e1-4988-aaa1-60cc640c2a07.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQyNjgtYjJlOThiNjktMDNlMS00OTg4LWFhYTEtNjBjYzY0MGMyYTA3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMzYWYzNDMzZTllZDQzMmQyN2QzZTRhOWZlM2JlZmVjMTdjYTA5NzQwYWQ3NWJkZGUzMjFiMjJlYmQ4ZjJjMTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.2ACbie8U00EMniXsW1pbeblZ7Uuq_wNo-cvUIBCuC-E)
![gpt 코드 피드백 시작](https://private-user-images.githubusercontent.com/69030160/240984229-039c6f79-ce64-4560-921e-b733359a44f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQyMjktMDM5YzZmNzktY2U2NC00NTYwLTkyMWUtYjczMzM1OWE0NGY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkyNWNhMDMzYmRkNzBmYjgyOGZjOTM3ZjkzMTk4MGYxNmYyNGZmMDVmYTc0Yjk0MWQwNjA2YzMyMmMxNzQwNzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Vo6ikTTvPRLFm4D2PZi7tRrwYRkRd5d_g8jeoSayENM)
✨ 연동한 사용자 정보를 기반으로 적합한 문제를 추천받을 수 있다.
![문제 추천](https://private-user-images.githubusercontent.com/69030160/240984106-301d5484-44ca-4bc1-849e-30f32cb7fb4d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1OTg3NTksIm5iZiI6MTcyMDU5ODQ1OSwicGF0aCI6Ii82OTAzMDE2MC8yNDA5ODQxMDYtMzAxZDU0ODQtNDRjYS00YmMxLTg0OWUtMzBmMzJjYjdmYjRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4MDA1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTcyNzE5ZGFkNjE2NDMwNGFiMjczMTI5NjYyN2JkY2VhYmRjZTNhZjFjYjgwZmE0NDBkY2I4NzRmZDc0OWE5N2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rwVr8___-Vl7bJVtZdIUOje3DlV2ZyAFldSnVm-qjMM)
민수빈 ✉️ tnqls5417@naver.com
민수빈 ✉️ tnqls5417@naver.com
✨ 가장 왼쪽의 섹터에서 백준에 있는 문제들의 정보를 열람할 수 있다. 필터 검색과 번호 검색을 지원하며, 필터 검색은 DB에서 티어 기준으로 랜덤 추천해준다.
✨ 가운데에는 코드 에디터가 위치해있고, 아래에 컴파일 버튼과 스냅샷 버튼으로 해당 기능들을 이용할 수 있다. 컴파일시 우측 상단 컴파일 정보 섹터에 시간과 메모리 정보를 확인할 수 있으며, 컴파일 실패시 에러 로그를 보여준다.
✨ 우측 중앙에 테스트케이스를 등록하면 컴파일시 각 테스트케이스의 성공 여부도 확인할 수 있다.
✨ 가장 우측 하단에는 채팅 기능을 제공한다.
정지원 ✉️ wjdwl001@khu.ac.kr
최지민 ✉️ 527wlals@khu.ac.kr
민수빈 ✉️ tnqls5417@naver.com
신정아 ✉️ jeonga@khu.ac.kr