WEB개발/REACT (7) 썸네일형 리스트형 [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.. [React] Next.js : Next.js는 React 기반의 웹 애플리케이션을 빌드하기 위한 JavaScript 프레임워크입니다. Next.js는 React를 사용하여 정적 및 동적 웹 페이지를 빌드하는 데 도움을 주며, 많은 기능과 성능 최적화를 제공합니다. 기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다.Next.js는 초기 페이지 로딩에 대해서는 정적 사이트 생성(SSG), SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 클라이언트사이드 렌더링(CSR) 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이.. [REACT] HOOKS (useState, useEffect, useContext, useMemo, useReduce) : 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 1. useState : useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. function Counter() { const [value, setValue] = React.useState(0); console.log(value); return ( 현재 카운터 값은 {value} { setValue(value + 1); console.log("plus btn : " + value); } }> +1 button { se.. 이전 1 다음
