WEB개발/REACT (10) 썸네일형 리스트형 React 참고, 오류 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 번들을 다운로드 받은 후 해석하게 됩니다. 2. HTML Streaming React v1.. [Next.js] Tailwind CSS, ESLint, Webpack 1. Tailwind CSS GitHub과 Next.js 공식 사이트에서 사용하고 있습니다. Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 `m-1`, `flex` 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다. ChitChat You have a new message! https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI too.. 이전 1 2 다음
