Web Worker 2 [Web worker] 웹워커 간단 사용기 들어가며 이번 글은 web worker(이하 웹 워커)에서 postMessage에 대한 에러를 확인하고 이를 수정하는 방법론? 에 대한 글입니다. 이 글에선 웹 워커의 간단한 동작,worker와의 통신, react에서 사용할 때 주의해야 할 점을 다룹니다. Web worker란 web.dev 문서를 잡고하면 웹 워커는 웹 애플리케이션에서 백그라운드 스크립트를 생성하기 위한 API입니다. 이 말보다는 저는 웹 워커는 자바스크립트에 없는 동시성을 주는 브라우저의 기능이다라고 설명합니다. 자바스크립트의 한계 웹 워커는 자바스크립트의 언어 자체가 가진 문제점으로 인해 만들어졌습니다. 자바스크립트는 단일 스레드 환경으로 여러 가지 스크립트를 동시에 실행할 수 없습니다. 그래서 비동기 코드를 작성하거나 setTim.. 2023. 9. 4. [Next.js] 분리된 음원을 다시 하나로 (Web Assembly, web worker) 들어가며 만드는 서비스 중에 AI를 통해 음원을 분리해주는 "Source Separation"이 있습니다. 음원을 분리하여 유저에게 분리된 음원소스를 다운로드하는 기능을 제공하고 있습니다. 최근 유저 피드백 중에 분리된 음원을 합쳐서 하나의 파일로 다운로드 하는 기능이 들어와 개발을 하게 되었습니다. 이번 글에서는 간단하게 라이브러리를 이용해 기능을 만들어보았습니다. 이후 속도 개선을 위해 Web Assembly 기반의 FFmepg wasm을 사용하고, UI Block를 방지하기 위해 변환 기능을 Web Worker 상에서 동작하는 방법에 대해 알아보겠습니다. 결론부터 말하자면 웹어셈블리는 매우 짱짱이었고 테스트 데이터 결과 15~30배의 성능개선이 이뤄졌습니다. 대상 독자 브라우저에서 오디오파일을 다루.. 2023. 2. 1. 이전 1 다음
