웹 어셈블리 (WASM) - 자바스크립트의 대체제?
ฝัง
- เผยแพร่เมื่อ 29 ส.ค. 2024
- #자바스크립트 #WebAssembly #코딩
브라우저에서 동작하는 프론트엔드 어플리케이션의 프로그래밍은 주로 JavaScript로 이루어져 왔지만, Web Assembly의 등장으로 개발자에게 더 많은 선택지가 제공되었습니다. Web Assembly는 프로그래밍 언어가 아니라, C나 Rust 등의 프로그래밍 언어로 작성된 결과가 컴파일된 결과입니다. 이는 브라우저에서 특정 기능을 실행하는데 활용됩니다.
Web Assembly는 고성능과 빠른 속도를 자랑하지만, Web API를 직접 다루지 못하며, DOM 조작 같은 기능은 JavaScript를 통해서만 실행될 수 있습니다. 그러나, 복잡한 그래픽 작업이나 대량의 데이터 처리 등 높은 성능을 필요로 하는 작업에는 Web Assembly가 매우 효율적입니다.
Web Assembly는 비효율적인 JavaScript보다 더 빠른 실행속도로 웹페이지에서 무거운 연산을 실행하며, 이는 사용자 경험 향상에 이바지합니다. JavaScript는 사람들이 코딩하고 실행하고 배포하기는 편리하지만, 성능에 있어서는 불리한 언어들의 특징들을 갖고 있기 때문입니다.
이런 이유로 Web Assembly는 JavaScript 외에도 서버, 클라우드, 엣지 디바이스 등의 환경에서도 사용됩니다. 이는 보안성, 이식성, 언어 중립성 등의 장점 때문입니다. Web Assembly는 샌드박스라는 격리된 환경에서 실행되어 시스템 자원에 직접 접근하지 못함으로써 보안을 강화하고, 다양한 운영체제 및 하드웨어에서 동일하게 동작하는 코드를 여러 언어를 사용하여 작성하고 컴파일할 수 있습니다.
이로써, Web Assembly는 강력한 기능을 제공하는 웹 어플리케이션을 만들고자 하는 개발자에게 좋은 옵션이 될 수 있습니다. 프론트엔드에서 보다 쉽게 Web Assembly를 사용하려면, AssemblyScript, Blazor와 같은 도구를 활용하면 됩니다.
= = =
🏠 얄코사이트: www.yalco.kr
📖 얄코 도서: www.yalco.kr/b...
🧑🏫 얄코 강의: www.yalco.kr/#...
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대...
🎥 제대로 파는 자바: • 제대로 파는 자바 - Java 끝.장.내...
🎥 제대로 파는 파이썬: • 제대로 파는 파이썬 - Python 끝장...
🎥 제대로 파는 자바스크립트: • (구판) 제대로 파는 자바스크립트 - 고...
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS (대학생...
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베...
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ Rea...
🎫 얄코 강의 선착순 반값쿠폰 (매주 갱신)
bit.ly/yalco-fcfs-coupon
예제코드 확인 : yalco.notion.site/Web-Assembly-987a7e915d1d4d4097819d5272383683?pvs=4
얄코 강좌들 보기:
www.yalco.kr/#lectures
얄코 책 보기:
www.yalco.kr/#books
설명 정말 쉽게 잘 해주시네요. 감사합니다.
감사합니다!
좋은 영상 감사합니다 :)
감사합니다!
1. WASM이 자체적으로 Web API를 호출할 수 있는 표준이 마련된다면, 자바스크립트의 중간자적 역할이 줄어들 수 있을까요?
브라우저와 Web API의 근본적인 설계를 변경하는 것이므로, 상당한 시간이 걸릴 수 있겠지만요…
2. 자바스크립트의 역할을 대신할 수 있는 새로운 런타임 환경이 개발될 수 있을까요? 예를 들어, WASI가 발전하면, 브라우저 밖에서도 WASM이 다양한 시스템 자원에 접근할 수 있게 되지 않을까요?
3. 브라우저가 더 많은 고급 기능을 기본적으로 지원해서, WASM이 이를 직접 활용할 수 있게 된다면, 자바스크립트의 역할이 아예 사라지는 미래를 볼 수도 있을까요??
질문들의 의도를 알 수 있을까요? 그냥 개인적인 궁금증인지 아니면 무슨 연구과제 등의 주제인지... 하나같이 개인이 예측하기 어려운 질문이네요. 일단 브라우저는 과거에 만들어진 웹사이트까지 문제없이 돌려야 하기 때문에 변화에 있어 매우 보수적입니다.
사실 자바스크립트 특유의 동적타이핑이 성능저하의 주범이라
이러한 부분을 고려해서 코드를 짜면
브라우저 엔진 내부적으로 최적화 하여 터보엔진으로 보냅니다.
웹 어셈블리도 동일하게 내부 최적화코드는 터보엔진으로 보내게 되는데
이때문에 잘짜여진 자바스크립트 코드는 초기실행시간을 제외하면 웹 어셈블리와 동일한 속도로 동작할 수 있습니다
그렇습니다. 말씀부신 바와 관련해서도 이후 영상을 만들도록 하겠습니다 🙂
@@yalco-coding 답변 갑사합니다!
물론 초기실행속도 면에서는 당연히 웹 어셈블리가 압도적입니다
초기실행속도는 유저의 이탈율에 크게 관여함으로 이부분이 웹 어셈블리의 큰 장점이라 볼 수 있을거 같아요
c언어로 작성된 코드를
웹 어셈블리 파일로 변환해서
브라우저 엔진이 실행할수 있다라는 개념으로
이해하면 될까요?
예시로 화이트박스 암호를 C코드로 작성해서
브라우저에서도 사용가능하겠군요!?
C를 비롯해, 다양한 언어가 WASM으로 컴파일될 수 있습니다. 말씀주신 암호화 알고리즘도 가능할 것입니다.
감사합니다 혹시 canvas 작업을 자바를 웹 어셈블리로 변환해서 실행도 되나요?
자바'스크립트' 말씀하시는거죠? 영상에서 말씀드린 게임들이 HTML 캔버스에 WASM으로 연산한 영상들을 그려내는 것입니다. 물론 그 과정 가운데 자바스크립트도 중간자로 작동하는거구요. 즉 다 함께 쓰이는겁니다. 😀
WASM vs JavaScript Performance
Run Test
by JS: 2185.60 ms, Primes Found: 664579
by WASM: 2203.20 ms, Primes Found: 664579
윈도우 10이고 Chrome 125.0.6422 64비트 버전 인데요.. JS가 더 빠르네요 ㅡㅡ;
그리고 왜 얄팍한 코딩사전님은 JS도 714.80ms.. 엄청 빠르네요
네, 환경에 따라 다르게 나타날 수 있습니다. 이정도 작은 규모의 코드에서는 오히려 반대의 결과나 나올 때도 있죠. 더 큰 수를 넣어보시거나 다른 알고리즘을 테스트해보시면 좋을 것입니다.
MS Edge 브라우저는
WASM vs JavaScript Performance
Run Test
by JS: 2472.70 ms, Primes Found: 664579
by WASM: 1628.10 ms, Primes Found: 664579
WASM이 훨씬 빠르네요 ^^
브라우저마다 WASM의 런타임 구현도 다를 수 있어서 나오는 차이일 것입니다 🙂
이분 발음 때문에 구독 누름..
발음이 제가 가장 어려워서 개선하려고 노력해온 부분인데 감사합니다 ㅠㅜ
Blazor 한번사용해보면 참 좋은데 이것역시 한국에서 사용안할듯..
그냥 서버 java 프론트 리액트 vue말곤 선택지가 없는 나라인듯..
저도 개인적으로 C# 개발환경 좋아하는데 아쉽습니다 ㅠㅜ
py-script도 다뤄줄 수 있을까요
그건
배우면 좀 시간낭비됩니다…
그건 딱히 영상으로 만들어 설명할 만큼 이해하기 어려운 부분이 있는게 아니라... 특별히 모르시겠는 부분이 있는건가요?
더빙이 AI같아요.
AI는 발음이 더 정확합니다 😅