도록

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

SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 방식으로, 각각 고유한 장점과 단점이 있습니다.1. SSR (Server-Side Rendering)SSR은 웹 페이지의 HTML을 서버에서 미리 생성하여 클라이언트(브라우저)로 전달하는 방식입니다. 사용자가 페이지를 요청하면, 서버가 HTML을 렌더링하고 클라이언트로 전송합니다.특징HTML은 서버에서 완성된 형태로 전달됨클라이언트 측에서 별도의 JavaScript 로직이 없더라도 페이지가 바로 보임장점빠른 초기 로드 시간: 서버에서 완성된 HTML을 전송하기 때문에 초기 로딩이 빠릅니다. 특히 저사양 기기나 느린 네트워크 환경에서 이점이 큽니다.SEO 최적화: 검..

페이지 방문 순서를 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} - 상품 정보`,  ..

1. 원하는 로티 파일 찾아서 다운받기https://lottiefiles.com/featured-free-animations Featured Free Lottie Animations - Curated Motion DesignsExplore our featured free Lottie animations, handpicked for quality and creativity. Discover free animations to enhance your projects with stunning motion graphics.lottiefiles.com 2. 다운받은 파일을 프로젝트 내의 폴더로 옮기기 3. lottie player 설치npm i react-lottie-player  4. Lottie renderin..

앞서 말하자면 아래 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) {   ..

사용자가 애플리케이션(클라이언트)을 통해 리소스 서버에 접근하기 위해 권한을 부여받는 과정 flow사용자 요청: 사용자가 클라이언트에게 로그인 및 권한을 요청합니다.인증 요청: 클라이언트가 사용자 대신 인증 서버로 인증 요청을 보냅니다.사용자 인증 및 승인: 인증 서버는 사용자를 인증하고, 사용자가 권한 부여를 승인합니다.Authorization Code 발급: 인증 서버는 클라이언트에게 인증 코드를 발급합니다.Access Token 요청: 클라이언트는 인증 코드를 사용하여 인증 서버에 액세스 토큰을 요청합니다.Access Token 발급: 인증 서버가 클라이언트에게 액세스 토큰을 발급합니다.자원 요청: 클라이언트가 액세스 토큰을 사용하여 자원 서버에 리소스를 요청합니다.자원 반환: 자원 서버가 요청된 ..