joondong2 / rn_playground

Zoom + YouTube 클론

• NestJS로 간단히 만든 joom-server로 피어간 WebRTC 연결 중개
• 중개서버는 피어간 연결을 중개하고 바로 연결 해제되고, 이후 WebRTC를 통해 피어간 비디오 및 오디오 스트림 통신
• 리스트를 아래로 당겨서 리스트 새로고침
• 비디오 Modal을 아래로 당겨서 최소화 가능
• 최소화 상태의 비디오 Modal을 위로 당겨서 최대화 가능
• 최소화 상태의 비디오 Modal을 아래로 당겨서 방 나가기 가능
• 모달을 최대화/최소화할 때 Bottom 탭바가 아래 위로 이동
• 실제 디바이스에서만 테스트 가능 (XCode > Target > rn_playground > Signing & Capabilities에서 Team 설정 필요) 주의) 테더링한 기기와 해당 기기에 연결된 기기간 통신은 안됨!

카카오 웹툰 클론

• 위아래 무한 순환 스크롤
• 참조: react-native-virtualized-waterfall
• react-native-reanimated V2를 사용해서 구현
• 아이템, 상세화면 전환간 Shared Transition 적용
• 31번 브랜치에서 리팩토링중 (issue 31)

e2e 테스트

• 카카오 웹툰 클론 Shared Transition 테스트
• Zoom 클론 방 생성 테스트

detox-cli 설치

$ xcode-select --install
$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli

빌드 후 테스트

$ detox build -c ios // 빌드 후에만 테스트 가능
$ detox test -c ios

$ detox build -c android
$ detox test -c android

개발환경

• 인텔 맥북 Mac OS: 11.6.1
• 아이폰 6S iOS 15.1
• 안드로이드 LG G7 (안드로이드110), 갤럭시 A32(안드로이드 11)

rn_playground's Issues

[Zoom 클론] 5. 채팅 스크린 고도화

https://github.com/JoonDong2/rn_playground/projects/1

[카카오 웹툰 클론] 무한 순환 스크롤뷰 제작

CircularScrollView 한 바퀴 순환했을 때 깜빡이는 문제

[Zoom 클론] 3. WebRTC를 통해 비디오 및 오디오 스트림 전송

https://github.com/JoonDong2/rn_playground/projects/1

[Zoom 클론] 1. 채팅 스크린 프레임 구성

https://github.com/JoonDong2/rn_playground/projects/1

eslint/prettier 설정

네비게이션 구성

3개의 프로젝트가 탭 네비게이션의 각 탭을 차지한다.

[카카오 웹툰 클론] 웹툰 상세 페이지에 Shared Transition 적용

[Zoom 클론] 모달 상태, 소켓, WebRTC 상태 동기화

[카카오 웹툰 클론] 리팩토링

문제

• 범위 계산을 너무 자주한다. (아이템 높이만큼 이동할 때마다)
• 이에 따라 리랜더링이 너무 자주 발생한다.
• 버퍼를 이용하지 못하고 있다. (랜더링 주기가 너무 잦아 있으나 마나한 상태)

해결

• 지정한 높이를 이동할 때마다 범위를 계산하고 리랜더링을 하는 방법으로 변경
• 지정한 높이를 이동하기 전까지는 버퍼를 보여준다.
• 버퍼 이상으로 스크롤할 때는 공백을 보여준다.

[Zoom 클론] 4. 채팅 스크린에서 WebRTC 통신 구현

https://github.com/JoonDong2/rn_playground/projects/1

테스트 라이브러리 세팅

[Zoom 클론] 2. 피어간 WebRTC 연결

https://github.com/JoonDong2/rn_playground/projects/1

e2e 테스트

[카카오 웹툰 클론] 공유 아이템 컴포넌트 제작