한줄What ?reportWebVitals💡 소프트웨어 개발을 돕기 위해 제공되는 재사용 가능한 구조나 틀을 제공하는 프로그램입니다.💡 이를 통해 핵심 비즈니스 로직이나 창의적인 부분에 집중해 개발할 수 있습니다.

React HookCPU 소모가 심한 함수들을캐싱해 최적화 What ?useMemo계산 비용이 많이 드는 함수의 결과값을 "기억"하고, 의존성 배열(dependency array)의 값이 변경되지 않는 한 이전에 계산한 값을 재사용하도록 도와줍니다. 주로 불필요한 렌더링을 방지하기 위해 사용됩니다. 계속 입력을 하면 대규모 성능 병목 현상 을 유발하는 기능이 실행됩니다.How ?useMemo💡 useMemo(( ) => function, [input_dependency])// 적용 예시function ExampleComponent() { const [exampleState, setExampleState] = useState(0) const resCount = useMemo(()=> { ..

한줄What ?props제목    React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작

1. 중첩 라우트(Nested Routes)란?중첩 라우트는 특정 경로(path)가 다른 라우트의 부모 경로일 때 사용됩니다.부모 라우트의 공통 레이아웃을 렌더링하면서, 하위 라우트가 부모의 특정 영역에 렌더링됩니다.2. 코드 분석(1) 부모 라우트jsx코드 복사Route path="/" element={Layout />}>path="/": 루트 경로(/)에 해당합니다.element={}: 이 경로가 활성화되면, Layout 컴포넌트를 렌더링합니다.Layout 컴포넌트 내부에는 중첩된 라우트를 렌더링하기 위해 ****이 필요합니다.(2) 하위 라우트jsx코드 복사Route index element={Main />} />index: 부모 라우트(/)의 기본 라우트로 동작합니다.URL이 정확히 /일 때만 렌..

Annotation environmentvariables What ?@NotEmptyJava Bean Validation API (javax.validation.constraints.NotEmpty 또는 jakarta.validation.constraints.NotEmpty) 에서 제공하는 어노테이션으로, 특정 필드나 요소가 비어 있지 않아야 함을 나타냅니다. "비어 있지 않음"의 기준은 데이터 타입에 따라 다르게 적용됩니다. String 타입: null이 아니고, 길이가 0보다 커야 합니다 (빈 문자열 "" 허용 안 함).Collection 타입 (List, Set 등): null이 아니고, 요소가 하나 이상 포함되어 있어야 합니다.Map 타입: null이 아니고, 엔트리가 하나 이상 포함되어 있어..

한줄What ?React.js💡 소프트웨어 개발을 돕기 위해 제공되는 재사용 가능한 구조나 틀을 제공하는 프로그램입니다.💡 이를 통해 핵심 비즈니스 로직이나 창의적인 부분에 집중해 개발할 수 있습니다.Why ?React.js1. 리액트는 컴포넌트 라는 단위로 화면의 부분을 독립적으로 관리 대규모 웹 애플리케이션 개발 시 컴포넌트 별 관리는 역할과 기능에 따라 따로 관리하기 용이하다.지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 위해서2. 가상 DOM으로 인한 충분히 빠른 속도DOM 자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다. 가상 DOM를 이용해서 실제 DOM를 조작..