WEB개발/REACT (11) 썸네일형 리스트형 VITE Vite(비트)는 차세대 프론트엔드 빌드 툴입니다.기존의 CRA(Create React App)보다 훨씬 빠르고 가볍고 유연한 개발환경을 제공합니다. 특징설명빠른 개발 서버 구동번들링 없이 바로 실행 (ESM 기반)빠른 HMR (Hot Module Replacement)코드 바꿔도 브라우저 바로 갱신됨최적화된 빌드 속도Rollup 기반의 고속 빌드구성 간단함설정 파일 (vite.config.js)로 유연하게 설정 가능TypeScript, JSX 기본 지원React와 바로 호환됨 vite 외부모듈 번들링 📦 번들링 / 모듈 로딩 방식 정리 구분설명ESM (ECMAScript Module)import/export 문법, 브라우저에서도 네이티브 지원, Vite·Rollup·modern Webpack에서 주로.. 이React, Vite, Typescript 참고, 오류 Window객체 확장 declare global 구문을 사용하면 브라우저의 window 객체를 확장하는 인터페이스를 정의할 수 있습니다. TypeScript에서 Window 인터페이스는 전역 window 객체를 나타내므로, 이 인터페이스를 확장하면 브라우저 환경에서 window 객체에 새로운 속성을 추가할 수 있습니다.declare global { interface Window { myCustomProperty: string; myCustomFunction: () => void; }}// window 객체에 새로운 속성을 추가window.myCustomProperty = "Hello, world!";window.myCustomFunction = () => { console.log("Cus.. [환경구성] React개발을 위한 유용한 노드모듈 (node_modules) [Dev] @vitejs/plugin-react더보기@vitejs/plugin-react는 Vite에서 React를 원활하게 사용할 수 있도록 도와주는 공식 플러그인입니다.📌 역할:Vite에서 React Fast Refresh 지원JSX/TSX 변환 최적화Babel을 활용한 코드 트랜스파일링 react-infinite-scroller더보기import InfiniteScroll from "react-infinite-scroller";import {useInfiniteQuery} from "@tanstack/react-query";import {People} from "./People";interface PageData { next: string | null; results: People[];}cons.. [환경구성] tsconfig.js, tsc tsconfig.json (혹은 tsconfig.ts) : TypeScript 컴파일러에 프로젝트의 설정(컴파일 옵션, 포함할 파일, 제외할 파일 등)을 알려주는 구성 파일입니다. 주요 역할:컴파일 옵션 설정: 예를 들어, ECMAScript 버전(target), 모듈 시스템(module), 엄격한 타입 검사(strict) 등.프로젝트 파일 지정: 어떤 파일들을 컴파일할지 포함(include) 및 제외(exclude)할 파일들을 지정. tsc (TypeScript Compiler) : TypeScript 소스 코드를 JavaScript로 컴파일하는 명령줄 도구입니다. 주요 역할:컴파일 실행: 프로젝트 루트에 tsconfig.json이 있으면, 그 설정에 따라 전체 프로젝트를 컴파일합니다.파일 단위 컴파일.. [React] Next, Typescript... 오류모음 1. EPERM: operation not permitted, rename > npm cache clean --force > 관리자권한 재실행 2. Error: Cannot find module 'prettier' from > npm install --save-dev prettier 3. 모듈 못찾을 경우Cannot find module 'next/dist/lib/metadata/types/metadata-interface.js' or its corresponding type declarations next버전 최신화, 캐시삭제 yarn add next@latest pnpm store prune or "moduleResolution": "node", { "compilerOptions": { "target.. [React] web성능 메트릭 HTML 삽입 미리보기할 수 없는 소스 `CRA(create-react-app)` 디폴트 파일 중 하나 리액트 프로젝트를 생성하면 index.js에서 사용 앱의 퍼포먼스 시간들을 분석하여 객체 형태로 보여주는 것이 목적.다음과 같이 작성하여 콘솔에서 확인이 가능. 즉, 사용자들에게 편의를 제공하는 페이지나 컴포넌트는 아니므로 삭제해도 무방하다. reportWebVitals(console.log); LCP (Largest Contentful Paint) 페이지에서 가장 용량이 큰 컨텐츠가 표시되는 시점을 나타낸다. CLS (Cumulative Layout Shift) 페이지가 로드되기 시작하는 시점과 lifecycle 상태가 숨김으로 변경되는 시점 사이에 발생하는 모든 예기치 않은 레이아웃 이동의 .. [React] Typescript : 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가 있다. 기본 타입: number : 숫자 타입 string : 문자열 타입 boolean : 불리언 타입 any : 모든 타입을 허용하는 동적 타입 void : 반환 값이 없는 함수의 리턴 타입 undefined : undefined 값 또는 타입 null : null 값 또는 타입 배열 및 튜플 타입: `Array` 또는 `ElementType[]` : 배열 타입 `[Type1, Type2]` : 튜플 타입 객체 타입: { key: Type }: 객체 타입 interface: 인터페이스를 사용한 객체 타입 정의 함수 타입: (parameter: Type) => ReturnType: 함수 타입 void: 반환 값이 없는 .. [React] ServerComponent, HTML Streaming 1. Server Components VS ClientComponent: React 프레임워크의 새로운 기능 중 하나입니다. 이 기능은 서버와 클라이언트 간의 데이터 및 렌더링 로직을 효과적으로 분리하여 성능을 향상시킬 수 있는 방법을 제공합니다. React v18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 "전적으로(entirely)" 클라이언트에 있었다. 서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐의 차이입니다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트로 전달되고, 클라이언트 컴포넌트는 클라이언트가 js 번들을 다운로드 받은 후 해석하게 됩니다. 서버컴포넌트 사용예시 (nginx + .. 이전 1 2 다음
