개요
웹 어셈블리에 대한 개념을 이해한다.
Checklist
- 웹 어셈블리란 어떤 기술인가요?
최신 웹브라우저에서 실행할 수 있는 새로운 유형의 코드를 말하며, C/C++/Rust 등 저급언어(기계어에 가까운 언어)를 효과적으로 컴파일링 하기 위해 고안된 기술이다.
기계어 컴파일링을 통해 네이티브 코드에 가까운 실행 속도를 구현할 수 있으며, Webassembly 모듈을 node.js로 가져와 Javascript 언어를 통해 해당 기능을 사용할 수 있다.
다만 npm에서는 Wasm이 아직 없으므로, 다른 코드에서 참조하는 방식으로 작성해야 한다.
- 웹 어셈블리 모듈을 웹 프론트엔드 상에서 실행시키려면 어떻게 해야 할까요?
Rust 등을 통해 작성한 언어를 Wasm으로 출력하면 js, wasm 파일이 생성된다.
js에서 Wasm을 불러오면 Wasm은 javascript를 통해 제어가 가능하므로, 해당 환경에서 실행 및 작동이 가능해진다.
이 외에도 C/C++ 언어로 포팅(다른 환경에서 이해할 수 있는 언어로 작성)하거나, Wasm 바이너리 컴파일 등으로 Wasm을 사용할 수 있다.
- Rust란 어떤 특징을 가진 프로그래밍 언어인가요?
네이티브에 준하는 속도와 메모리 효율성(GC), 컴파일 과정에서의 버그 최소화 등을 목표로 고안된 현대적인 프로그래밍 언어이다.
- 웹 어셈블리 모듈을 만드는 방법에는 어떤 것들이 있나요?
go, rust, C/C++ 등으로 wasm 파일(패키지)를 생성할 수 있다.
- 웹 어셈블리가 할 수 없는 작업에는 무엇이 있을까요? 웹 어셈블리는 어떤 목적에 주로 쓰이게 될까요?
web api에 접근할 수 없다.
3d, 2d 그래픽 작업이나 기타 복잡한 연산이 필요한 경우에 사용한다.
참조개념
- Code의 해석 과정
Native code는 컴파일 과정에서 OS환경에 맞춰 해석된다.
Managed code는 컴파일 후 VM(OS)가 사용하기 전까지는 기계어로 해석을 하지 않는다(런타임 시점에서 기계어로 번역).
※ 정말 세부적으로 말하면, 최종적으로 기계가 인식하는 과정은 바이너리 코드를 전압으로 바꾸어 이러한 전압의 변화를 컴퓨터가 특정 명령어로 인식하는 것이다.
※ 이러한 전압의 변화를 기계어라고 할 수 있겠지만, 보통은 최종적으로 0,1로 이루어진 바이너리 코드를 기계어로 지칭한다.
- 네이티브 코드(Native Code)
네이티브한 환경, 다시 말해 프로그래머가 직접 메모리 할당 및 해제를 진행하는 코드를 말한다.
전통적인 프로그래밍, 특히 C/C++ 언어는 네이티브 코드이며, Compile 과정을 거쳐 사용자 운영체제에서 해석 가능한 기계어로 번역이 된다.
※ 참고로 해석이 완료된 기계어는 프로세서에 의해 직접 실행된다.
네이티브 코드는 작성한 코드 그대로 컴퓨터에서 구동이 되는데, 이러한 특성상 네이티브 코드는 사용자의 운영체제에 의해 매우 많은 영향을 받는다(=OS에 종속적).
즉 네이티브 코드를 다른 운영체제에서 실행하기 위해선 해당 환경에 맞게 다시 작성해야 한다.
- 관리 코드(Managed Code)
네이티브 코드가 OS환경에 맞게 작성되어야 하는 번거로움을 없애고자 고안된 개념이 관리 코드(Managed Code)이다.
관리 코드의 대표적인 예는 Java, 네이티브 코드와는 달리 동일한 리소스로 모든 OS환경에서 구동이 가능하다.
관리 코드는 컴파일 과정에서 OS가 이해할 수 있는 바이너리 코드(기계어)로 바로 변환되지 않고 임시 코드로 변환된다.
이때 각 OS에 내장되어 있는 JIT(Just In Time) 컴파일러가 OS용 코드를 해석하고, OS에 맞는 언어로 번역한다(런타임 환경에서 최종 변환).
가장 대표적인 언어로 Java가 있는데, 마이크로소프트가 이에 대항하기 위해 만든 .NET도 있다.
- 가비지 컬렉션(GC, Garbage Collection)
쉽게 말하면 메모리 해제를 자동으로 진행하는 것이다.
네이티브 코드는 자동으로 메모리 해제가 되지 않기 때문에(=OS에 반납), 프로그래머가 수동으로 이를 설계해주어야 한다.
이에 반해 GC가 내장되어 있는 관리 코드는 프로그래머가 전반적인 메모리 관리를 하지 않아도 되므로, 여기에 수반하는 invalid access(참조)나 메모리 누수 등의 버그를 방지할 수 있다.
정리
0. why
- Wasm이 왜 고안되었고, 왜 필요한지 이해한다.
1. what
- Wasm 개념이 무엇인지 이해한다.
- Wasm을 이해하기 위해 네이티브 코드, 관리 코드 등 추가 개념에 대해 알아본다.
2. how
- Wasm이 왜 프론트엔드 기술이고, 어떻게 적용할 수 있을지 생각해본다.
- Wasm이 프론트엔드 기술이라면, 해당 기능을 사용자가 체감할 수 있도록 어떻게 활용할 수 있을지 고민해본다.
3. 참조링크
MDN 공식문서 - Wasm
https://developer.mozilla.org/ko/docs/WebAssembly/Concepts
Wasm의 실행과 적용
https://tech.kakao.com/2021/05/17/frontend-growth-08/
Native code / Managed code
https://projobs.tistory.com/115
https://ssaturn.tistory.com/99
가비지 컬렉션
https://pongsoyun.tistory.com/94
바이너리 코드
https://jcchu.medium.com/%EB%B0%94%EC%9D%B4%EB%84%88%EB%A6%AC%EC%99%80-%EB%B0%94%EC%9D%B4%ED%8A%B8-%EC%BD%94%EB%93%9C-677c32105fb0
http://teoob.blogspot.com/2014/03/binary-code.html
Rust
https://tech.kakao.com/2021/05/17/frontend-growth-08/
WEb dev - Quest 19-F
https://github.com/leejiwoo2021/WebDevCurriculum/tree/master/Quest19-F
