Front End Develop Front End Develop

최근 React 생태계에 몇 가지 중요한 변화가 있었습니다. Create React App 지원 중단, react.dev 출시, Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가가 포함됩니다. Create React App 추천 X 우선 Create React App이 추천이 되지 않습니다. Next.js 또는 Remix 등을 추천하고 있지만 클라이언트 사이드 핸들링만 하는 경우에는 Vite 또는 Parcel을 권유하고 있습니다. If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup..

리액트를 사용함에 있어서 여러가지 performance 측면의 개선 방법에 대한 글들이 많습니다. 그 중에서 많이 사용되고 있는 React memo에 대한 이야기입니다. 리액트 메모를 사용하기 전에 체크해볼 수 있는 몇 가지 사항들은 다음과 같습니다. production 빌드를 실행 중인지 확인합니다. (개발 빌드는 매우 느립니다.) 상태를 렌더링 트리에서 불필요하게 상속받고 있는지 확인합니다. React DevTools Profiler를 실행해서 리렌더링 되는 부분을 확인해보세요. (Highlight 옵션을 통해서 확인 가능) 만약에 비용이 비싸다면, 컴포넌트 자체를 memo()로 감쌉니다. 그리고 필요한 함수에 useMemo도 추가합니다. 그 외에도, 심각하게 느린 컴포넌트 환경은 많습니다. 그 때,..

다크모드를 관리할 때 일반적으로 Context API를 통해서 전체 테마를 바꾸는 ThemeProvider 기법을 많이 사용하게 됩니다. 여전히 CSS-in-JS는 최근 몇 년동안 CSS 사양이 많이 발전하고 개선되고, 최신 브라우저들도 발전함에 따라(Internet explorer의 변명은 더 이상 충분치 않습니다.) ThemeProvider를 사용하지만 많은 사용 사례에서 많은 이점만 있는 것이 아니라는 것을 깨닫게 됩니다. 이모션을 사용한 ThemeProvider의 예시를 살펴보시죠. import * as React from "react"; import styled from "@emotion/styled"; import { ThemeProvider } from "emotion-theming"; co..

마우스 오버 애니메이션은 응용 프로그램이 동적이고 반응적으로 느껴지도록 하는 좋은 방법입니다. 작은 적용으로 전체 제품을 업그레이드 할 수 있는 디테일입니다. 마우스 오버를 사용하지 않고 키보드로 웹을 사용하는 사람들은 Enter를 눌러서 마우스 오버 효과를 활성화 할 수 있습니다. const Boop = ({ rotation = 0, timing = 150, children }) => { const [isBooped, setIsBooped] = React.useState(false); const style = { display: 'inline-block', backfaceVisibility: 'hidden', transform: isBooped ? `rotate(${rotation}deg)` : `ro..

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..

아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. 이번에는 카트에 물건을 추가하는 기능을 만들어 보도록 하겠습니다. 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..

아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. 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 ..

useState 및 setState를 많이 사용들하고 계실텐데요. 한동안 React로 작업했다면 아마 useState를 사용했을 겁니다. 다음은 API의 간단한 예입니다. function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(count + 1) return {count} } 초기 상태 값으로 useState를 호출하면 해당 상태값과 이를 업데이트하기 위한 메커니즘(dispatch 함수)이 포함된 배열이 반환되면서, 상태에 대한 새로운 값을 전달하고 구성 요소를 다시 렌더링하여 useState가 다시 호출되어 새 상태 값과 디스패치 함수를 다시 검색합니다. 그러나 가끔 사용할 수 있는 ..