cra 로 리액트 만들면 있는 reportWebVitals() reportWebVitals은 React 애플리케이션의 성능 측정을 위한 도구입니다. 이 도구는 개발자가 애플리케이션의 성능 지표를 측정하고 모니터링할 수 있도록 도와줍니다. React 애플리케이션은 사용자 경험을 개선하기 위해 성능을 최적화해야 합니다. reportWebVitals는 애플리케이션의 성능을 측정하는 데 사용되는 핵심 지표인 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)와 같은 지표를 추적합니다. LCP(Largest Contentful Paint): 사용자가 페이지를 로드했을 때 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정..

useImperativeHandle과 forwardRef는 React에서 자식 컴포넌트의 메서드나 속성을 부모 컴포넌트에서 직접 접근할 수 있도록 해주는 기능입니다. forwardRef는 React 컴포넌트를 정의할 때 사용되는 함수로, 부모 컴포넌트가 자식 컴포넌트의 ref 속성을 통해 자식 컴포넌트의 인스턴스에 접근할 수 있게 합니다. forwardRef 함수를 사용하면 부모 컴포넌트에서 자식 컴포넌트의 메서드를 호출하거나 속성에 접근할 수 있습니다. useImperativeHandle은 함수형 컴포넌트 내에서 사용되는 Hook입니다. 이 Hook은 부모 컴포넌트에서 자식 컴포넌트의 특정 함수나 값을 직접적으로 호출하거나 사용할 수 있도록 합니다. useImperativeHandle을 사용하여 자식 ..

난 준적이 없는 배경색이 들어가 있어서 style={isFunction(onRowClick) ? { cursor: 'pointer' } : { cursor: 'auto' }} className={index === selectedIndex ? 'table_tr_selected' : '' } >>>>>> style={ isFunction(onRowClick) ? { cursor: 'pointer', ...(index === selectedIndex ? { backgroundColor: '#3c8dbc', color: 'white' } : {}) } : { cursor: 'auto', ...(index === selectedIndex ? { backgroundColor: '#3c8dbc', color: 'wh..

**은 파이썬에서 사용되는 "딕셔너리 언패킹" 연산자입니다. 딕셔너리 언패킹은 딕셔너리의 키-값 쌍을 개별 인자로 전달하는 데 사용됩니다. 일반적으로 딕셔너리 언패킹은 함수 호출 시 인자 전달에서 사용됩니다. render 함수에서도 이 원리가 적용됩니다. render 함수는 세 번째 인자로 딕셔너리 형태의 컨텍스트 데이터를 받습니다. 딕셔너리 언패킹을 사용하면 해당 딕셔너리의 키-값 쌍이 개별 인자로 전달되어 함수 호출 시 컨텍스트 데이터로 사용됩니다. 즉, 위의 코드에서 **kwargs는 딕셔너리 형태의 kwargs 변수를 언패킹하여, 해당 딕셔너리의 키-값 쌍이 render 함수의 세 번째 인자로 전달됩니다. 이를 통해 템플릿에서 추가적인 컨텍스트 데이터로 활용할 수 있습니다. 딕셔너리 언패킹은 파이..

일반적으로, 속성 이름을 나타내는 데에는 첫 번째 예제인 { asd: "asd" }의 방식을 선호합니다. 이는 객체 리터럴의 단축 문법으로, 코드를 더 간결하게 만들어 줍니다. 또한, 유효한 식별자로 구성된 속성 이름은 따옴표 없이 사용할 수 있으므로 코드를 작성할 때 불필요한 따옴표를 생략할 수 있습니다. 두 번째 예제인 { "asd": "asd" }의 방식은 모든 문자열을 속성 이름으로 사용할 수 있기 때문에 더 유연합니다. 이를 통해 공백이나 특수 문자를 포함하는 속성 이름을 지정할 수 있습니다. 또한, 예약어와 충돌하는 경우에도 따옴표를 사용하여 속성 이름을 지정할 수 있습니다. 따라서, 속성 이름에 제약이 없거나 특수한 경우가 아니라면 첫 번째 예제의 방식을 더 일반적으로 사용합니다. 이는 코드..

이러한 오류는 일반적으로 DOM 조작 중에 발생하는 문제입니다. 해당 오류 메시지는 "insertBefore" 메서드를 호출할 때 새로운 노드를 삽입하려는 위치의 노드가 현재 노드의 자식 노드가 아님을 나타냅니다. 이 오류가 발생하는 주요 원인은 다음과 같습니다: 존재하지 않는 노드를 조작하려고 시도하는 경우. 동일한 노드를 두 번 이상 삽입하려고 하는 경우. 노드를 삽입하기 전에 해당 노드의 부모가 변경된 경우. 다른 노드의 자식 노드를 조작하는 도중에 오류가 발생한 경우. 이 문제를 해결하기 위해 다음 사항을 확인할 수 있습니다: 삽입하려는 노드와 삽입 위치의 노드가 올바른지 확인하십시오. 올바른 노드를 참조하고 있는지, 노드가 이미 DOM에 존재하는지 등을 확인해야 합니다. 노드를 삽입하기 전에 해..

Vite는 JavaScript 기반의 웹 개발 도구입니다. Vite에서 저장(또는 변경 사항 저장)을 수행하면 다음과 같은 기능이 수행될 수 있습니다: 자동 새로 고침: Vite는 개발 중인 애플리케이션을 자동으로 새로 고쳐서 변경 사항을 즉시 반영할 수 있습니다. 파일을 저장하면 Vite가 변경된 내용을 감지하고 브라우저에서 페이지를 새로 고칩니다. 이를 통해 빠른 개발 속도와 실시간 반응을 얻을 수 있습니다. 빠른 번들링: Vite는 개발 서버를 사용하여 빠른 속도로 애플리케이션을 번들링합니다. 저장할 때마다 Vite는 필요한 파일만 다시 번들링하므로 전체 애플리케이션을 다시 빌드할 필요가 없습니다. 이는 개발 시간을 단축하고 변경 사항을 빠르게 확인할 수 있게 해줍니다. 핫 모듈 교체: Vite는 ..

이 훅은 React 컴포넌트가 렌더링된 후, 실제 DOM 업데이트가 일어나기 전에 동기적으로 실행됩니다. 이것은 레이아웃 계산 등의 작업을 수행하기에 적합한 시점입니다. 렌더링 | v 가상 DOM 생성 | v useLayoutEffect 호출 | v useLayoutEffect 내부 코드 실행 | v 실제 DOM 업데이트 | v 사용자에게 업데이트된 DOM 보여짐 DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다. DOM은 HTML, XML 또는 XHTML 문서의 각 요소를 나타내는 객체들로 구성됩니다. 웹 브라우저는 웹 페이지를 로드할 때, 해당 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성합니다. DOM 트리는 요소(el..

obj 쓰는거 익숙해지자!