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를 종료해줘야 하는데 이걸..

휴..오늘 또 한 건 했다. 0. Executive Summary 온디맨드 스트리밍은 스트리머가 방송한 라이브 스트리밍 전체 영상을 저장해 시청자가 '지나간 라이브'(playback) 방송을 보고 싶을 때 언제든 시청할 수 있는(on-demand) 시스템을 말한다. 기존 오픈소스에서 제공하는 playback 기능은 미디어 서버 내 스토리지에 지나간 영상을 저장해뒀다가, 클라이언트로부터 요청이 들어오면 RTMP 프로토콜을 통해 node-media-client에서 제공하는 컴포넌트로 재생하는 방식이었다. 여기에는 두 가지 문제가 있었다. feature의 한계: node-media-client가 제공하는 기능은 지나간 영상을 재생만 할 수 있다. 지나간 영상을 재생/정지/특정 구간 재생 등 다양한 featur..

이전까지 로컬에서 구축했던 프로젝트의 파이프라인은 아래와 같은 형태였다. 이를 클라우드 상에서 배포해 안정적으로 운영하기 위해 지금까지 EC2 서버 구축 및 S3 스토리지 mounting 작업을 진행했다. 현재 서버는 클라우드 상에서 안정적으로 동작하며 S3 스토리지에 스트리머 영상을 실시간으로 저장하고 있음을 확인했다. 따라서 바뀐 파이프라인은 아래와 같다. 1. 클라이언트 클라이언트인 스트리머와 시청자는 RTMP(스트리머->미디어 서버)/HLS(미디어 서버->시청자) 프로토콜을 이용해 서버로 각각 영상을 송출하고 받는다. 2. 서버 전체 서버는 익스프레스로 구성되어 있으며, 내부에는 미디어 서버와 커뮤니케이션 서버로 나뉘어져 있다. 이전까지는 로컬에 구축해놨으나 현재는 EC2에 원격으로 배포한 상태이..

현재 진행 중인 프로젝트에서 이제까지 로컬에서 돌렸던 서버를 EC2로 배포하는데 드디어 성공했다! 아래 링크는 현재 진행 중인 On Air Super Live의 서버 리포지토리. https://github.com/TeamGreyOrg/super_live_server GitHub - TeamGreyOrg/super_live_server Contribute to TeamGreyOrg/super_live_server development by creating an account on GitHub. github.com 나중에 Readme.md에 추가하기 위해 미리 여기다가 오늘 작업한 내역을 글로 쓴다. 여기 글은 EC2를 발급받은 이후부터 진행한다. 1.node.js(NVM) 다운로드 먼저 ec2 터미널에서 ..

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

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

논 블로킹은 NodeJS의 대표적인 특성 중 하나이다. 그런데 보통 논 블로킹과 비동기는 비슷한 느낌으로 함께 쓰이는데, 둘의 차이가 무엇인지 이번에 명확히 짚어보도록 하자. 1. 작업의 분류 2. 블로킹 vs. 논 블로킹 3. 동기 vs. 비동기 4. 정리 1. 작업의 분류 컴퓨터가 수행하는 작업은 동시에 진행될 수 있는가를 기준으로 두 가지로 나눌 수 있다. 동시에 실행될 수 있는 작업 동시에 실행될 수 없는 작업 기본적으로 자바스크립트 코드는 동시에 실행될 수 없다. 예를 들어 var x = 3; var y = 5; 간단한 변수 선언인데, 이 변수 선언을 하는 첫번째 줄과 두번째 줄이 동시에 실행될 수 있나? 위와 같이 순차적으로 쓸 경우 그럴 수 없다. 하지만 자바스크립트 상에서 돌아가는 것이 아..

왐마..진짜 정신없이 한 주가 지나갔다. 1. 나만의 무기 0주차 소회 핀토스가 끝나고 본격적으로 나만의 무기 프로젝트에 들어갔다. 우리는 처음에 내놓은 아이디어였던 런치챗을 더 디벨롭시키기로 하고 아이디어 회의를 시작했다. 하지만 시작부터 난관에 부딪혔는데, 바로 이 서비스를 왜 써야 하는가?가 명확하지 않았기 때문이다. 왜 굳이 사내 다른 직원 혹은 사외 직원을 익명으로 만나서 밥먹어야 하나. 명확히 커리어 관련 문제를 해결하겠다는 목적도 아니고, 그렇다고 아예 소개팅도 아닌 어정쩡한 포지셔닝임을 깨닫고 고민에 빠졌다. 그러다 나온 아이디어는 "재택 직장인이라면 얘기가 다르지 않을까?"였다. 처음에 제시한 솔루션이 비타민이었다면 재택근무 하는 직장인이 겪는 식사 문제는 pain point였다. 식비는..

이번 주에는 설날도 겹치고 번아웃도 오고 여러 면에서 집중을 잘 못했다. 사실 다 변명이지..반성할 건 반성하고 털어낼 건 오늘 이 시간에서 털어내도록 하자. 이번주에 공부한 것들은 아래와 같다. 반효경 교수님 운영체제 강의 운영체제 - File system (1) File system 운영체제 - File system (2) File system implementation 운영체제 - File system (3) File system implementation 2 PintOS Project 4 - File Systems (1) Indexed and Extensible Files PintOS Project 4 - File Systems (2) Extensible Files Start 주말 하루는 푹 쉬기..

간만에 잘 쉬다 왔다! 가서 텅 비우고 왔으니 다시 꽉꽉 채워보자! 0. 과제 관련 개념 정리 저번 글에서 첫번째 과제를 다 구현한 것처럼 적어놨지만, 사실은 반쪽만 구현해놓은 상태이다. 저번 과제에서는 기존에 연속 할당으로 디스크에 저장하는 방식을, FAT 테이블을 구현하고 디스크 내 클러스터 위치를 테이블에 저장하는 방식으로 변경하는 작업(Indexed Files)을 수행했다. 과제에서는 이어서 File growth를 구현하라고 했다. 이는 무엇인가? 확장 가능한 파일을 구현해라. 기본 파일 시스템에서, 파일 크기는 파일이 생성될 때 정해진다. 하지만 대부분 현대 파일 시스템에서는 파일은 처음에 사이즈 0으로 생성되고 매 시간 write가 완료될 때마다 크기가 확장된다. 우리의 파일 시스템은 반드시 ..