-
orange4glace's profile image
orange4glace
June 18, 2019
# Dependency Injection과 Event Driven Design
필자는 개인 프로젝트인 Olive를 개발하면서 디자인 관점에서 일어나는 문제들에 대해 고민해보는 시간을 가졌습니다. Premiere Pro 의 보급형 레벨을 목표로 하는 현 프로젝트는 수 많은 뷰들이 존재하고, 여러개의 모델들, 이를테면 타임라인 모델, 드로잉 모델, 리소스 모델 등이 한 데 어우러져야만 모양이라도 내볼 수 있는 수준입니다. 지금까지 다양한 웹 어플리케이션들을 개발해왔지만, 대부분이 한 두개의 뷰(View)를 중심으로 한 두개의 핵심 모델만을 구현하는 정도의 레벨이었습니다. 나름 어느정도 수준의 프로그램들을 많이 개발해왔다고 생각했었지만, 지금의 시점에서 그 프로그램들을 생각해보면 여태까지의 필자의...
-
orange4glace's profile image
orange4glace
May 16, 2019
Audio rendering in web
HTML Video 태그를 대신 할 비디오 플레이어를 웹 기술을 통해 만든다고 상상해보세요. 영상을 재생하기 위해서는 두 가지가 필요하죠. 비디오 렌더링과 오디오 렌더링입니다. 비디오 렌더링을 위해서는 HTML Canvas API를 사용하면 될 것 같고, 오디오 렌더링을 위해서는 Web Audio API를 사용하면 될 것 같습니다. (영상 디코딩은 이미 끝났다고 가정하죠. 편의상 이미 디코딩된 영상 데이터를 서버로부터 스트리밍 받고 있다고 생각합시다. 현재의 네트워크 기술로는 허무맹랑한 이야기지만요.) 이전 포스트에서 Offscreen Canvas라는 API를 언급한 적이 있습니다. 웹 상에서 무거운 그래픽 렌더링...
-
orange4glace's profile image
orange4glace
April 10, 2019
Web Worker-Postable 라이브러리 작성기
필자는 최근 Electron 플랫폼을 기반으로 한 오픈소스 영상 편집 프로그램을 만들고 있습니다. 프리미어 프로의 저질 짝퉁 버전이라고나 할까요. 웹 생태계의 특성상 새로운 기술들이 빠르게 적용되긴 힘들지만, 동시에 웹에 대한 많은 관심이 수년간 이어지면서 이에 대한 논의와 도입이 활발하게 이루어지고 있는것은 굉장히 즐거운 일이라고 생각합니다. 저같이 뭣도 모르는 녀석도 영상 편집 프로그램 같은걸 만들 생각도 할 수 있게 해주니까요. 이 프로그램에서 핵심이 되는 부분 중 하나는 OffscreenCanvas 이라는 기술입니다. 영상 편집 프로그램은 당연히 영상을 렌더링해서 보여주는...
-
orange4glace's profile image
orange4glace
March 9, 2019
MobX 내부 살펴보기
React는 상태 관리(State management)를 위해 기본적으로 setState 함수를 사용합니다. React를 처음 접하기 시작했다면 몇 가지 컴포넌트들을 만들고, 활용해보면서 React가 props와 state를 변경하는 것 만으로도 인터렉티브한 웹 어플리케이션을 얼마나 쉽고 간단하게 만들 수 있는지에 감탄할겁니다. 하지만 여러분들의 어플리케이션의 규모가 커짐에 따라 setState만으로는 상태 관리가 충분하지 않다는 것을 느끼게 됩니다. 관리해야 할 컴포넌트가 늘어나고, 자연스럽게 컴포넌트 간의 의존성이 생기게 됩니다. 여러분은 React의 State API를 대체할 무언가를 찾으러 나설 겁니다. 그 중 가장 대표적인 두 라이브러리가 Redux와 MobX이죠....
-
orange4glace's profile image
orange4glace
January 9, 2019
실시간 문서 협업은 어떻게 동작할까
실시간 문서 협업은 어떻게 동작할까 이번 포스트에서는 우리들이 일상 생활에서 자주 유용하게 사용하는 Google docs와 같은 실시간 문서 협업 프로그램이 어떻게 동작하는지 알아보도록 하려 한다. 실시간 문서 협업 프로그램은 Google docs와 같은 일반적인 문서뿐만 아니라, 슬라이드, 스프레드시트, 또는 코드까지도 하나의 문서를 온라인을 통해 여러 사람과 동시에 수정하고 공유할 수 있도록 해준다. 이러한 프로그램을 구현할 수 있는 방법은 여러가지가 있는데, 그 중 가장 보편적으로 사용되고 Google docs에 사용된 기술은 Operational Transform이라는 기술이다. Operational Transform은 기본적으로 다수의...