react-player-plugin-prompter 오픈소스

영어 학습 서비스를 위한 자막 탐색 및 하이라이트 최적화 오픈소스 라이브러리 개발

기술 스택

ReactTypeScriptESBuildYarn WorkspacesGitHub ActionsViteSCSS
DemoGitHub

내가 구현한 기능

자막 동기화 및 탐색

  • 영상 재생 시간에 따른 자막 스크롤
  • 자막 탐색
  • 한줄 보기, 전체 보기 모드

마주한 이슈

자막 탐색 로직 최적화

자막 탐색 로직에 이진 탐색을 도입해 탐색 속도를 크게 향상시키고 버퍼링 문제를 해결했습니다.

  • 탐색 알고리즘을 순차 탐색(O(N))에서 이진 탐색(O(logN))으로 변경하여 성능 최적화
  • 버퍼링 제거 및 실시간 탐색 가능으로 사용자 경험 개선
  • 테스트 결과, 데이터 크기 증가에 따라 이진 탐색이 순차 탐색 대비 최대 88% 이상 빠름을 확인

Performance Metrics

탐색 속도 개선데이터 크기 10,000 기준, 순차 탐색 평균 13.20ms → 이진 탐색 평균 0.15ms

Yarn Workspaces를 활용한 모노레포 세팅

Yarn Workspaces를 기반으로 모노레포 환경을 구축하고, GitHub Actions를 활용해 NPM 자동 배포 프로세스를 구현했습니다.

  • Yarn Workspaces를 사용하여 core 라이브러리와 demo 애플리케이션을 통합
  • 중복된 의존성을 루트로 통합하여 패키지 관리 간소화
  • GitHub Actions를 통해 main 브랜치로 푸시 시 NPM 자동 배포 설정
  • ESBuild를 사용하여 번들 크기 감소 및 빌드 속도 개선

Keywords

Yarn WorkspacesGitHub ActionsESBuild

Performance Metrics

의존성 관리중복 제거로 간소화
개발 생산성테스트 및 통합 작업 간소화