본문 바로가기

react11

[React] 자주 변경되는 컴포넌트 최적화: style 이 컴포넌트 스타일을 이 패널을 사용해 커스텀 하는 기능을 개발 하던 중 Over 200 classes were generated for component ColorPicker__ColorBox with the id of "ColorPicker__ColorBox-sc-189ed6b7-1". 이런 경고가 나왔고 아래 방식으로 styled component를 사용할 것을 권장한다고 했다. Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.backg.. 2023. 7. 14.
[RxJs][React] how to declare Observable properly inside a component? 1. just declare import React, { useState, useEffect, useMemo } from 'react'; import { interval } from 'rxjs'; export default function App() { const [state, setState] = useState(); const observable$ = useMemo(() => interval(1000), []); return ( Hello RxJS! Observable value: {state} ); }2. subscribe useEffect(() => { const subscription = observable$.subscribe(setState); }, []);3. u.. 2023. 5. 6.
[web API] ResizeObserver: 크기변화 감지 [javascript] ResizeObserver vs resize event [react][event][resize][Dimensions] Resize event listener using React hooks Why do we need to use ResizeObserver? window는 resize event를 사용해 resize를 할 수 있다 window.addEventListener("resize", function() { // window resize시 처리 }) DOM은 window처럼 resize 이벤트를 사용해 size 변화를 감지할 수 없다. ResizeObserver를 사용한 react hook을 만들어 보자 import { useEffect, useState, useRef } fr.. 2023. 4. 14.
React Life cycle: 언제 state 하면 안 될까? 라이프 사이클 다이어 그램 React 구성 요소에서는 예기치 않은 동작이나 무한 루프를 방지하기 위해 특정 수명 주기 메서드에서 상태 또는 소품 업데이트를 피해야 합니다. 다음은 다양한 수명 주기 메서드에서 상태 또는 소품을 업데이트하지 않는 경우에 대한 몇 가지 지침입니다. constructor: 생성자는 구성 요소가 생성될 때 호출되며 그 목적은 상태 및 바인딩 메서드를 초기화하는 것입니다. 예기치 않은 동작이 발생할 수 있으므로 여기에서 상태 또는 소품을 업데이트하지 마십시오. shouldComponentUpdate: 이 메서드는 구성 요소가 소품 또는 상태의 변경 사항을 기반으로 다시 렌더링해야 하는지 여부를 결정하는 데 사용됩니다. 무한 재렌더링 루프가 발생할 수 있으므로 이 메서드에서 상태 또.. 2023. 4. 8.
[React] useId():: 컴포넌트 별 고유한 아이디 생성 import { useId } from 'react-id-generator'; function List({ items }) { const id = useId(); return ( {items.map((item, index) => ( {item} ))} ); } function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ; } 2023. 4. 8.
[event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6.
2. 이전 전략 그리고 어려움 3개월 안에 모든 걸 이전할 수 있을까? 이전 방식 결정 앱 전체 대시 보드만 이전 iframe: 독립된 대시보드 용 react app을 만들고 vue 내부에 react 앱 iframe으로 구현 component: react component를 만들고 이를 vue 내부에서 mount 시키기 React 이전 작업 필요 But frontend 팀은 Business 요구사항 동시 개발 QA에서 나오는 이슈 동시 처리 refactoring 기간은 짧은데 이 기간 동안 새로운 요구사항 진행, 기존 버그 fix 등 이전 작업 외 다른 일들을 동시에 진행해야 하는 어려운 환경 난이도 최상 2022. 12. 19.
1. React 이전 시작하게 된 이유 (수정 중) 기술 부채 + 최적화 현 상황 대시보드가 느리다. why? 기술 부채: Vue2, node 10 what? 무었 때문에 느리냐? Vue2 는 pub-sub 기반 상태 시스템 => destroy 시 모든 리스너들을 클리어 해야 한다 최신 기술 스택이 아니다 보니 virtual dom 등 최적화 부재 VueX 상태 관리 이전 시 장점 속도 향상: 최신 기술이 적용된 빠른 기술 시스템 긍정적인 개발 경험: 시장에서 필요하는 기술 역량 함양 구인이 수월해 진다 Why vue2 component destroy slow? In Vue 2, the process of destroying components in deeply nested structures might be slower due to several fac.. 2022. 12. 19.
[Webpack] Webpack dev server config devServer webpack-dev-server 관련한 설정 error, warning overlay logging hot liveReload // stats: 'minimal' | 'errors-only' stats: { warnings: false, }, // disable console.log devServer: { client: { logging: 'info', overlay: { errors: false, warnings: false, }, }, open: false, historyApiFallback: true, static: './', hot: true, liveReload: true, }, stats: 'errors-onl.. 2022. 10. 10.
How to change themes between light and dark, @media /* TODO */ :root { --loading-height: 140px; --white: #ffffff; --black: #000000; } .light-theme { --background-color: var(--white); --color: var(--black); } .dark-theme { --background-color: var(--black); --color: var(--white); } * { transition: background-color 0.2s ease, color 0.1s ease; } /* TODO dark mode 처리 */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-co.. 2022. 10. 10.

티스토리툴바