<aside> 👦🏻 FE - Trouble
</aside>
⛔ 문제
Input 유효성 검사 실패 알림을 ref.value 값을 변경하여 출력할 경우 .svg 아이콘이 적용되지 않아 디자인대로 출력되지 않았다.
✅ 해결
Modal 출력 방식과 같이 show/hide 방식으로 구현할 수 있을 것으로 판단하여 적용하였다.
⛔ 문제
버튼과 스타일을 통해 UI를 구현하였으나 활성화/비활성화 조건에 따라 다른 스타일 적용에 어려움을 겪었다.
✅ 해결
알고리즘 문제를 풀 때 사용했던 삼항 연산자를 적용하여 조건부 스타일링을 사용할 수 있을 것으로 판단하여 적용하였다.
⛔ 문제
기능별 Branch 사용으로 PR이 잦았고, 배포 버전의 기능 테스트를 위해 PR, Merge, Pull, Build 등 많은 절차가 반복되어 작업 효율이 떨어졌다.
✅ 해결
AWS Amplify를 이용한 자동 배포 기능으로 작업 효율을 높였다.
⛔ 문제
다른 브라우저에서 camera를 사용 중인 경우 Open-vidu 서버에 접속에 실패하는데, 이 때 나타나는 오류코드가 Open-vidu logger. 즉, 라이브러리 내에서 발생한 코드여서 분기점을 잡기가 어려웠다.
✅ 해결
navigator.mediaDevices.getUserMedia 함수를 통해 내가 원하는 곳에 분기점을 잡을 수 있을 것으로 판단했고 open-vidu 보다 앞선 Lobby 페이지에서 미리 분기점을 잡아 예외처리 하였다.
⛔ 문제
2개의 서버를 사용하는 프로젝트 특성상 axios header를 default로 설정할 수 없어 각각의 instance를 만들어 사용했는데, Login 직후에는 header에 token이 전달되지 않는 오류가 확인되었다.
✅ 해결
login 성공 시 실행되는 interceptor 함수를 추가하였다. interceptor 함수는 instance header에 token을 전달하는 역할을 한다.
⛔ 문제
Open-vidu에서 제공하는 컴포넌트(class형) 내에 위치한 Mike를 상위 컴포넌트에서 props로 제어하려하였으나 didmoutupdate를 통해 제어하려할 경우 init mic 설정부터 오류가 발생했다.
✅ 해결
init 설정 시에도 didmountupdate가 수차례 실행되는 것으로 확인되어 전달한 props의 변경 여부를 체크하는 조건이 필요하다 판단했고 class component에서 지원하는 prevProps 기능을 통해 해결했다.
<aside> 👦🏻 BE - Trouble
</aside>
⛔ 문제
Spring과 Open-vidu를 하나의 서버에 구축했을 때, docker 및 docker 이미지 등을 설치하며 용량이 초과하는 현상이 발생했고, EC2 서버 인스턴스도 자주 끊어지는 문제가 있었다.
✅ 해결
두 서버를 함께 운영하기에는 서버에 무리가 있다 판단하여 Open-vidu 전용 EC2 서버를 만들어서 운영했다.
⛔ 문제
OAuth를 사용하여 구글에 직접 인가코드와 엑세스 토큰을 받아 로그인/회원가입을 구현하려하였으나 unauthorize, miss_match_url 과 같은 에러가 발생했다.
✅ 해결
구글 API권한 요청을 받을 때 리다이렉트 URL을 접속하고자 하는 알맞은 도메인을 기입하지 않았을 경우 발생하는 에러로 판단하여 FE에서 인가코드를 거친 엑세스 토큰을 전달하게하여 해결했다.
⛔ 문제
일반적인 웹사이트와 다른 방식의 기획으로 기본 게임 진행 구현에 대한 로직이 어려웠다.