Skip to content
/ BE_final Public

항해99 14기 실전프로젝트 3조 모각코ON:

1 star 2 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

hh99-14-Team3/BE_final

BranchesTags

Repository files navigation

header

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


브로셔

⌚ 프로젝트 기간

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

👀 프로젝트 소개

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

커뮤니티 문화가 중요한 개발자들의 편안한 코드 모임을 위해
개발자의, 개발자에 의해, 개발자를 위해,
[모각코 ON:]이 탄생하였습니다.

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

화상 채팅 + 음성 채팅 + 일반 채팅 + 화면공유가 가능한 모각코 룸
간단한 코드를 작성하고 싶다면? 모각코 룸 내에서 코드에디터 제공
모각코 룸에서 만났는데 불량유저라면? 신고기능 혹은 헤어지기 아쉽다면, 친구 신청
내 위치를 기반으로 근처에 있는 개발자들과 모임 가능!
현재 접속 위치 기반 12km내의 생성된 모각코에 참여 가능합니다!
내가 얼마나 공부했더라? 마이 페이지에서 볼 수 있는 나의 통계 데이터
친구와 쪽지를 주고 받으며 함께 모각코 인연을 이어갈 수 있도록 지원
모각코룸에서 만나지 않았던 유저라도 닉네임이나 친구코드로 친구신청을 할 수 있어요!
다른 사람은 얼마나 하나? 오늘의 Best 유저 조회 기능
최근 일주일 공부시간과 코딩온도(ON°)로 베스트 유저 8인을 보여줘요! 모각코온 베스트유저에 도전하세요.

코딩 온도(ON°) 시스템으로 모각코에 성실히 참여한 사람인지 판단할 수 있도록 지표 제공
다른 유저의 코딩 온도(ON°)를 확인하여 얼마나 성실히 모각코를 수행한 사람인지 판단할 수 있어요!


🖥️ 기술 아키텍쳐

architecture


⚠️ 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)

main main

💻 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 디자이너

About

항해99 14기 실전프로젝트 3조 모각코ON:

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages