React Native와 함께 인프런 앱 새로 만들기

인프런 앱 히스토리

• 2021년에 인프런 앱 출시 -> 앱 개발 경험이 없는 프론트 개발자가 짧은 시간에 관리 인원없이 개발 -> 평점 2.7 -> 2023년 4월에 스토어 공개 중지
• 2023년 10월 말, 모바일 셀 신설(개발자 2명, 디자이너 1명, 기획자 1명) -> 2024년 초부터 인프런 앱 만들기 -> 6월 중순에 앱 출시
• 가로모드, PiP(Picture in Picture), 백그라운드 재생, 사용성 개선(제스처 등) 지원

왜 또 React Native로 개발?

1. 이전에 망한게 React Native 탓이 아님
2. React 개발자가 충분하고, RN 개발자가 존재해서 Flutter말고 RN으로 다시 진행

React Native Cli와 Expo의 차이점

• core vs framework
• 직접 만들어야 하는 기능이 많음 vs 제공하는 기능이 많아서 개발에 편함
• 커스텀에 편안 vs 커스텀에 불편
  -> React Native Cli로 결정

React Native Architecture

Old Architecture

• multi thread architecture
• JS thread - js 런타임이 앱 bundle 안에 내장, rn으로 개발한 로직들이 번들링되서 올라감
• UI thread - native ui를 렌더링, 사용자의 터치와 화면 업데이트를 담당
• Shadow thread - yoga라는 플렉스 레이아웃 엔진을 이용해서 레이아웃을 계산
  • rn에서 css를 작성하면, shadow thread 요가까지 가서 레이아웃을 계산하는 역할
• 양 사이드간 통신을 담당하는 Bridge가 존재하며, 큐의 구조로 되어있음
  • 큐의 구조라서, 지연 가능성, 동시작업이 힘들고, 앱 초기시간 길어지는 문제 존재, React 동시성 지원x
• 호환성이 좋음(서드파티 라이브러리)

New Architecture

• 다이렉트로 양 사이드 간 소통할 수 있도록 c++를 이용한 중간 인터페이스 계층을 만들게 됨
• 지연없이 다이렉트로 콜, Lazy Loading, 구조의 변경으로 React 동시성 지원
• 이 인터페이스 계층은 rn에서 제공하는 code gen을 이용해서 만들어짐
• 호환성 문제가 존재(라이브러리마다 New Architecture로 마이그레이션 되어있어야 사용 가능)

Bridgeless

• 2024년 4월 22일에 소개한 rn 0.74, yoga 3.0 버전의 New Architecture
• 브릿지 모듈을 별도의 변경 없이 새로운 구조를 실행시킬 수 있는 interop layer 계층이 들어가있음
• migration하지않은 라이브러리들을 별도의 처리없이 New Architecture에서 실행시킬 수 있도록 지원
  • 관련 discussion에 문제가 있을 수 있으니 맹신하지말라는 내용이 존재함

생각보다 차이 안나는 속도

• 현재 회사와 인프런 팀 모두 Old 아키텍처를 사용
• iOS는 조금 차이가 많이 나고, android는 차이가 거의 없음
• 주로 속도 문제는 Android, ios는 퍼포먼스 문제가 상대적으로 적어서 극단적으로 갔을 때 차이가 유의미
  • ios는 c++을 별도의 계층없이 사용할 수 있지만, android는 c++ 사용을 위해 Jni라는 추가 계층이 필요해서 생기는 차이
  • 회사는 주로 ios에서 퍼포먼스 문제가 발생

결론

• 아직 호환되는 모듈들이 존재
• interop layer는 완벽 신뢰 x
• 성능 차이가 아직은 유의미하지 않다는 생각
• 숙련되지 않은 팀

인프런 앱의 Player

• Player 영상을 보여주는 부분과 컨트롤러까지 native로 구현
• js side에서는 play에 필요한 정보들을 넘겨줌
• player는 어떤 액션이 있을 때 player 안에서 끝낼 수 있는 액션은 안에서 끝내고, 그렇지 않은 작업들은 콜백을 통해서 처리하도록 구조 설정
• react-native-video 라는 유명한 라이브러리가 존재하는데, poc하는 시점에 부족한 기능이 있었음
  -> 네이티브 코드 변경 가능성이 매우 높아서, 네이티브 컴포넌트로 구현

• controller도 js가 아닌, native에서 구현
  • 플레이어 들어가는 강의 상세는 API 분기가 매우 복잡
  • 많은 액션과 상태 + 플레이어의 상태까지 결합됐을 때, 고치기 힘든 상태가 될까 두려움
  • player의 state를 js side로 가져오지 않아서, 무분별한 bridge 통신 x
  • android, ios 각각 구현해야하는 단점
    

react native 고질적인 뷰 문제

• ios 가로모드 <-> 세로모드 전환시에 영역이 자연스럽지않고 갑자기 바뀌는 부자연스러운 모습이 존재
• react native 레포에 2017년에 오픈되서 아직 닫히지 않은 이슈..
• 처음부터 가로모드+전체화면으로 시작 or 애니매이션을 이용해서 덜 어색하게 보완이 가능

Bridge 통신 확인 방법

• react native의 message queue 구현체에서 static하게 spy 함수를 심을 수 있도록 개발
  1번째 사진 parameter에 true 전달 or 2번째 사진처럼 구성하면 통신들이 어떻게 되는지 확인 가능
  
  
  

웹뷰에서 줌인 줌아웃이 된다?

• 순수 자바스크립트 엔진 혹은 API에서 들고있는 메서드를 오버라이딩하는 방법
  • 어떤 메서드로 제거됐는지 찾고, 제거되는 순간에 그 메타태그를 다시 삽입해주는 방법 -> 웹 개발의 묘미
    

웹뷰에서 자바스크립트가 동작하지 않는다?

• android에서 Object is not iterable 에러 발생.
• 원인 : 에러의 출처는 class-validator 라이브러리에서 타스로 변환한 결과물때문에 발생
  
  

리스트 최적화

• ScrollView는 rn에서 스크롤 기능을 구현하기 위해 사용하는 기본적인 컴포넌트

  • 컨텐츠가 길어지면 성능에 문제가 생길 수 있음
    -> VirtualizedList를 래핑한 FlatList와 SectionList를 사용

• 리스트 애니매이션 구현 시 제스처 적용을 위해, react-native-gesture-handler의 createNativeWrapper 사용

• 그래도 최적화가 부족하면 FlastList 라이브러리 추천