건망증 환자의 뇌장하드

Rust 코드로 작성하는 WASM (with react) EventListener 이번 포스트는 EventListener를 이용하여 마우스 이벤트 또는 키보드 이벤트를 배워보도록 하겠습니다. rust에서는 javascript의 EventListener를 지원하기위해 gloo라는 라이브러리가 있습니다. 먼저 gloo 라이브러리를 cargo의 dependencies에 추가해줍니다. // Cargo.toml ... [dependencies] ... gloo="0.3.0" ... click event 그런다음 wasm 프로젝트의 lib.rs에 rust 함수를 작성해보겠습니다. Rust 코드 pub mod wasm_event; use wasm_event::*; #[wasm_bindgen] pub fn on_cli..

Rust 코드로 작성하는 WASM (with react) Document getElementById method javascript의 Dom method 중 getElementById를 wasm으로 구현할 수 있습니다. web_sys::Document의 get_element_by_id(id) 메서드를 이용할 수 있습니다. cargo.toml 설정 [dependencies.js-sys] version = "0.3.5" [dependencies.web-sys] version = "0.3.5" features = [ 'console', 'Document', 'Window', 'HtmlElement', ] web_sys에서 지원하는 window.document.get_element_by_id('id')를 사용하..

wasm을 학습하다 보니 생각보다 굉장히 잘 되어 있어서 싱방하여 몇가지 기능들을 포스팅해두려고 합니다. 이전에 react 개발환경에 wasm을 사용할 수 있도록 설정한 react 프로젝트가 있으므로 해당 프로젝트를 이용하여 wasm 코드를 작성했습니다. react는 javascript가 아닌 typescript를 사용한 프로젝트입니다. :) Console.log console에도 수많은 기능이 있지만 여기서는 자주 사용하는 console.log기능만 포스팅 하겠습니다. Cargo.toml dependency 설정 web-sys를 Cargo.toml에 추가해주어야 합니다. ... [dependencies.web-sys] version = "0.3.5" features = [ ..., 'console', ..

기존에 webpack을 공부하며 react환경과 webpack을 이용하여 react 개발환경과 비슷한 프로젝트를 생성해보았다. entry, output, plugin설정 module설정 등등 직접 해보며 react application 개발환경을 완성했다. 사실 가장 큰 목표는 wasm과 react를 연동해보는것 이었다. CRA react라면 eject를 하거나 rewired를 설치하거나 여러가지 방법이 있겠지만, 아무래도 webpack을 이용하여 직접 설정한 프로젝트에서 연동해 보는게 좀더 욕심이 났기 때문에 webpack을 공부하고 react프로젝트를 세팅하는것도 공부해보았다. (본 포스팅은 CRA가 아닌 webpack, babel로 react개발환경을 직접 설정한 후 진행했습니다.) wasm 설정하..

러스트로 컴파일 하는 web assembly 앱을 생성해보았다. 선행 조건은 rust, cargo, node, npm이 설치되어 있어야 한다. wasm package를 build하기위해 wasm-pack을 설치하여야 한다. wasm을 설치할 터미널에 아래를 입력하자. cargo install wasm-pack wasm-pack이 다운받아지지 않는다면 사이트에서 다운받자 여기서 wasm-pack을 다운받을 수 있다. https://rustwasm.github.io/wasm-pack/ wasm-pack rustwasm.github.io 그 다음 rust프로젝트를 생성하자. cargo new --lib 프로젝트명 rust프로젝트가 생성되면 해당 프로젝트의 터미널에 아래를 입력하자. wasm-pack build..