WebDevCurriculum / 웹 어셈블리의 기초

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다

Introduction

• 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 웹 어셈블리에 관해 알아보겠습니다.

Checklist

• 웹 어셈블리란 어떤 기술인가요?

웹 어셈블리(WebAssembly)는 웹 브라우저에서 실행되는 이진 형식의 가상 머신입니다. 웹 어셈블리는 C, C++, Rust, Go 등의 언어로 작성된 코드를 웹 브라우저에서 실행할 수 있도록 하기 위해 개발되었습니다. 이는 기존의 JavaScript 엔진을 대체하는 것이 아니라, 보조적인 역할을 수행하여 더욱 빠르고 안전한 웹 애플리케이션을 만들 수 있도록 지원하는 기술입니다.

 

• 웹 어셈블리 모듈을 웹 프론트엔드 상에서 실행시키려면 어떻게 해야 할까요?

웹 어셈블리 모듈을 웹 프론트엔드 상에서 실행시키기 위해서는 다음과 같은 단계를 거쳐야 합니다.

1. 웹 어셈블리 모듈 생성: C, C++, Rust, Go 등의 언어로 작성된 코드를 웹 어셈블리 모듈로 변환해야 합니다. 이를 위해서는 웹 어셈블리를 지원하는 컴파일러가 필요합니다.
2. 웹 어셈블리 모듈 로딩: 웹 어셈블리 모듈을 웹 프론트엔드에서 로딩해야 합니다. 이를 위해서는 fetch API나 WebAssembly.instantiateStreaming API 등을 사용할 수 있습니다.
3. 웹 어셈블리 모듈 실행: 로딩한 웹 어셈블리 모듈을 실행해야 합니다. 이를 위해서는 WebAssembly.instantiate API를 사용하여 인스턴스를 생성하고, 원하는 함수를 호출할 수 있습니다.

아래는 예제 코드입니다.

// 웹 어셈블리 모듈 로딩
fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(buffer => WebAssembly.instantiate(buffer))
  .then(module => {
    // 웹 어셈블리 모듈 실행
    const result = module.instance.exports.add(1, 2);
    console.log(result); // 3
  });

위 코드는 'module.wasm' 파일을 fetch API를 사용하여 로딩하고, 로딩된 모듈에서 'add' 함수를 호출하여 두 개의 인자를 더한 결과를 출력하는 예제입니다.

 

• Rust란 어떤 특징을 가진 프로그래밍 언어인가요?

Rust는 Mozilla에서 개발한, 안전하고 빠른 프로그래밍 언어입니다. Rust는 메모리 안전성, 동시성, 성능 등의 측면에서 다른 언어와 차별화된 특징을 가지고 있습니다.

 

1. 안전성: Rust는 메모리 안전성을 보장하는 언어로, 널 포인터 오류, 버퍼 오버런 등의 메모리 관련 버그를 방지할 수 있습니다. 이를 위해 Rust는 borrow checker라는 고유한 개념을 도입하여 런타임 에러를 최소화하고 안전성을 보장합니다.
2. 동시성: Rust는 안전하고 효율적인 동시성 프로그래밍을 지원합니다. 이를 위해 Rust는 안전한 스레드와 메시지 패싱을 지원하는 멀티 스레딩 모델을 제공합니다.
3. 성능: Rust는 C와 유사한 수준의 성능을 제공합니다. Rust는 제어가능한 메모리 할당 및 해제, 제어 가능한 스택 및 힙 메모리 사용 등의 기능을 제공하여 높은 성능을 보장합니다.
4. 모듈성: Rust는 모듈성을 지원하여 큰 규모의 프로젝트에서도 유지보수가 용이하도록 합니다. Rust는 모듈, 패키지, 크레이트 등의 구조를 이용하여 모듈성을 제공합니다.
5. 범용성: Rust는 시스템 프로그래밍, 웹 개발, 데이터 분석 등 다양한 분야에서 사용될 수 있는 범용 프로그래밍 언어입니다. Rust는 안전성과 성능을 동시에 제공하기 때문에 브라우저나 서버 등 다양한 환경에서 활용될 수 있습니다.

 

• 웹 어셈블리 모듈을 만드는 방법에는 어떤 것들이 있나요?

• C/C++로 작성 후 웹 어셈블리로 변환하기: C/C++로 작성된 코드를 웹 어셈블리로 변환하는 방법이 있습니다. 이 방법은 Emscripten이라는 도구를 사용하여 가능합니다. Emscripten은 LLVM 기반 C/C++ 컴파일러이며, C/C++ 코드를 웹 어셈블리 모듈로 컴파일할 수 있습니다.
• Rust로 작성하기: Rust는 웹 어셈블리를 지원하는 언어입니다. Rust로 작성된 코드는 Cargo를 사용하여 웹 어셈블리 모듈로 컴파일할 수 있습니다.
• 어셈블리로 직접 작성하기: 웹 어셈블리 모듈은 어셈블리 언어로 작성할 수 있습니다. 이 방법은 어셈블리 언어에 익숙한 경우에 유용합니다.
• 다른 언어로 작성 후 웹 어셈블리와 상호 운용성을 지원하기: 다른 언어로 작성된 코드를 웹 어셈블리 모듈과 상호 운용성을 지원하도록 작성할 수 있습니다. 예를 들어, Java로 작성된 코드를 웹 어셈블리 모듈과 상호 운용성을 지원하도록 작성할 수 있습니다.

 

• 웹 어셈블리가 할 수 없는 작업에는 무엇이 있을까요? 웹 어셈블리는 어떤 목적에 주로 쓰이게 될까요?

웹 어셈블리는 다른 웹 기술과 달리 일부 제한 사항이 있으며, 다음과 같은 작업은 일반적으로 웹 어셈블리로는 수행할 수 없습니다.

1. DOM 조작: 웹 어셈블리 모듈에서는 DOM에 직접 접근하거나 조작할 수 없습니다. 대신, 웹 어셈블리 모듈에서는 JavaScript와 상호작용하며, JavaScript를 통해 DOM을 조작할 수 있습니다.
2. 네트워크 요청: 웹 어셈블리 모듈은 직접적으로 네트워크 요청을 보낼 수 없습니다. 대신, JavaScript를 통해 네트워크 요청을 보내고, 웹 어셈블리 모듈에서는 JavaScript를 통해 받은 데이터를 처리할 수 있습니다.

웹 어셈블리는 고성능 계산 작업, 게임 엔진, 머신러닝 모델, 3D 그래픽 라이브러리 등과 같이 CPU 집약적인 작업에 적합합니다. 이러한 작업은 기존의 웹 기술로는 처리 속도가 느리거나 불가능할 수 있습니다. 또한, 웹 어셈블리는 여러 플랫폼에서 실행 가능하기 때문에, 앱 개발에도 활용될 수 있습니다.