WebAssembly 설명 정리 [코딩애플]

WebAssembly에 대한 내용을 정리한다.

평소 인강을 듣고 있는 코딩애플님 설명을 정리한 내용이다. 가히 쉽게 설명하기 장인이라고 할 수 있다.

출처: https://www.youtube.com/watch?v=VJag_H2Cosc

 

 

WebAssembly 정의

 

웹어셈블리(WebAssembly, 간단히 Wasm)는 실행 프로그램 및 그와 일치하는 텍스트 어셈블리어, 그리고 이러한 프로그램과 호스트 환경 간 통신을 용이케하는 인터페이스를 위한 이식 가능한 이진 코드 포맷을 정의하는 개방형 표준이다.[1][2][3][4] 웹어셈블리의 주 목적은 웹 페이지에서 고성능의 애플리케이션을 가능케 하는 것이지만 포맷은 다른 환경에서도 실행 및 연동되도록 설계되어 있다.[5][6]

Wasm은 자바스크립트를 대체하지는 않는다. 브라우저에서 Wasm을 사용하려면 사용자는 Emscripten SDK를 사용하여 C++(또는 D 또는 러스트 등의 기타 LLVM 지원 언어) 소스 코드를 이진 파일로 컴파일한 다음 동일한 샌드박스에서 일반 자바스크립트 코드로 실행할 수 있다.[note 1] Emscripten은 WebGL 등 흔히 사용되는 여러 환경 인터페이스들의 바인딩을 제공한다. 확장 가능한 메모리와 수많은 스케일러 값에만 접근이 가능하다. 문서 객체 모델(DOM) 직접 접근은 하지 않으나 이를 위한 프록시 함수를 만들 수 있다. (예를 들면 stdweb,[11] web_sys,[12], js_sys을 통해)[13]

W3C는 모질라, 마이크로소프트, 구글, 애플의 기여와 함께 표준을 관리하고 있다.[14]

출처:위키백과

 

 

개요: 웹은 원래 html,css,js 파일만 해석가능한다. 

2017년에 브라우저들이 WebAssembly(이하 Wasm)파일도 지원하면서 해당 브라우저들에선 기존 html,css,js + Wasm도 지원가능하게 되었다.

 

 

.wasm 파일은 자바스크립트를 대체하는 언어는 아니다

평소에 쓰던 프로그래밍 언어들 >> .wasm파일로 변환 후 >> 브라우저로 전송해서 실행한다.

장점

확장성 

html css js 제외한 프로그래밍 언어들로도웹서비스를 제공할 수 있다. (윈도우95. 사진보정프로그램 웹에서 실행, 오토캐드등도 웹에서 실행 그럼 나중에 포토샵도 웹에서 실행하는건가..?) 

 

작동속도가 빠르다

크롬기준.

자바스크립트는 웹(크롬이 작동시켜준다)

 

자바스크립트, .wasm 작동원리

코딩애플 강의 자료를 포토샵으로 정리해봤다.

.wasm 파일이 JS(optimized가 되게끔 잘짜여진) 보다 항상 빠른 건 아니지만 안정적으로 빠른 속도를 기대할 수 있다.

 

 

정리

현재는 자바스크립트 코드 특정 느린부분만 .wasm으로 바꾸는식으로 사용한다.

웹분야가 확장 될 것 같다.

.wasm을 해보고싶다면 AssemblyScript 사용하면 쉽다

 

.wasm 기술을 이해하려고 했다가 자바스크립트의 실행 원리까지 공부하게 됐다.  JS 작성시 빠른 실행  turbofan으로 실행되기 위하여 optimized가 잘되도록 자바스크립트를 짜는게 중요하다는 것을 깨달았고  optimized한 작성법이 뭔지 더욱 찾아 봐야 할 것 같다.