Why we use Vanilla JS?

Why Vanilla JS?

단순히 최신 기술을 도입하는 것이 아닌 프로젝트의 성격에 맞는 기술을 도입하고 싶었습니다.

AUDI(AUdio eDItor)는 클라이언트기반 웹 음성 편집기로 단일 페이지에서 사용자와 인터렉션하며 별도의 서버 작업없이 클라이언트 기반으로 동작합니다.

프로젝트의 특성상 다음과 같은 이유로 Vanilla JS를 사용하기로 결정하였습니다.

1. AUDI(AUdio eDItor) 는 단일 페이지 서비스로 SPA(Single Page Application) 로 제작할 필요가 없다고 판단하였습니다.
   

2. 오디오 편집기의 특성상 렌더링이 빈번하게 일어나는 부분은 오디오 파형을 canvas 에 그려주는 부분입니다. canvas는 필요한 경우 다시 그려주어야하기 때문에 React를 도입했을 때, 빠른 렌더링을 통한 이점이 미미하다고 판단하여 Vanilla JS로 구현하기로 결정하였습니다.
   

3. 오디오 편집과 관련된 부분은 프로젝트의 요구사항으로 별도의 라이브러리 사용없이 Web Audio API를 이용하였습니다.
   

4. 라이브러리의 내부는 Vanilla JS로 구현되어있어 동작과 관련해서 제대로 이해하기 위해서는 표준 API, 순수 JS에 대한 이해가 필요합니다. Vanilla JS를 이용하기로 한 만큼 다른 라이브러리를 사용하지 않고, Drag And Drop API, canvas 등 직접 사용하여 구현하기로 결정하였습니다.

5. 상태관리의 경우, 프로젝트의 규모가 크지않아 Redux와 같은 라이브러리를 도입했을 때 오히려 프로젝트의 구조가 복잡해질 것이라 판단하여 Pub/Sub 패턴을 활용하여 View와 Model을 분리하고, Model을 단일 Store로 관리하기로 결정하였습니다.