SPA11 리플로우가 일어나는 환경에서 React Suspense 사용해보기 import React from "react"; const imgCache = { __cache: {}, read(src) { if (!src) { return; } if (!this.__cache[src]) { this.__cache[src] = new Promise((resolve) => { const img = new Image(); img.onload = () => { this.__cache[src] = true; resolve(this.__cache[src]); }; img.src = src; setTimeout(() => resolve({}), 7000); }).then((img) => { this.__cache[src] = true; }); } if (this.__cache[src] inst.. 2022. 1. 18. Rust로 SPA 만들기 - 2. 카트에 물건 담기 아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. 이번에는 카트에 물건을 추가하는 기능을 만들어 보도록 하겠습니다. cart_products라는 새로운 상태 필드에서 장바구니에 추가 된 모든 제품을 추적합니다. 카트에 담기라는 버튼을 만들어서 각 product에 렌더링해주도록 하겠습니다. cart_products라는 버튼을 클릭하면 state로직을 업데이트 해주도록 하겠습니다. home.rs 파일을 다음과 같이 수정합니다. // src/pages/home.rs use yew::prelude::*; #[derive(Clone)] struct Product { id: i32, name: String, description: String, image: String, price: f64 } struct C.. 2021. 7. 4. Rust로 SPA 만들기 - 1. 리스트 만들기 아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. WebAssembly(wasm)를 사용하면 JavaScript 이외의 언어로 작성된 코드를 브라우저에서 실행할 수 있습니다. 주요 브라우저들은 wasm을 지원하고 전 세계적으로 90% 이상의 사용자가 wasm을 실행할 수있는 브라우저를 사용하고 있습니다. Rust를 사용하면 WebAssembly로 컴파일 되기 때문에 순수하게 Rust로 SPA를 빌드할 수 있고 자바스크립트를 한줄도 사용하지 않고도 만들 수 있습니다. https://rustmart-yew.netlify.app/ RustMart rustmart-yew.netlify.app 위의 데모 사이트를 한번 방문해보세요 설치 https://www.rust-lang.org/tools/install .. 2021. 7. 3. [React] useState의 초깃값 지연 useState 및 setState를 많이 사용들하고 계실텐데요. 한동안 React로 작업했다면 아마 useState를 사용했을 겁니다. 다음은 API의 간단한 예입니다. function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(count + 1) return {count} } 초기 상태 값으로 useState를 호출하면 해당 상태값과 이를 업데이트하기 위한 메커니즘(dispatch 함수)이 포함된 배열이 반환되면서, 상태에 대한 새로운 값을 전달하고 구성 요소를 다시 렌더링하여 useState가 다시 호출되어 새 상태 값과 디스패치 함수를 다시 검색합니다. 그러나 가끔 사용할 수 있는 .. 2021. 1. 1. 이전 1 2 3 다음
