React

우선, 알아둘점 React 는 "라이브러리" 다 프레임워크와 라이브러리 차이프레임워크와 라이브러리 개념 (제어 흐름의 권한)Gatsby Gatsby 는 작성한 React 구성요소를 가져다가 공용 폴더에서 일반 HTML 로 렌더링을 함 => 유저가 웹사이트에서

크로스 플랫폼 개발서버 호스팅개발 환경컨테이너와 가상화빌드 및 배포 파이프라인백엔드 통합React 개발 워크플로에서 Linux를 고려해야 하는 경우명령줄 도구 및 Unix 기반 환경에 익숙한 경우Linux 기반 프로덕션 서버에 응용 프로그램을 배포하려는 경우Docker

DOM 조작은 비용이 크므로, 가능한 한 줄여야 함 CSS 변경은 가능한 한 한번에 처리, 레이아웃 스타일 변경 줄여야 함 이미지 크기를 줄이고, 적절한 형식을 사용 컴포넌트가 렌더링될 때 => Virtual DOM 업데이트 이전 Virtual DOM 과 새 Vir

중요한 이유효율성일관성확장성달성 방법제네릭 디자인사용자 정의 Props 상속보다는 합성 문서중요한 이유업데이트 용이성기술 부채 감소협업 효율성달성 방법클린 코드컴포넌트 구조주석테스트리팩토링

애플리케이션의 번들 크기를 줄이고 필요한 코드만 로드하여 초기 로딩 시간을 단축하는 기법동적 import 문법 사용React.lazy 와 함께 동적 import()를 사용하여 컴포넌트를 분할라우트 기반 분할React Router 와 같은 라이브러리를 사용하여 라우트별로

단일 페이지 애플리케이션의 사용자 인터페이스를 구축하는 데 사용되는 널리 사용되는 JavaScript 라이브러리구성 요소 기반 아키텍처, 가상 DOM, JSX와 같은 React의 디자인과 기능은 React를 동적 및 반응형 웹 인터페이스 개발을 위한 강력하고 효율적이며

Dom웹 문서용 프로그래밍 인터페이스페이지 구조를 개체 트리로 나타내므로 스크립트 문서 구조, 스타일 및 내용 변경 가능React DomReact 가 DOM 과 상호작용하는 방식React 는 실제 DOM 의 경량 사본인 Virtual DOM 을 생성컴포넌트의 상태 변경

업로드중..서버 측 렌더링 및 정적 Web App 을 구축하기 위한 React 프레임워크사용 편의성, 성능 최적화, 자동 코드 분할, 내장 CSS 지원, 빠른 새로 고침과 같은 기능Jamstack 이 부상하고 성능이 뛰어나고 SEO 친화적인 Web App 에 대한 필요

이미지가 로드되면 브라우저는 이러한 이미지를 로컬로 캐시 가능Cache-Control 헤더 사용서버에서 이미지를 제공할 때 적절한 HTTP 헤더 설정브라우저에 이미지를 캐시해야 하는 기간 지시정적 이미지의 경우 max-age 를 길게 설정 가능ETag 캐시된 리소스의

throttle일정 주기마다 이벤트를 모아서 이벤트가 한 번만 발생하도록 하는 기술스크롤과 같은 빠르거나 연속적인 이벤트 중에 이벤트 처리기 호출 수를 제한성능을 최적화하고 불필요한 부하를 줄이는 데 도움특히 DOM 조작 또는 API 호출과 같은 리소스 집약적인 작업이

DOM 의 네이티브 이벤트 시스템과 직접 상호 작용이벤트 이름에 소문자를 사용 (ex , 'click')이벤트 처리기를 요소에 직접 할당 (addEventListener)네이티브 브라우저 이벤트를 래핑하는 합성 이벤트 시스템을 통해 DOM 의 이벤트를 추상화브라우저에서

🖋️ SyntheticEvent 의 이벤트 속성 > ### # target 과 currentTarget 비교 DOM 이벤트의 컨텍스트에서 target 과 currentTarget는 이벤트와 관련된 다른 요소를 참조하는 이벤트 객체의 속성 target 이벤

이벤트 루프가 어떻게 작동하는지 분석한 다음React 구성 요소 이벤트 처리 시나리오와 연결프로세스 과정호출 스택이 비어있는지 지속적으로 확인if (호출 스택 isEmpty) && !(콜백 큐 isEmpty)EventLoop 는 호출 스택.Push(콜백 큐 첫 번째

React-Query 사용데이터 패칭을 위한 Suspense후크가 있는 기능적 컴포넌트메모이제이션코드 분할프롭 드릴링 방지컨텍스트 API상태 관리 라이브러리데이터 응집력 (상위에서 하위로)구성 요소 자율성 (해당 컴포넌트 자체 패칭)

데이터 가져오기 및 저장useQuery 를 사용사용자가 입력한 고유 키를 사용하여 응답 데이터를 자동 캐싱캐시된 데이터를 검색하고 관리하는 데 사용다른 구성 요소가 동일한 키를 사용하여 동일한 데이터를 요청하는 경우React Query는 새 네트워크 요청을 하는 대신

Intersection Observer API의 주요 기능은 개발자가 뷰포트에서의 존재 여부에 따라 요소의 "가시성과 모양을 제어" 할 수 있도록 하는 것"관찰된 요소가 뷰포트에 들어오거나 나가면 API는 콜백을 트리거" 콘텐츠, 애니메이션 또는 작업을 로드하는 데 사

사용자가 실제로 볼 가능성이 있는 컨텐츠만 로드예시 ) 스크롤을 통해 나중에 보게 될 이미지는 초기 로드 시점에서는 로딩하지 않고, 해당 이미지가 화면에 나타날 때 로딩중요한 컨텐츠(예: 텍스트 콘텐츠)는 먼저 로드상대적으로 중요도가 낮은 리소스(예: 이미지, 비디오)

Props Drilling 방지상태를 공유하기 위해 Props 로 전달하지만 해당 State 가 직접적으로 필요하지 않은 컴포넌트들도 받는 것을 방지사용예시 Main : SelectSub : OptionJSX 코드 길이가 더 길어질 수 있음

Brad Frost 에 의해 소개된 웹 디자인 방법론UI 를 구성하는 작은 단위부터 시작하여 점차 복잡한 구조로 만들기컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눔재사용 가능한 컴포넌트의 라이브러리를 구축하는데

"display: flex" 또는 "display: inline-flex" 지정주 축은 "flex-direction" 속성으로 설정교차 축은 주 축에 수직 flex-container 와 flex-items 결정레이아웃 방향 설정 flex-direction 을 사용하여

import/exportJavaScript 모듈 시스템을 이해하고, 코드를 모듈화하는 방법React 컴포넌트를 포함한 모든 자원을 모듈로 분리하고 필요에 따라 임포트하여 사용프로미스(Promises)비동기 작업을 위한 JavaScript의 객체.then(), .catc

> # 🖋️ 리액트 프로젝트에 좋은 폴더 구조 폴더 구조 폴더 구조 설명 'components/' APP 에서 공통으로 사용되는 컴포넌트를 저장 'UI/' : 버튼, 입력 필드와 같은 재사용 가능한 기본 UI 컴포넌트를 포함 'Layout/' : 헤더, 푸터 등의 레이아웃 관련 컴포넌트를 포함 'features/'...

React 함수 컴포넌트 간에 상태 로직을 재사용하기 위함Custom Hook을 통해 반복되는 로직을 추상화하여 여러 컴포넌트에서 재사용코드의 가독성과 유지보수성이 향상또한, 관심사의 분리가 잘 이루어져 컴포넌트를 더 깔끔하게 유지코드 품질을 향상Custom Hook은

React의 상태 관리 훅 중 하나복잡한 상태 로직을 컴포넌트에서 분리다수의 하위 값이 포함된 상태를 다룰 때 유용 특히 여러 상태가 서로 의존적일 때 다음 상태가 이전 상태에 의해 계산되어야 할 때 권장 useState 보다 더 선언적인 방법으로 상태 업데이트 로직을

(성능에 영향을 미칠 수 있는 브라우저 렌더링 단계)성능 최적화사용자 경험 보장브라우저가 전체 페이지 또는 페이지 일부의 레이아웃을 계산하는 프로세스문서에 있는 요소의 위치와 크기를 계산하는 작업이 포함페이지의 콘텐츠가 변경될 때페이지 렌더링, 처음에 완료될 때CSS

상위 요소에서 하위 요소의 트리거된 이벤트 포착 가능해당 요소 안에 하위 요소에 대한 이벤트 관리 가능모든 하위 요소에 이벤트를 추가하는 것보다 효율적해당 요소에 data-\* 와 같은 속성을 사용하여 이벤트 핸들러에서 읽을 수 있게 설정목록의 단일 리스너가 모든 것을

DOM 요소(특히 window 또는 document와 같은 전역 개체)에 이벤트 리스너를 추가할 때마다 메모리 누수 및 의도하지 않은 동작을 방지하기 위해 구성요소가 마운트 해제되거나 효과가 다시 실행되기 전에 해당 리스너를 제거하는 것이 중요window, docume

useEffect 후크는 일반적으로 기능 구성 요소의 구독을 관리하는 데 사용구독 설정 및 해제를 포함한 부작용을 수행구독은 실시간 애플리케이션이나 데이터가 자주 업데이트되고 이러한 업데이트를 UI에 즉시 반영하려는 상황에 유용일반적인 사용 사례에는 채팅 애플리케이션,

메모리제이션 값을 반환하는 React Hook너무 많이 사용하면 메모리 사용량이 늘어나며, 메모이제이션 자체도 비용이 들 수 있으므로 신중하게 사용해야 함함수를 메모이제이션하는 데에 사용하는 React Hook너무 많이 사용하면 메모리 사용량이 늘어나며, 메모이제이션

기본적으로 children 을 포함하는 props 타입을 제공명시적으로 함수형 컴포넌트임을 나타냄문자열, 숫자, 요소, fragment, 그리고 null 등 다양한 타입을 포함주로 JSX를 사용할 때 반환되는 타입특정 요소를 반환하는 컴포넌트를 더 엄격하게 타입 체크R

Observable은 비동기 프로그래밍을 위한 패턴주로 ReactiveX 라이브러리에서 사용되며, 이벤트 스트림을 처리하는데 유용JavaScript에서 Observable은 주로 RxJS 라이브러리를 통해 사용데이터의 스트림을 나타내며, 시간에 따라 발생하는 값의 순차