JKVideo 딥다이브
— React Native로 만든 서드파티 Bilibili 클라이언트

1프로젝트 한줄 요약

JKVideo는 React Native + Expo로 개발된 서드파티 Bilibili(중국 최대 동영상 플랫폼) 클라이언트로, DASH 적응형 스트리밍, 실시간 탄막(danmaku), WBI 서명, 라이브 스트리밍을 지원하며 Android/iOS/Web 크로스플랫폼으로 동작합니다. 97.3% TypeScript로 작성된 타입 안전 모바일 아키텍처의 실전 레퍼런스입니다.

2왜 주목받는가

경쟁 클라이언트 대비 JKVideo 장점

3기술 스택 전체 지도

① 프레임워크 & 빌드

② 라우팅 & 상태관리

③ 미디어 & UI

④ 네트워킹 & 데이터

4아키텍처 심화 분석

전체 시스템 구조도

핵심 설계 패턴 5가지

1) 서비스 레이어 패턴

모든 API 호출이 services/bilibili.ts 단일 파일에 집중됩니다. Axios 인터셉터로 모든 요청에 인증 정보를 자동 주입합니다.

// 요청 인터셉터 — 모든 API 호출에 쿠키 자동 주입
api.interceptors.request.use(async (config) => {
  const sessdata = await getSecure('SESSDATA'); // 네이티브: expo-secure-store, 웹: AsyncStorage 폴백
  if (Platform.OS === 'web') {
    config.headers['X-Sessdata'] = sessdata;
  } else {
    config.headers['Cookie'] = `SESSDATA=${sessdata};`;
  }
  return config;
});

2) WBI 서명 알고리즘 (API 보안 역공학)

Bilibili 웹 API 보안 메커니즘을 외부 crypto 의존성 없이 순수 TypeScript MD5로 구현합니다.

3) DASH 적응형 스트리밍 + MPD 직접 생성

Bilibili API가 반환하는 비디오/오디오 분리 스트림을 로컬에서 MPD XML로 조합하여 ExoPlayer에 제공합니다. 스트리밍 프로토콜을 직접 구현하는 드문 사례입니다.

4) 플랫폼 분기 전략

5) Zustand 상태 분리 전략

고빈도 업데이트(progress)는 AsyncStorage 쓰기를 하지 않고, 상태 변화(status/localUri)만 영속화하는 선택적 영속화 패턴을 적용합니다.

5디렉토리 구조 해부

6학습 포인트 (기술별)

6.1 React Native + Expo SDK 55

expo-router v4의 동적 라우팅(app/video/[bvid].tsx), React 19 최신 훅 사용 패턴, EAS Build로 클라우드 빌드 파이프라인 구축법을 배웁니다.

6.2 DASH 적응형 스트리밍

DASH 프로토콜 작동 원리, MPD XML 명세 구조, 비디오/오디오 분리 스트림을 MPD로 합치는 기법, react-native-video의 ExoPlayer/AVPlayer 백엔드 활용, 화질별 스트림 선택 로직을 배웁니다.

6.3 API 리버스 엔지니어링 & WBI 서명

Bilibili WBI 서명 알고리즘 전체 구조, 순열 테이블 기반 키 파생, 순수 TypeScript MD5(외부 의존성 없이 bitwise 연산), 12시간 TTL + stale 폴백 캐싱 전략을 배웁니다.

6.4 탄막(Danmaku) 시스템

XML 기반 탄막 파싱, pako를 이용한 zlib 압축 해제, 5레인 스크롤 탄막 렌더링(타임라인 동기화), 라이브 탄막 1.5초 폴링, 2000개 초과 시 자동 프루닝으로 메모리 관리합니다.

6.5 오프라인 다운로드 시스템

expo-file-system 기반 백그라운드 다운로드, 다운로드 큐 관리, react-native-static-server로 내장 HTTP 서버 구동, LAN QR 코드 공유 패턴을 배웁니다.

7하드웨어 / 시스템 요구사항

8직접 해볼 수 있는 실습 과제

npx create-expo-app@latest --template tabs

9관련 기술 심화 학습 로드맵

10핵심 키워드 사전

11참고 링크

• GitHub — tiajinsha/JKVideo
• Bilibili API 문서 (비공식)
• DASH 명세 — dashif.org
• Expo SDK 55 공식 문서
• expo-router v4 공식 문서
• react-native-video GitHub
• Zustand 공식 문서
• TrendShift