도록

Image 태그 부모 컨테이너 에 따로 relative나 width, height 크기 지정하지 않아도 gif처럼 동작함   Image        src={image}          alt="image"          sizes="full"          width={0}          height={0}          className={"h-full w-full object-contain"}

Zustand, Context API, Redux는 모두 상태 관리를 위한 도구이지만, 각 도구는 사용 목적, 복잡도, 성능 최적화 측면에서 차이가 있다. 1. ZustandZustand는 간단하고 가벼운 상태 관리 라이브러리로, 함수형 프로그래밍에 기반을 두고 있으며, 상태를 효율적으로 관리할 수 있습니다.특징간결함: 상태 정의와 사용 방식이 매우 간단합니다. useStore 훅을 사용하여 상태를 구독하고 관리합니다.성능 최적화: Zustand는 상태의 일부분만 구독할 수 있어, 구독된 상태가 변경된 컴포넌트만 리렌더링 됩니다. 이로 인해 리렌더링 성능이 최적화됩니다.미들웨어 지원: 미들웨어나 비동기 로직도 처리할 수 있지만, Redux처럼 구조화된 미들웨어가 아닌 단순한 기능적 미들웨어를 제공합니다...

페이지 방문 순서를 history stack에 저장한다.  내장 함수push : 새로운 URL 추가replace : 현재 URL을 새로운 URL로 교체back : 뒤로가기 reload : 새로고침 (히스토리 스택에 영향 없음) router.replace의 사용 예시 로그인 페이지에서 사용자가 정상적으로 로그인을 완료했을 때, router.push 가 아니라 router.replace를 쓰곤한다.뒤로 가기 버튼으로 다시 로그인 페이지에 다시 접근하는 것을 막기 위함이다. history stack 의 데이터에 접근하는 방법은? 없다. stack 자체를 조회할 수 없기에 각각의 페이지 이동 시 push가 맞는지 replace가 맞는지 적절히 잘 쓰는 것이 좋다.로그인 페이지가 n개의 단계로 페이지 이동하면서 ..

정적 metadata 설정// layout.tsx 또는 특정 페이지 컴포넌트 파일 export const metadata = {     title: '초보 개발자를 위한 리액트 입문',     description: '리액트를 처음 배우는 개발자를 위한 기초부터 심화까지의 과정을 담은 페이지' }; 동적 metadata 설정import fetchProductDetails from '../path/to/api'; export async function generateMetadata({ params }) {     const product = await fetchProductDetails(params.id);     return {        title: `${product.name} - 상품 정보`,  ..

앞서 말하자면 아래 url로 접속하면 튜토리얼이 잘 되어 있다.https://console.cloud.google.com/customer-identity/providers?project=calendar-with&walkthrough_id=identity-platform--sign-in-user-email 1. Identity Toolkit API 를 사용 설정한다.2. identity platform 을 사용설정한다 (추가하려는 프로젝트명이 맞는지 확인한다) (링크)3. 공급업체 추가하기 4. 테스트용 사용자 추가하기나는 사용자 aaa@test.aa , aaaa1111 의 정보로 게정을 추가했다.  5. API 키로 Identity Platform 클라이언트 SDK 초기화  6. 구글에서 제공한 테스트 ..

Next Client Component = React const { name } = useParams(); Next Server componenttype PageProps = {  params: { slug: string }  searchParams: { [key: string]: string | string[] | undefined }};export default function Page({  params,  searchParams } : PageProps ) {  return My Page}  Next app router 1. GETimport { type NextRequest } from 'next/server'   export function GET(request: NextRequest) {   ..