🍻혼술짝 (HonSoolZZAK)

• 집에서 심심하고 쓸쓸하게 혼술은 그만! 편안하게 집에서 술짝 메이트 찾기!

📆 프로젝트 기간

• 2023년 5월 19일 ~ 2023년 6월 30일

✨우리 팀을 소개합니다

역할	이름	GitHub
Front-end	배정현(L)	https://github.com/JungHBae
Front-end	최성빈	https://github.com/sbchoi5451
Front-end	조선아	https://github.com/princesssana
Back-end	지현경(VL)	https://github.com/Jello92
Back-end	김지현	https://github.com/jihyeon117
Back-end	김상우	https://github.com/kimsangwoo0505
Designer	곽준희

🍹 주요 기능 및 서비스

짠! 버튼

• 짠 버튼을 눌러 상대방과 기분 좋게 짠을 같이 할 수 있습니다.

아이스 브레이킹 카드

• 처음 본 짝꿍과 어색해서 무슨 말을 해야할지 모를때! 아이스 브레이커 질문 카드를 이용하여 짝꿍과 대화를 할 수 있습니다.

이어말하기 게임

• 이어말하기 게임을 통하여 상대방과 재미있게 게임도 하고 친해질 수 있습니다.

유튜브 동시 시청

• 유튜브 링크를 넣으면 짝궁과 원하는 영상을 동시 시청 및 제어할 수 있습니다.

함께 사진찍기

• 만약 짝꿍과 즐거운 시간을 보냈다면, 함께 사진을 찍어 기록할 수 있는 기능이 있습니다. 상대방은 사진 찍는 것에 대한 여부를 선택할 수 있습니다.

최근에 만난 유저, 팔로잉, 차단 유저 목록

• 마이페이지에서 최근에 만난 유저, 팔로잉 하는 유저 및 차단한 유저 목록들을 확인 할 수 있습니다.

도수 레벨

• 도수 레벨은 상대방의 매너를 평가해주는 시스템입니다. 도수가 높으면 높을 수록 매너가 좋은 유저를 의미합니다.

쪽지 기능

• 쪽지 기능을 통하여 유저 간 소통하고 쪽지를 주고 받을 수 있습니다.

유저 찾기

• 유저 찾기를 통하여, 다른 유저를 찾아서 팔로우, 신고, 차단, 쪽지 보내기 및 도수 올리기 등 사용 할 수 있습니다.

방 별 카테고리

• 방 별로 카테고리가 있어, 원하는 카테고리에 방을 생성 하거나, 입장 하실 수 있습니다.

방 설정 기능

• 방 설정 기능을 통하여, 조금 더 세부적으로 원하는 방을 찾아볼 수 있습니다.

🛠 Project Architecture

📚 Tech Stack

FRONTEND

BACKEND

💻Technical Decisions

	사용 기술	기술 설명
공통	WebRTC	서버와 같은 중간자를 거치지 않고 브라우저 간을 P2P로 연결 할 수 있고, 실시간으로 상호작용을 할 수 있다는 특성을 바탕으로 개인화되고 참여 유도적인 웹 서비스에 적합
공통	Websockets	WebRTC의 signal channel로 사용
공통	https	WebRTC에서 카메라 사용 권한 및 보안을 위하여 https 사용
공통	Oauth2.0	oauth2.0를 이용한 카카오 소셜로그인 기능을 추가하여 사용자가 더욱 편리하게 로그인 및 서비스를 이용할 수 있게함
공통	SSE	서버에서 초기 요청을 하지 않고도 필요할 때마다 데이터를 보내줄 수 있으며, 쪽지를 받거나 팔로잉하고 있는 유저의 방 개설시, 알림을 보내주는 용도임으로 SSE를 사용하여 단일 단방향 채널을 열어줌
FE	Typescript	효율적인 Refactoring, 협업 및 유지보수 & 안전하게 Type 활용 가능
FE	React Query	비동기 요청을 해서 받아온 데이터 캐싱, 무효화, stale time 등을 할 수 있게 도와주는 도구로 사용
FE	Jotai	프로젝트의 구성을 고려하여 Redux와 같은 Flux 기반 상태관리보다 atomic 상태관리 선택. Recoil보다 더 가볍고 boilerplate가 적은 Jotai 선택
FE	CloudFront	React 프로젝트가 배포된 s3 버킷에 HTTPS를 적용시키기 위해 사용
FE	CI/CD (FE)	Code Build, Code Deploy & Code Pipeline을 사용하여 배포 및 관리
BE	CI/CD (BE)	Jenkins와 Github Actions (CI) + AWS CodeDeploy(CD) 중 고민을 하였지만, Jenkins의 경우 Docker를 사용해야하며 규모가 작은 프로젝트이므로 설정하는데 리소스 낭비가 발생할 수 있으므로, 설정이 비교적 간단하고 관리에 용이한 GithubAction, Code Deploy 를 사용하여 배포 및 관리
BE	Redis	인메모리 DB인 Redis를 이용해 데이터에 대한 접근시간을 빠르게 만들고 한정된 시간만 유효한 Refresh Token에 대해 유효시간을 설정하여 효율적으로 메모리 사용량 관리
BE	Swagger	프론트와 백엔드의 효율적이고 직관적인 의사소통을 위하여 API의 기능을 문서화하고 테스트 하기 위해 적용
BE	S3	이미지를 직접 DB에 저장하면 DB의 크기가 커져서 성능에 영향을 미칠 수 있으므로, S3와 같은 스토리지 서비스에 이미지를 저장하여 이미지 업로드 기능 구현
BE	Gradle	스크립트 길이와 가독성 면에서도 우수하고, 의존성이 늘어날수록 성능과 스크립트의 품질의 차이가 나며, 빌드 타임 속도도 빠름
BE	Junit	테스트 작업을 자동화하여 개발자의 작업 시간 절약 및 테스트 코드와 실제 코드를 분리하여 작성 할 수 있어 유지 보수에 효과적임. 테스트 결과를 표시하는데 사용하기 쉬운 형식 제공하여 가독성이 좋음

📅 API 명세서

혼술짝! RESTful API

🗝 ERD

⚙ User Feedback 반영

2023.06.17

• 빈방 버그 수정

2023.06.19

• Youtube 구축, 유저 피드백 반영 (메인 페이지 프로필 눌렀을때 국문으로 변경)

2023.06.20

• SSE 및 쪽지 기능 / 유저 피드백 반영하여 디자인 수정 및 쪽지, 유저 찾기 기능 추가

2023.06.21

• 이어말하기 게임 기능 추가
• 방제목, 닉네임 길이 제한
• 방에서 메인 홈 배너를 통해 이탈할 경우 팝업 노출
• 채팅방에서 유저 프로필 누르면, 마이페이지처럼 모달 띄우기
• 비공개 방여부 카드에 보여주기
• YouTube 유저 소리 연결 및 컨트롤 제어
• 유저 카드 이메일 노출 X / 도수 레벨 관련 설명서 구축
• 메인페이지 방 카드 및 입장전 모달 디자인 변경 및 방장 정보 추가
• 유저찾기 기능 추가
• 마이크, 카메라 state 국문으로 변경 및 화면공유 위치 / 마이크, 화면 버튼 버그 수정
• 신고버튼 모달창 닫히기 수정
• 상대방 나가면 바로 화면 전환 될 수 있게 수정
• 강퇴 당했을때 상대방에게 강퇴되었다는 모달 띄우기
• 게스트나 호스트 나갔을때 상대방에게 메세지 모달 뜨우기

2023.06.22

• 유저피드백 반영하여 게임 설명 및 플로우 추가
• 아이스브레이커 기능 구현 (BE)
• Lighthouse 성능 개선 위해 메인 배너 webp로 convert
• 아이스브레이커 기능 디자인 및 구현 완료
• 한줄소개 150자 제한
• 회원가입 카카오 버튼 추가
• 마이크, 비디오 on/off 버그 수정
• 방 삭제 버그 수정 완료
• 사진찍기 기능 구현 완료
• 메세지 기능 추가 완료 / 쪽기 기능 추가 완료

2023.06.23

• 회원 탈퇴 기능
• 아이스브레이커 & 쪽지 사용 background 수정
• 마이페이지에 쪽지 버튼 추가

2023.06.30

• Refresh Token Redis 적용
• 보안처리를 위하여 HTTP Only와 Secure 적용

⚒ 트러블 슈팅

FE

동일 검색 쿼리를 검색했을 때 결과값을 새로 불러오지 않았던 문제

문제사항

검색 input으로 이전과 동일 검색어를 임력했을 때 값을 새로 불러오지 않음.

해결방안

검색어가 atom으로 메인페이지 컴포넌트에 전달되어 값의 update가 있을 경우 useMutation으로 방 리스트 불러옴.

그러나 이전과 동일 값을 입력할 경우 값의 변화가 없기 때문에, trigger용 boolean atom을 만들어서 useEffect를 활용해 검색 성공

Input값이 많은 컴포넌트에 input이 바뀔때마다 전체 렌더링 발생 문제

문제사항

CI/CD환경을 구축하는 과정에서 기존에 jar파일을 EC2를 통해 배포하던 방식과 타이밍적으로 충돌될 경우 EC2를 재시작 해야 하는 경우가 발생했고 탄력적 ip로 설정하지 않아 재시작하면 IP가 변경되어 생기는 설정 문제가 발생

문제분석

예상치 못한 문제로 EC2를 재시작할 경우 매번 IP가 변경된다면 DNS레코드를 변경해야 하고 DNS전파시간 때문에 안정화까지 길면 48시간까지도 걸릴수 있기 때문에 문제가 발생

해결방안

EC2설정을 탄력적 ip로 바꾼다면 CI/CD구축과정에서 생긴 충돌 문제말고도 다른 문제에도 대비할 수 있게 됨

의견조율 및 의사결정

당장에 DNS전파 시간으로 인해 서버가 불안정해질 수 있더라도 CI/CD환경 구축과정에서 생긴 충돌같이 언제라도 EC2를 재시작해야 할 수 있기 때문에 탄력적 IP로 바꾸고 DNS레코드를 변경하기로 결정

OSX 환경에서 Input값이 키보드 Enter이벤트 때 입력이 두번 이상 나가는 현상

문제사항

몇 Mac OS 환경에서 Input값을 입력하고 Enter를 입력했을 때 Keydown event가 두번 나가면서 입력이 두변 인식 되는 현상이 관측됨

문제재현

이 현상을 재현하기 위해 테스트 해본 결과, 크롬 브라우저에서 한글을 입력 할 때 keycode 229가 발생한다는 것을 알게 되었음. 한글의 조합을 통한 글자입력완성의 특성상 입력 도중 입력 완료로 인식하지 않고 아직 입력중인것으로 인식하여 아직 IME composing 단계에서는 아직 composing이기 때문에 229 코드가 나타남.

해결방안

아직 composing 단계에서는 이벤트가 트리거 되면 안되기 때문에, 229를 예외처리 하여 문제를 해결함.

event.keyCode !== eventTarget.addEventListener("keydown", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
});

BE

EC2를 재시작할 경우 생기는 설정 문제

문제사항

CI/CD환경을 구축하는 과정에서 기존에 jar파일을 EC2를 통해 배포하던 방식과 타이밍적으로 충돌될 경우 EC2를 재시작 해야 하는 경우가 발생했고 탄력적 ip로 설정하지 않아 재시작하면 IP가 변경되어 생기는 설정 문제가 발생

문제분석

예상치 못한 문제로 EC2를 재시작할 경우 매번 IP가 변경된다면 DNS레코드를 변경해야 하고 DNS전파시간 때문에 안정화까지 길면 48시간까지도 걸릴수 있기 때문에 문제가 발생

해결방안

EC2설정을 탄력적 ip로 바꾼다면 CI/CD구축과정에서 생긴 충돌 문제말고도 다른 문제에도 대비할 수 있게 됨

의견조율 및 의사결정

당장에 DNS전파 시간으로 인해 서버가 불안정해질 수 있더라도 CI/CD환경 구축과정에서 생긴 충돌같이 언제라도 EC2를 재시작해야 할 수 있기 때문에 탄력적 IP로 바꾸고 DNS레코드를 변경하기로 결정

Game 구현 중 순환 참조 에러 발생

문제사항

game을 구현하는 과정에서 순환 참조 오류가 남

문제분석

SignalHandler는 IdiomGameService를 참조함

IdiomGameService는 SignalHandler 인스턴스를 멤버 변수 signalHandler로 가지고 있음

→ 순환 참조 발생

해결방안

IdiomGameService에서 SignalHandler의 의존성을 제거함

의견조율 및 의사결정

IdiomGameService가 SignalHandler를 직접 의존하는 대신 ApplicationContext를 멤버 변수로 가지고 startGame메서드 내에서 필요할 때마다 SignalHandler 인스턴스를 가져와서 사용함. 직접적인 의존성이 제거되며 순환 참조 해결됨

DB에 저장된 자료가 null값으로 조회되는 문제

문제사항

룸생성부분에서 save로 정보를 db에 저장하는 코드를 작성하고 그 정보를 db에서 조회하는 코드를 작성하였는데 계속 null값이 조회되는 문제 발생

문제분석

코드의 로직과정에서 정보를 조회하는 부분이 조회 정보의 save후 return이 끝나기 이전의 과정이었기 때문에 제대로 조회할 수 없었음

해결방안

1. 정보를 가져오는 부분을 다른 파트를 통해서 해결
2. 기존에 save로 저장하는 부분을 saveAndFlush를 써서 해결

의견조율 및 의사결정

saveAndFlush를 써서 해결해도 성능적인 부분에서 문제가 없고 코드의 가독성도 더 좋아 보이므로 2번방식을 통해서 해결

Host가 비정상적인 방법으로 방을 나가면 방삭제 안됨

문제사항

Host User가 방을 만들고 나가기 버튼을 통해 방을 나가는것이 아닌 비정상적인 방법으로 방을 나가면 방삭제가 안됨. (ex: URL을 통해 다른 사이트로 이동, 브라우저를 종료)

문제분석

방나가기 버튼을 눌러서 제대로 유저가 나간다면 버튼에 반응하는 로직이 작동되도록 할 수 있는데 비정상적인 방법으로 host가 나간다면 이러한 로직이 작동하지 않아서 문제가 생긴 것으로 분석됨

해결방안

1. Session 정보와 연결된 user정보 및 room정보를 저장하고 이를 이용하여 소켓이 Close됐을 때 반응하는 로직을 만들어 문제를 해결

2. 유저들에게 안내메세지를 통해서 가이드라인 제시

3. Socket이 Close 된 후, 일정 시간후 방이 자동으로 삭제되도록 구현

의견조율 및 의사결정

소켓이 Close됐을 때 반응하는 로직을 통하는게 가장 확실한 방법인걸로 판단되어, 유저가 들어오고 MSG_TYPE_JOIN에 반응하는 로직을 이용하여 유저의 Session정보와 유저가 들어온 방의 ID값을 맵으로 연결시키고, Session정보와 유저의 ID값을 맵으로 연결시켜 저장하고 이 정보와 함께 소켓이 닫히는 것에 반응하는 afterConnectionClosed메서드를 이용해서 문제를 해결

공통

https 인증서 및 보안문제로 SDP정보가 유저간에 제대로 전송이 되지 않는 문제

문제사항

1. https는 SSL/TLS 프로토콜을 사용하여 통신을 암호화하므로 공격자가 데이터를 탈취할 수 없고 웹 사이트 서버가 실제 서버임을 확인하므로 사칭이 방지됨
2. 시그널 채널이 https가 아닌 http로 배포되었을 때 SDP정보가 유저간에 제대로 전송이 되지 않아 화상연결이 되지않는 문제가 발생. 대다수의 웹브라우저는 보안이슈로 인해 WebRTC기능에 대해 https를 통해 페이지가 제공되도록 강제하고 있으며 시그널 채널이 https가 아닌 http로 제공된다면 sdp정보가 제대로 전달되지 않게 됨

해결방안

1-1. 무료 HTTPS 인증서 발급 기관인 Let’s Encrypt를 통해 인증서를 발급받아 https 적용

1-2. AWS의 ELB와 Route 53, ACM을 이용하여 인증서를 발급받아 적용

2. 기존에 배포되었던 백엔드 서버를 http가 아닌 https를 통해 배포하여 유저간에 sdp정보가 제대로 전달되도록 하면 됨

의견조율 및 의사결정

1-1. 보통 서비스가 소규모라면 1대의 서버에 Nginx(ELB 대신에 로드밸런서로 사용)를 설치하고 Let's Encrypt에서 발급받은 인증서를 등록함. 그러나 와일드카드 인증서의 경우 자동 갱신이 어렵다는 점과 3개월마다 갱신을 해야 한다는 단점이 있음

1-2. AWS에서 서버를 사용하고 있으므로 갱신이 필요 없는 인증서를 발급받아 적용할 수 있음

결론:

1. 이미 AWS 서버를 이용 중이므로 ELB와 Route 53, ACM을 이용하여 한번에 관리하는 방법이 더 간편하고 쉽다고 판단하여 ACM을 이용하여 인증서를 발급받아 적용함

2. 백엔드 서버가 https로 배포될 수 있도록 작업을 하기로 했으며, 완료되기 전 시간동안은 http로 배포된 서버를 이용해서 작업을 하기로 함

방 개설 후 Guest가 1분안에 들어오지 않으면 자동으로 소켓 끊기는 현상 발생

문제사항

방을 만들고 손님이 안들어온 상태로 1분정도 지속되면 자동으로 소켓이 끊기는 현상 발생

문제분석

따로 추가적인 설정을 해주지 않으면 소켓내에 특정 활동이 없으면 1분내 끊기는 것이 Default값인 것으로 분석

해결방안

1. 소켓의 타임아웃 설정을 변경하여 소켓이 더 길게 지속되도록 함
2. 주기적으로 Ping메세지를 소켓에 보내, 특정 활동을 하고 있다는 것을 알려 연결 유지

의견조율 및 의사결정

타임아웃 설정을 해도 특정 시점에서 끊기므로 Ping메세지를 주기적으로 보내서 소켓연결을 유지하는 방법을 선택하여 문제를 해결

Guest 퇴장 후, Host가 나가면 방이 삭제가 안되는 문제

문제사항

host가 방을 만들고 나가거나, guest랑 만나고 host가 먼저 방을 나가면 방이 제대로 삭제가 되는데 guest 먼저 나가고 그다음 host가 나가면 방이 삭제가 안됨

문제분석

특정유저의 소켓이 연결되지 않은 상태에서 그 유저에게 정보를 전달하면 소켓이 에러가 발생해서 이후부터 로직이 제대로 작동하지 않게되는 것으로 분석됨

해결방안

특정 유저에게 정보를 보내기전 if문과 isOpen을 이용해 session이 미리 열려있나 체크하도록 로직을 짜서 문제를 해결

의견조율 및 의사결정

소켓에 연결된 유저에게 메시지를 날릴 때 연결된 상태가 아닌 유저에게 로직을 날리는 경우를 점검하고 isOpen과 if문을 이용해 소켓이 연결되지 않은 유저에게 정보를 전달해 주는 오류를 해결

Guest 2명이 동시에 입장하면 3명이 입장되는 오류

문제사항

방장이 방을 만들고 두명이 룸체크를 하고 비슷한 타이밍에 입장하면 3명이 입장하는 오류발생

문제분석

체크룸의 GET 요청을 통해서 인원이 2명보다 많을 경우 로직이 통과되지 않도록 제한시켰는데, 방인원이 1명일 경우 메인화면의 2명의 유저가 비슷한 타이밍에 방 입장을 누르고 입장전 체크 모달이 뜨면 둘다 체크룸의 로직이 통과되어 3명이 입장되는 오류 발생

해결방안

1. 룸 엔터부분에서도 한번더 인원을 제한하는 식으로 통제
2. 소켓에서 인원이 2명보다 많을 경우 남은 인원의 소켓이 제대로 연결되지 않도록 하여 통제

의견조율 및 의사결정

가장 확실한 방법은 소켓연결 자체가 안되게 하는 방법이라는 의견이 채택되어 MSG_TYPE_JOIN을 통해 로직이 실행될때 방인원을 체크하고 2명보다 많은경우 조금이라도 느렸던 나머지 한사람의 소켓을 끊어서 해결

🏆 Project Award