동료들과 함께 소통하며 알고리즘 학습을 할 수 있는 플랫폼

🗝️ KeyWords

#WebRTC #Socket #CRDT

🎥 데모영상 발표영상

🔎 주요 기능

🐱 화상회의

방 생성 버튼으로 새롭게 방을 만들거나 공유받은 방 코드로 이미 있는 방에 참여할 수 있습니다.

방에 입장하는 모습

동료들과 화상회의를 하며 소통할 수 있습니다.
WebRTC P2P로 통신합시다.

4명이 모두 입장한 모습

😎 코드 공동 편집

코드 편집기를 통해 코드를 작성할 수 있습니다.
CRDT로 공동편집을 구현해 참여한 사람들과 함께 편집할 수 있습니다.
집단 지성을 발휘해보세요!

코드를 공동편집하는 모습

📥 문제 보기

문제의 링크를 입력해 문제를 보면서 풀이할 수 있습니다.
크롤링을 통해서 입력한 링크를 가져옵니다.
백준 사이트를 가장 잘 보여줍니다.

백준 문제를 불러오는 모습

🐍 코드 실행

작성한 코드를 실행하고 실행 결과를 확인할 수 있습니다.
소켓과 메세지 큐를 통해 코드 실행이 요청됩니다.
지원 언어 : Python Javascript Java C Swift Kotlin

작성한 코드를 실행하는 모습

💬 채팅

채팅을 통해서도 소통할 수 있습니다. 음성 채팅이 어려운 상황에서나 참고할 자료를 보낼 때 활용할 수 있습니다.
Pub/Sub을 활용해 다중 서버 환경에서도 채팅을 할 수 있습니다.
채팅 중 클로바X에게 질문하고 답변 받을 수 있습니다.

사용자, AI 와 채팅하는 모습

🔎 기술적 도전

프론트엔드의 기술적 도전

• 코드 에디터에서의 공동편집을 위한 CRDT구현
  • 3번의 시도와 구현, 문제해결기와 더 나은 기능을 위해 라이브러리를 도입한 이야기
• 홈화면 성능 최적화 도전하기
  • 더 나은 UX를 위해 홈화면 초기 렌더링 성능 약 14% 개선
• 수많은 모달을 관리하기 위한 공통 모달 만들기
  • 중첩 모달과 많은 모달들을 쉽고 효율적으로 관리하기위한 모달 시스템 만들기

백엔드의 기술적 도전

• 다중 서버 환경에서 코드 실행 동시 요청 처리하기
  • 소켓, Message Queue, Pub/Sub을 도입하여 CPU 사용량 43%, Memory 사용량 21% 감소시킨 이야기
• 다중 소켓 서버 트래픽 관리하기
  • 중앙서버와 Pub/Sub 도입으로 트래픽 분산 & 확장에 자유로운 구조로 개선
• DB 부하 분산하기
  • Master DB CPU 사용룰 90% 감소 및 요청처리 95% 증가
• Nginx 캐싱으로 크롤링 속도 높이기
  • 429 Error 및 InMemory 용량부족 해결 과정 (16만건 처리에 걸리는 시간 64% 감소)
• 도커 이미지 최적화
  • 도커 이미지 사이즈 85% 감소시킨 이야기

🔎 개발기

개발하면서 공부한 내용들과 고민 과정, 이유, 해결 방법을 기록했습니다.

[FE]

• Web RTC를 이해해보자
• S3, CloudFront로 OAC를 통해 프론트엔드 배포하기
• 로컬 환경에서 쿠키 테스트하기
• 채팅창에 쓰로틀링 적용하기
• 쉘 스크립트로 디렉토리별 pre-commit 적용하기

[BE]

• 세션을 활용해 로그인 후 원래위치로 돌아가기
• Transaction 관심사 분리하기
• SSL Termination을 통해 안전하게 HTTP 통신하기
• Blue-Green으로 무중단 배포하기
• Clove X 도입하기
• 서버에서 OAuth 처리하여 자원 보호하기

👉 더 많은 기술정리 보러가기

🔎서버 아키텍처

🔎 팀 소개

J065 서위영	J094 이동길	J126 이희경	J151 지승민
Front-End	Front-End	Back-End	Back-End
@HBSPS	@d0422	@HKLeeeee	@Gseungmin

우리가 일하는 방식

• 그라운드 룰
• 깃 컨벤션
• 게더타운 규칙

😽 Team Notion