목차

1. 서비스 소개
2. 프로젝트 기능
3. 기술 스택
4. 시스템 아키텍처
5. 주요기능 및 데모영상
6. UCC 보러가기
7. 협업 관리
8. 개발 멤버 소개
9. 프로젝트 기간
10. 프로젝트 관련 문서

💡 서비스 소개

개인이 가지고 있는 어려움

• 혼자 알고리즘 문제를 풀때는 작심삼일을 반복한다.
• 혼자 알고리즘 문제를 풀때는 실전과 환경이 달라 몰입도가 떨어진다.
• 친구들끼리 알고리즘 스터디를 할 때 같이 문제 풀고 줌이나 디스코드에 옮겨가서 모여야 하는 문제가 있다.

현재 알고리즘 문제 풀이 플랫폼의 아쉬운 점

• 알고리즘 문제 풀이 후 곧바로 스터디를 진행할 수 없음
• 실제 코딩테스트와 같은 긴장감을 느끼기 어려움

-> 이와 같은 많은 고민을 해결하기 위해 만든, 하나의 환경에서 실전 코딩 테스트와 스터디를 진행할 수 있는 플랫폼입니다.

✨ 주요 기능

🛠️ 기술 스택

상세 기술스택 및 버전

구분	기술스택	상세내용	버전
공통	형상관리	Gitlab	-
	이슈관리	Jira	-
	커뮤니케이션	Mattermost, Notion	-
BackEnd	DB	MySQL	8.0.31
		Mybatis	2.3.0
	Java	Zulu	1.8.0_202
	Spring	Spring	5.3.24
		Spring Boot	2.7.8
	IDE	IntelliJ	2022.3.1
	Cloud Storage	AWS S3	-
	Build	Gradle	7.6
	API Docs	Postman
FrontEnd	HTML5		-
	CSS3		-
	JavaScript(ES6)		-
	React	React	18.2.0
	Node.js	npm	16.18.0
	Openvidu	Openvidu	2.25.0
	Sockjs	Sockjs	1.6.1
	Stompjs	Stompjs	2.3.3
	IDE	Visual Studio Code	1.75.1
Server	서버	AWS EC2	-
	플랫폼	Ubuntu\AWS Liunx	20.04 , AWS Linux2
	CI/CD	Docker	20.10.17
		Jenkins	jenkins/jenkins:lts

🗂️ 시스템 아키텍처

시스템 구성
실코체스 로그인

Front-End 폴더구조

📦src
┣ 📂assets
┃ ┣ 📂font
┃ ┣ 📂gif
┃ ┗ 📂img
┣ 📂components
┃ ┣ 📂auth
┃ ┣ 📂common
┃ ┣ 📂main
┃ ┣ 📂mypage
┃ ┗ 📂study
┣ 📂constants
┣ 📂hooks
┣ 📂layouts
┣ 📂libs
┣ 📂pages
┃ ┣ 📂auth
┃ ┣ 📂main
┃ ┣ 📂mypage
┃ ┣ 📂study
┣ 📂redux
┣ 📂styles
┣ 📜App.css
┣ 📜App.js
┣ 📜index.css
┣ 📜index.js

ERD

와이어프레임

주요 기술

• OpenVidu를 활용한 비디오 스터디 기능

  • 코딩 테스트가 끝난 직후, 참가자들과 얼굴을 보며 스터디를 진행할 수 있습니다.
  • 스터디 진행 시, 버튼을 눌러 다른 사람이 제출한 코드를 실시간으로 확인할 수 있습니다.
  • 발표자는 그림판 기능을 활용하여 코드 위에 글씨를 쓸 수 있고, 참가자들은 공유된 화면을 실시간으로 확인할 수 있습니다.

• WebSocket을 사용한 채팅 기능

  • 코딩 테스트 대기방 및 스터디 페이지에서 참가자들과 실시간으로 채팅을 주고 받을 수 있습니다.

• 채점 서버를 통한 코드 채점 기능

  • Java, Python 두가지 언어를 지원합니다.
  • 제출한 소스코드를 실행시켜 컴파일 에러, 런타임 에러, 메모리 초과, 시간 초과, 정답 여부 확인이 가능합니다.
  • Java processBuilder를 사용하여 외부 파일을 쉘 스크립트 파일로 실행합니다.

• 로그인 및 회원가입

  • JWT를 사용한 stateless 기반 인증/인가를 적용하였습니다.
  • refreshToken을 redis에 저장하여 잦은 요청에 대한 성능을 고려하였습니다.
  • 토큰은 Http-Only 설정을 적용한 Cookie 방식 통신으로 교환합니다.

🖥️ 상세 페이지

회원가입 & 로그인

	회원 가입 ID 닉네임 중복 검사, 비밀번호 이메일 유효성 검사
	로그인 ID, PW 불일치시 안내문 출력
	아이디 찾기 이름과 EMAIL 일치시 이메일로 발송 비밀번호 찾기 ID와 EMAIL 일치시 이메일로 발송(랜덤 문자열 전송)

메인페이지

	메인페이지 상단 nav에 로그인,회원가입 표시 상단 nav에 로그아웃 표시
	메인페이지 검색 조건별 검색기능, 실시간 방 목록 조회(Socket통신)

About 사이트 소개 페이지

About 페이지 사이트 소개 페이지 열람

방생성 페이지

원하는 조건으로 방 생성

대기 페이지

실시간 소켓통신을 통한 채팅 기능 실전같은 코테 안내문 열람

테스트 페이지

2가지 언어로 문제 풀이 가능 테스트케이스 채점 기능

스터디 페이지

그림판 공유 기능 다른 사람이 제출한 코드 열람

마이 페이지

	스터디 기록 참여한 스터디 내역, 제출 코드, 참여자 목록 조회 가능
	내가 푼 문제 내가 푼 문제 목록 조회, 재제출 가능
	프로필 페이지 회원 정보 수정(프로필 이미지는 아마존 S3에 저장)

🎥 UCC 보러가기

👥 협업 관리

Jira

로드맵	스프린트	번다운 차트
	1주 단위 스프린트 설정 [FE],[BE],[CO] 형식으로 지라 이슈명 작성	우하향 그래프

Notion

노션 메인 페이지	데일리 스크럼	그라운드 룰
카테고리별 정리 프로젝트에 필요한 모든 자료 공유	매일 아침 9시, 구성원 모두 일어서서 데일리 스크럼 진행 (진행시간: 최대 10분) 어제 한 일, 오늘 할 일, 느낀점 작성	팀원들과 공통의 약속 설정

📆 프로젝트 기간

23.1.3 ~ 23.2.17

• 기획 및 설계 : 23.1.3 ~ 23.1.15
• 프로젝트 구현 : 23.1.16 ~ 23.2.12
• 버그 수정 및 산출물 정리 : 23.2.13 ~ 23.2.17

📋 프로젝트 관련 문서

구분	링크
와이어프레임	와이어프레임 바로가기
ERD	ERD 바로가기
빌드/배포	빌드/배포 바로가기
시연 시나리오	시연 시나리오 바로가기
API 명세서	API 명세서 바로가기
발표자료	발표자료 바로가기