WOONY's 인사이트

0. 목차 1. Intro 2. 문제: Memory leak으로 인한 App crash 3. 접근 방법 3-1. 네트워크에서 보내주는 방식의 문제인가? - 서버에서 보낸 .m3u8과 .ts파일이 지워지지 않는 건가? - VOD 송출 방식의 문제? - FFmpeg는 대체 어떻게 온디맨드 스트리밍 영상을 보내는 거지? 3-2. 내부 코드 문제인가? - cache를 하지 않아서인가? - unmount를 해주지 않는 건 아닌가? - NodePlayerView -> Video 컴포넌트로 바꾸니 해결 4. 문제의 원인은? 4-1. NodePlayerView: 무엇이 문제였나 4-2. ComponentWillUnmount(): 매번 unmount할 때 stop()을 실행해 playerview를 종료해줘야 하는데 이걸..

후.. 또 어찌어찌 문제 하나 해결해냈다. 이번 건 꽤나 끙끙 앓았던 문제여서 그런지 해결하고 나니 엄청 속이 시원해지는 magic.. 1. Introduction: What is the problem? 지난 번 만들었던 라이브 커머스 방송에 접속했을 때 화면을 클릭하면 채팅창과 하트 날리는 버튼이 가려졌다 나타나는 기능에 더해, 실제 라이브 커머스 스트리밍에서 꼭 필요한 기능인 배너 이미지(하단 이미지 참조)를 만들었다. 스트리머가 URL을 입력하면 해당 URL로부터 이미지와 타이틀, description에 대한 메타데이터를 크롤링해 아래와 같이 배너가 만들어진다. 이를 해결하기 위해 react-native-url-preview 오픈 소스를 가져다가 사용했다. 문제는 오픈 소스로 제공하는 컴포넌트를 뜯..

어쩌다 보니 졸지에 백인데 프론트를 맡아서 하고 있는 처지이나..예전에 디자인도 공부했고 보여지는 것에 관심이 많은지라 프론트도 잘할 수 있을 것이라 생각해 호기롭게 맡았다. 결과는 처참 그 자체..인 것 같았으나! 오늘 드디어 어찌저찌 문제를 해결했다. 엄밀히 말하면 반쪽짜리로 구현했지만, 일단 1차적으로 글을 쓰고 다시 고민해 최종적으로 결과물을 구현해볼 예정이다.(수정 - 문제 해결 완료! 하단에 추가) 현재 우리 팀의 아이템은 이다. 여기서 내가 맡은 부분은 스트리머/뷰어가 라이브 방송을 켰을 때의 화면을 구현하는 것을 맡았다. 관련해서 스켈레톤 코드는 github에서 스트리밍 오픈소스를 참고했다. 참조한 소스코드가 클래스형 컴포넌트로 구성되어 있어 본 코드는 클래스형으로 구현했음을 미리 적는다...