WebAssembly란 

    
Figma가 웹어셈블리를 사용 
https://www.figma.com/ko-kr/blog/webassembly-cut-figmas-load-time-by-3x/

---
WebAssembly(웹어셈블리, 약칭 WASM)는 브라우저에서 실행할 수 있는 고성능 바이너리 형식의 코드입니다. 이를 통해 웹 애플리케이션이 기존 JavaScript보다 더 빠르고 효율적으로 실행될 수 있습니다.

WebAssembly의 주요 특징은 다음과 같습니다:
1. **빠른 성능**: 컴파일된 바이너리 형식으로 제공되어 실행 속도가 매우 빠릅니다. C, C++, Rust 같은 언어로 작성된 코드를 WebAssembly로 컴파일하여 웹에서 실행할 수 있습니다.
2. **플랫폼 독립성**: 다양한 운영체제 및 브라우저에서 실행될 수 있습니다. 모든 주요 브라우저(Chrome, Firefox, Edge, Safari)에서 지원되며, 이를 통해 웹 애플리케이션이 더 많은 사용자에게 제공될 수 있습니다.
3. **JavaScript와의 상호작용**: WebAssembly는 JavaScript와 상호작용할 수 있어서, 기존 JavaScript 코드와 함께 사용할 수 있습니다. 필요에 따라 성능이 중요한 부분만 WebAssembly로 구현하고 나머지는 JavaScript로 처리할 수 있습니다.
4. **보안성**: 브라우저의 샌드박스 환경에서 실행되기 때문에 보안 측면에서도 안전하게 사용할 수 있습니다.

주로 게임, 비디오 편집기, 데이터 처리 및 머신러닝 같은 고성능이 요구되는 웹 애플리케이션에서 활용되며, 일반적으로 JavaScript의 성능을 개선하기 위한 용도로 많이 사용됩니다.

### WebAssembly의 장점

1. **고성능**: 
   - WebAssembly는 컴파일된 바이너리 형식으로 실행되므로, JavaScript보다 훨씬 빠르게 작동합니다. 특히 성능이 중요한 애플리케이션(게임, 머신러닝, 비디오 처리 등)에 유리합니다.

2. **플랫폼 독립성**: 
   - 모든 주요 브라우저에서 지원되며, 운영체제나 하드웨어에 구애받지 않고 실행 가능합니다. 이는 사용자의 시스템에 맞춰 별도의 설정을 할 필요 없이 동일한 코드를 여러 환경에서 사용할 수 있다는 의미입니다.

3. **기존 언어 재사용 가능**: 
   - C, C++, Rust 등 기존의 성능 좋은 언어로 작성된 코드를 웹 환경에서 쉽게 재사용할 수 있습니다. 이는 기존 데스크탑 애플리케이션을 웹으로 포팅하는 데 매우 유리합니다.

4. **보안성**: 
   - WebAssembly는 브라우저의 샌드박스에서 실행되므로 시스템의 나머지 부분과 격리되어 있어, 악성 코드를 방지할 수 있는 추가적인 보안 계층을 제공합니다.

5. **JavaScript와의 상호운용성**: 
   - WebAssembly는 JavaScript와 원활하게 상호작용할 수 있습니다. 두 기술을 결합하여 성능이 중요한 부분은 WebAssembly로 처리하고, 유연한 동작은 JavaScript로 처리할 수 있습니다.

---

### WebAssembly의 단점

1. **디버깅 어려움**: 
   - WebAssembly는 바이너리 코드 형식이기 때문에, 디버깅이 JavaScript처럼 간단하지 않습니다. 코드를 작성하는 개발자가 문제를 추적하기 위해서는 별도의 도구나 추가적인 작업이 필요할 수 있습니다.

2. **JavaScript만큼 유연하지 않음**: 
   - WebAssembly는 주로 CPU 집약적인 작업에서 유리하지만, JavaScript처럼 동적인 언어 특성을 활용하기에는 제약이 있습니다. JavaScript는 높은 수준의 유연성을 제공하는 반면, WebAssembly는 더 제한적인 환경에서 동작합니다.

3. **파일 크기**: 
   - WebAssembly는 바이너리 파일이므로, JavaScript 파일보다 크기가 클 수 있습니다. 이를 압축하고 최적화하는 작업이 필요할 수 있으며, 초기 로딩 시간에 영향을 줄 수 있습니다.

4. **웹 API 접근의 제한**: 
   - WebAssembly는 모든 브라우저 API에 직접적으로 접근할 수 있는 것은 아닙니다. WebAssembly 코드에서 특정 API에 접근하려면 JavaScript를 통해 간접적으로 처리해야 하는 경우가 있습니다.

5. **복잡한 빌드 프로세스**: 
   - WebAssembly를 사용하려면 C, C++ 또는 Rust 같은 언어로 코드를 작성한 후 이를 웹에서 실행할 수 있는 형식으로 컴파일하는 과정이 필요합니다. 이는 JavaScript 개발자에게 익숙하지 않은 빌드 프로세스를 요구할 수 있습니다.

---

요약하자면, WebAssembly는 고성능 웹 애플리케이션을 구현하는 데 매우 유용하지만, 그 복잡성 및 제한사항으로 인해 모든 프로젝트에서 적합한 선택은 아닙니다. 성능이 중요한 부분에 WebAssembly를 사용하고, 나머지 부분은 JavaScript로 처리하는 하이브리드 방식이 이상적일 때가 많습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

vue

vue create vue3-project이름 vscode에 vetur 를 설치함 index.html있고 src에 main.js가 시작 포인트 템플릿 npm run serve로 시작 앱.뷰 단위 파일에 template script style이렇게 들어가 있다 컴포넌트 ==== .vue를 쓰면 그게 뷰 컴포넌트 세가지로 구정 template script style composition api는 스크립트 안에 export default { setup(){ 변수 선언이 가능해지는데 이걸로 템플릿안에서 사용 가능 → 변수인가? {{ name }} 이런식으로 사용가능 함수는 {{ hello() }} 이런식으로 사용가능 return 에 setup함수의 변수나 } } 이런식 vue2 → vue3로 바뀌면서 바뀐거 vue2에서는 템플릿 안에 하나의 태그(루트) 안에 모든 요소들이 있어야 했었는데 이제는 그럴 필요 없음 이벤트는 템플릿의 태그 속성으로 바로 들어감 이런식으로 v-on:click ="함수이름괄호없이" 변수는 스테이트가 아니라서 바뀌어도 템플릿 반영 안됨 그러니까 ref를 사용해 줘야한다 import ref from vue...대충 한다음에 ref()이렇게 해줘야한다. → value를 꼭적어줘야하고 reactive도 있음 → value 적을 필요 없고 기본자료형과 object array만 사용가능 뭔차이지.. 단방향 바인딩 데이터 바인딩-데이터를 인풋이랑 연결하는거? 인데(유저 인풋을 받아가는건 아니고..) 태그의 속성들을 변경할 수 있게 한다 아무튼 이건 어떻게 하냐면 <input type="text" v-bind:value="name"> 인풋의 value값을 name 변수랑 동기화 되게 한다.. v-bind:value="name"> 줄여서 :value="name"> 이렇게도 사용가능 v-on:click ="함수이름괄호없이" 이거도 줄...
Read more »

Capacitor 웹 기반 애플리케이션을 네이티브 앱으로 감싸고, 네이티브 기능에 접근할 수 있게 해주는 프레임워크

  Capacitor는 웹 네이티브 앱을 빌드하기 위한 오픈 소스 네이티브 런타임입니다. JavaScript, HTML, CSS로 크로스 플랫폼 iOS, Android, Progressive Web Apps를 만드세요. https://capacitorjs.com/ 🚀 **Capacitor란?** ------------------ **Capacitor**는 **웹 기반 애플리케이션을 네이티브 앱으로 감싸고, 네이티브 기능(GPS, 블루투스, 푸시 알림 등)에 접근할 수 있게 해주는 프레임워크**야.\ 📌 **Ionic 팀에서 개발한 오픈소스 프로젝트**로, **Cordova보다 현대적인 웹-네이티브 브릿지** 역할을 수행해. ### ✅ **Capacitor의 핵심 특징** 1.  **웹을 그대로 네이티브 앱(Android, iOS)으로 변환 가능** 2.  **네이티브 기능 (GPS, 카메라, 푸시 알림, 파일 시스템 등) 쉽게 연동 가능** 3.  **PWA, 웹, 네이티브 앱을 하나의 코드베이스에서 운영 가능** 4.  **Cordova보다 현대적이고, 최신 웹 기술과 잘 호환됨** 5.  **React, Vue, Angular, Svelte 같은 프레임워크와도 호환됨** * * * * * ✅ **Capacitor 사용 방법** --------------------- ### 📌 1️⃣ **설치 및 프로젝트 설정** 먼저, Capacitor를 설치해야 해. ``` npm install @capacitor/core @capacitor/cli ``` 📌 **웹 프로젝트를 Capacitor 기반으로 초기화** ``` npx cap init "MyApp" "com.example.myapp" ``` 이제 Capacitor가 `capacitor.config.ts` 또는 `capacitor.config.json` 파일을 생성하면서 앱을 설정함. * * * * * ### 📌 2️⃣ **네이티브 플랫폼 추가** Ca...
Read more »