항해99 14기 실전 프로젝트
BE : 신동현 박다솜 변희준 정종현 / FE : 신주영 신희제 조현정
DE : 임현서

⌚ 프로젝트 기간

2023-05-19 ~ 2023-06-29
1차 릴리즈 : 6.17

👀 프로젝트 소개

모여서 각자 코딩, `모각코`라는 말이 생겨날 정도로 개발자들에게 중요한 문화로 자리 잡은 함께 모여 코딩하기 코드 리뷰를 조금 더 재밌게, 색다르게, 더 편하고 쉽게 할 수는 없을까? 도대체 모각코 어디서 구하지? 온라인 모각코 서비스 플랫폼 `모각코 ON:`에서 모든 것이 가능하다구 😀 내 근처에 있는 이웃 개발자들과 온라인에서 모여서 각자 코딩하고 정말 맘에 드는 친구가 생겼다면 집 앞 카페에서 슬리퍼 신고 만나 편하게 코딩해보자구!! 커뮤니티 문화가 중요한 개발자들의 편안한 코드 모임을 위해 개발자의, 개발자에 의해, 개발자를 위해, [모각코 ON:]이 탄생하였습니다.

🌱 주요 기능 및 서비스 이미지

화상 채팅 + 음성 채팅 + 일반 채팅 + 화면공유가 가능한 모각코 룸

간단한 코드를 작성하고 싶다면? 모각코 룸 내에서 코드에디터 제공

모각코 룸에서 만났는데 불량유저라면? 신고기능 혹은 헤어지기 아쉽다면, 친구 신청

내 위치를 기반으로 근처에 있는 개발자들과 모임 가능!

현재 접속 위치 기반 12km내의 생성된 모각코에 참여 가능합니다!

내가 얼마나 공부했더라? 마이 페이지에서 볼 수 있는 나의 통계 데이터

친구와 쪽지를 주고 받으며 함께 모각코 인연을 이어갈 수 있도록 지원

모각코룸에서 만나지 않았던 유저라도 닉네임이나 친구코드로 친구신청을 할 수 있어요!

다른 사람은 얼마나 하나? 오늘의 Best 유저 조회 기능

최근 일주일 공부시간과 코딩온도(ON°)로 베스트 유저 8인을 보여줘요! 모각코온 베스트유저에 도전하세요.

코딩 온도(ON°) 시스템으로 모각코에 성실히 참여한 사람인지 판단할 수 있도록 지표 제공

다른 유저의 코딩 온도(ON°)를 확인하여 얼마나 성실히 모각코를 수행한 사람인지 판단할 수 있어요!

🖥️ 기술 아키텍쳐

⚠️ Trouble Shooting

BACKEND

• 하나의 인스턴스에 api서버와 openvidu 서버를 동시에 배포 시 두 서버간 연결이 안되고, 포트가 충돌하는 문제 발생
  원인	화면공유 시 보안상의 이유로 https 배포 시도 But, openvidu 서버 자체적으로 nginx를 사용하고 있어서 https 포트가 충돌하는 것이 원인이었음
  시도	openvidu와 api서버를 각각의 다른 인스턴스로 배포 재시도 (Scale-out)
  해결	openvidu와 api서버가 각각 다른 도메인을 갖게 되어서 포트가 겹쳐도 문제가 발생하지 않았음.

• SSE 기능 구현 시 구독 후 connection pool을 계속 차지하여 pending 이 발생하고 DB에 deadLock이 걸리는 문제
  원인	sseEmitter가 구독을 끊어도 계속 connection pool을 차지하고 있어서 발생하는 문제였음
  시도	1차 Scale-up : 비용문제로 프리티어로 제공되는 RDS를 사용중이었기 때문에 스케일업 진행 2차 nginx 설정 변경 : nginx에 이벤트 스트림 설정을 추가하여 sse가 http1.1 버젼을 사용하도록 설정 3차 DB 변경 : 다른 NoSQL을 사용하여 DB 분리 진행
  해결	SSE 관련 요청이 끝나면 영속성 컨텍스트를 닫도록 OSIV 설정을 변경함 이후 매번 DB에 직접 commit 해주어야 하는 사이드 이펙트가 발생하였음

• 클라이언트에서 서버로 요청을 보냈을 때 CORS 에러가 비주기적으로 발생하는 문제
  원인	nginx와 api 서버에서 CORS 설정을 중복으로 하고 있는 것이 원인
  시도	1차 : CORS 에러가 처음 등장했을 때 OpenVidu 서버에 연결되는 요청만 발생하여 OpenVidu 서버의 .env 파일에서 CORS 설정을 변경함 2차 : nginx와 api 서버 간의 CORS 설정을 최소화함
  해결	nginx의 CORS 설정을 제거하고 api 서버의 CORS 관련 로직을 재구성하여 해결

🔎 기술적 도전

BACKEND

1. Github Actions
2. Jacoco
3. Redis Pub/Sub
4. SSE
5. webRTC - OpenVidu

FRONTEND

1. webRTC - OpenVidu
2. 실시간 프로토콜 - 웹소캣, SSE
3. 코드 최적화 - redux-thunk
4. 웹사이트 최적화 - Lighthouse
5. 상태 관리 라이브러리 - redux toolkit

⛳ 기술적 의사결정

BACKEND

• openVidu
  • 이용자들이 온라인에서 원할하게 모각코 모임을 가질 수 있도록 하기 위해 도입.
  • 화상 채팅과 화면공유를 구현할때 N:M 으로 스트림을 공유하기 위해서 webRTC 보다 라이브러리 사용이 보다 안정적이고 사용성이 좋을것으로 판단해 도입.
• redis
  • TTL 기능을 이용하여 access token, refresh token 등의 휘발성 데이터들을 효율적으로 저장하기 위해 도입.
• redis pub/sub
  • 모각코 방 내부에서 이용할 수 있는 기능인 채팅이 저장할 필요가 없는 휘발성 데이터라고 판단, redis를 도입하여 redis Pub/Sub 기능을 사용해서 채팅 구현.
• Github Actions
  • Jenkins와 github action + EC2 두 가지 선택지 중 GitHub Action이 GitHub 와의 연동이 편하고 빠른 시간 내에 배포할 수 있는 장점이 있으며 GitHub에서 발생하는 이벤트를 처리할 수 있다는 점을 통해 해당 선택지를 도입.
• Junit5 / jacoco
  • 작성한 코드가 의도한 대로 동작하는지 확인할 수 있다는 장점과, 테스트 코드는 예상되는 입력과 출력을 정의하고, 코드 실행 결과를 확인하여 코드의 정확성을 검증하고, jacoco를 통해서 커버리지가 어느정도인지 확인해가며 코드 변경이나 리팩토링 후에도 기능의 동작이 올바른지 확인하기 위해서 도입.
• Swagger
  • 프론트앤드 개발자 분들이 모든 엔드포인트를 살펴볼 수 있을 뿐만 아니라 요청을 보내고 응답을 수신하여 작동 중인 엔드포인트를 즉시 테스트할 수 있도록 하기 위해서 도입.
• Docker
  • 각각의 개발자들의 로컬환경과 동일한 환경을 구축하여, 환경으로 인해서 생기는 변수를 방지할 수 있도록 하고, openvidu를 배포하기 위해서 Docker 도입. 아직 소수의 컨테이너를 사용하기 때문에 kubernetes 혹은 swarm은 도입하지 않음.

FRONTEND

• monaco-editor
  • 개발 공부를 하는 서비스 이기 때문에 코드 에디터의 필요성을 느껴서 도입
  • Monaco Edito,를 사용하게된 이유는 CodeMirror, Ace Editor와 같이 다양한 코드 에디터들이 있지만 우리 프로젝트는 많은 언어와 호환이되고 자동완성 기능도 적용이 되는 Monaco Editor를 선택
• char.js
  • 사용자의 마이페이지에서 모각코를 함에 있어서 동기부여를 해줄 수 있는 정보들을 시각화 해서 보여주기 위해 도입
  • 매일매일 기록되는 모각코 참여시간을 차트의 형태로 한눈에 쉽게 볼 수 있도록 하도록 결정.
  • 다양한 차트 라이브러리 중에서 최근까지 계속해서 업데이트 되고, 많은 사용 레퍼런스가 있는 chart.js가 빠른 개발 기간 내에 적용하기 좋을 것이라고 판단하여 도입함.
• react-toastify
  • 커스텀 모달을 사용해서 사용자에게 alert 와 confirm 메세지를 안내하나 사용자의 액션이 별도로 필요없는 메세지를 보여줄때는 스낵바 형태의 메세지가 필요하기 때문에 도입.
• Geolocation Api, KakaoLocal, KakaoMap Api
  • Geolocation api 를 사용해 사용자의 접속위치를 받아올 수 있기 때문에 도입.
  • 생성된 방 정보들을 지도에 표시해주기 위해 카카오 로컬과 카카오 맵 api 도입.
• redux-thunk
  • 사용자가 전역의 상태값을 바꿀때마다 해당 좌표로 접속한 동네명을 받아오는 외부 api 요청 처리가 필요했다. 매번 요청을 하기전에 다른 요청을 하는 것보다 청크로 중간에 외부 api 요청을 하는 단계를 둘 필요성을 느껴 도입.
• react-query
  • 쿼리 캐싱 처리 및 클라이언트 단에서 관리해야 할 상태값을 줄이기 위해 도입
  • 데이터 로딩, 에러 처리 등이 용이하여 유지보수가 편하여 도입
• styled-component
  • 스타일을 컴포넌트화 하여 프롭스로 값을 내려주어 조건부 스타일을 하기에 용이하여 도입.
• react-router-dom
  • React Router dom을 통해 페이지 이동을 구현하였고 outlet을 통해 전체 레이아웃을 쉽게 설정할 수 있어 도입.
• react-redux-toolkit
  • 리액트 전역 상태관리 라이브러리로 프롭스 드릴링 현상을 대비하고 전역으로 상태를 관리하기 위해 도입.
  • 리덕스 보다 설정이 간단하고, 리코일을 새로 배우는거보다 팀원 전체가 러닝커브가 짧을것 같아서 도입
• vercel
  • git 커밋을 트리거로 자동으로 빌드되고 배포되기 때문에 AWS S3 보다 배포 과정이 빠르고 용이해서 적용하였음.
  • .env등 환경설정파일을 쉽게 등록하고 관리할 수 있다.

👧🏻 유저 피드백 반영 사항

• 쪽지 기능 강화 (삭제 추가)
• 유저 신고 기능
• 친구 추가 강화 (채팅, 유저검색 추가)
• 관리자 기능
• 튜토리얼
• 보안 강화 - 리프레쉬 토큰
• 메인 검색 속도 개선
• 화면 공유 기능 안정성 강화
• 검색 기능 분리 - 지역, 모각코 제목
• 상태코드 이해 어려움 - 툴팁 추가
• 모각코룸 내에서 참여 인원 확인 기능
• 실시간 채팅 편의성 강화 - 욕설 필터링, 공백입력 방지

↗️ BACKEND TEST CODE

Total of 295 Test Case / Code Coverage 82% 달성 (Unit Test)

💻 Tech Stack

FRONT-END

BACK-END

🎓 프로젝트 멤버

이름	주특기		GitHub
신동현	Spring	BE 리더	https://github.com/been1118
신주영	React	FE 리더	https://github.com/godjooyoung
신희제	React		https://github.com/Shinheeje
조현정	React		https://github.com/chohyunjungai
박다솜	Spring	총무🔫	https://github.com/mansooonuna
정종현	Spring		https://github.com/Shuan75
변희준	Spring		https://github.com/bheejun
임현서	Designer	디자이너