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

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

React를 위한 렌더링 캐시SSR (Server Side Rendering)은 웹 앱을 더 빠르게 표시하는 매우 유용한 기술입니다. 초기 HTML은 자바 스크립트가 파싱되기 전에 표시되며 사용자가 무엇을 탭할지 결정할 때 핸들러가 준비됩니다. React의 서버 측 렌더링은 추가 작업이 필요하며 서버 비용이 필요합니다. 또한 서버 팀이 서버에서 JavaScript를 실행할 수없는 경우 문제가 발생합니다.특히 로그인이 필요한 페이지와 사용자의 정보가 관리되는 페이지가있는 경우 CDN 설정이 상당히 복잡해집니다. Render Caching이라는 새로운 개념을 배우고 싶습니다. 이것은 서버에 코드를 작성하지 않고도 SSR처럼 사용자에게 즉각적인 성능 향상을 제공 할 수있는 멋진 트릭입니다. 렌더링 캐싱이란 무..