WebAssembly란 무엇이며 React는 어디에 활용되는가

WebAssembly(WASM)는 웹 브라우저에서 네이티브에 가까운 속도로 실행되도록 설계된 바이너리 명령어 형식입니다. 고수준 해석 언어인 JavaScript와 달리 WASM은 저수준 바이트코드이며, 브라우저의 JavaScript 엔진이 이를 컴파일하고 최소한의 추가 비용으로 실행합니다. 그 결과 네이티브 코드와의 성능 차이가 10~20% 이내인 수준을 달성합니다.

WebAssembly는 직접 작성하는 프로그래밍 언어가 아니라 컴파일 대상입니다. 러스트, 씨 언어, 씨 플러스 플러스 언어, 고 언어는 각 언어의 도구 모음을 사용해 WASM 바이트코드로 컴파일할 수 있습니다. 시스템 프로그래밍 언어로 작성하고 WASM으로 컴파일한 다음 바이너리 모듈을 브라우저에 제공합니다.

WASM은 브라우저 내부의 샌드박스 처리된 가상 머신에서 실행되며, JavaScript와 동일한 보안 제한을 받습니다. DOM, 네트워크 또는 파일 시스템에 직접 액세스할 수 없고, 이러한 모든 액세스는 JavaScript 바인딩을 거칩니다. 이러한 샌드박스 처리를 통해 네이티브 속도의 코드라도 브라우저 보안 정책을 우회할 수 없습니다.

WASM과 JavaScript는 서로 대체하도록 설계된 것이 아니라 함께 작동하도록 설계되었습니다. JavaScript는 애플리케이션 조정, DOM 조작, 이벤트 처리, 브라우저 인터페이스 호출에 뛰어납니다. WASM은 계산 집약적 알고리즘에 뛰어납니다. 일반적인 패턴은 JavaScript가 애플리케이션을 조정하고 WASM이 무거운 계산을 처리하는 것입니다.

WASM은 선형 메모리 모델을 사용합니다. 이는 JavaScript ArrayBuffer로 표현되는 연속된 바이트 블록입니다. WASM과 JavaScript는 모두 이 공유 메모리를 읽고 쓸 수 있습니다. JavaScript와 WASM 사이에 대용량 데이터를 전달할 때는 이 공유 버퍼에 쓰고 읽는 방식으로 비용이 큰 직렬화를 피할 수 있습니다.

리액트는 사용자 인터페이스 계층을 담당하며, 렌더링과 상태 관리 및 사용자 상호작용을 처리합니다. WASM은 리액트가 JavaScript에서 효율적으로 수행할 수 없는 계산을 처리합니다. 리액트는 이벤트 처리기나 효과에서 WASM 함수를 호출하고, 결과를 받은 다음 상태를 업데이트하여 다시 렌더링을 실행합니다. 리액트는 표현 계층이고 WASM은 계산 엔진입니다.

WASM은 이미지 또는 동영상 처리(픽셀 조작), 오디오 합성 및 처리, 암호화 연산(해싱, 암호화), 물리 시뮬레이션, 게임 로직, 압축 및 압축 해제, 대용량 데이터 텍스트 검색이 필요한 리액트 애플리케이션에 적합합니다. 이러한 작업은 모두 JavaScript의 성능이 측정 가능한 수준으로 부족한 작업입니다.

WASM은 브라우저의 적시 컴파일러가 거의 최적화 작업 없이 기계어로 컴파일하기 때문에 CPU 바운드 계산에서 네이티브에 가까운 속도를 냅니다. 그러나 JavaScript-WASM 경계를 넘는 작업(JS에서 WASM 함수를 호출하거나 그 반대)은 추가 비용이 발생합니다. WASM 내부에서 데이터 작업을 일괄 처리하여 경계 통과를 최소화하십시오.

WASM과 웹 워커 모두 성능 문제를 해결합니다. 웹 워커는 JavaScript 계산을 주 스레드 밖으로 옮깁니다. WASM은 어떤 스레드에서 실행되든 계산 자체를 더 빠르게 처리합니다. 최적의 패턴은 둘을 함께 사용하는 것입니다. 웹 워커에서 WASM 계산을 실행하면 WASM이 네이티브에 가까운 속도로 작동하는 동안 리액트의 주 스레드는 사용자 인터페이스 업데이트를 위해 비워 둘 수 있습니다.

WebAssembly는 2017년부터 모든 최신 브라우저(크롬, 파이어폭스, 사파리, 엣지)에서 지원됩니다. 기본 WASM 사양은 거의 모든 환경에서 지원됩니다. 최신 확장 기능(SharedArrayBuffer를 사용하는 스레드, 벡터화된 연산을 위한 SIMD, 관리형 언어를 위한 가비지 컬렉션)은 지원 수준이 서로 다르지만 점차 표준화되고 배포되고 있습니다.

WASM 생태계는 빠르게 성장하고 있습니다. 주목할 만한 실제 서비스 사용 사례로는 피그마(렌더링 엔진), 구글 어스(3차원 지구본), 어도비 포토샵 웹(이미지 처리), AutoCAD 웹(CAD 렌더링), 그리고 수많은 암호화 라이브러리가 있습니다. 리액트 애플리케이션은 일반적으로 이러한 동일한 범주의 계산 집약적인 부분에 WASM을 사용합니다.

WebAssembly는 브라우저에서 어떻게 실행될까요?

WebAssembly는 러스트, 씨 언어, 씨 플러스 플러스 언어, 고 언어를 위한 바이너리 컴파일 대상(언어가 아님)이며, 샌드박스 처리된 브라우저 가상 머신에서 네이티브에 가까운 속도로 실행됩니다. WASM과 JavaScript는 상호 보완적입니다. JS가 조정하고 WASM이 계산합니다. 리액트의 역할은 사용자 인터페이스 계층에서 WASM을 호출하여 무거운 계산을 처리하게 하는 것입니다. 이미지 처리, 암호화, 물리, 오디오 및 대용량 데이터 검색에는 WASM을 사용하십시오. WASM 내부에서 작업을 일괄 처리하여 JS-WASM 경계를 넘는 횟수를 최소화하십시오.