키모스토리

예를 들어 #8에서 테스트 했던 코드중에 MovieVidios fetch 를 처리 하는 도중 오류가 발생했을 경우해당 페이지 전체는 오류로 인해 페이지를 표시 할 수 없게 된다. 이때 error.tsx파일을 이용하여 애러를 처리 할 수 있다 (movies)/movies/[id]/page.tsx import { Suspense } from "react";import MovieInfo from "../../../components/movie-info";import MovieVideos from "../../../components/movie-videos";export const metadata = { title: "Movie Detail",}export default async function MovieD..

페이지에서 여러개의 api를 호출해야 하는 경우 동시에 병렬요청하는 방법import { API_URL } from "../../../(home)/page";export const metadata = { title: "Movie Detail",}async function getMovie(id:string) { console.log(`Fetching movies: ${Date.now()}`); await new Promise((resolve) => setTimeout(resolve, 2000)); const response = await fetch(`${API_URL}/${id}`); return response.json();}async function getVideos(id:string) { c..

Client Side Fetch"use client" 키워드 필요- 클라이언트에서 페이지 render 후에 useEffect를 이용하여 fetch 를 요청해서 ui를 다시 render 함- use client 를 선언해야 했기 때문에 meta data 도 해당 페이지에 적용 할 수 없음- React App API DB "use client"import { useEffect, useState } from "react"// use client 선언으로 metatdata 사용불가가// export const metadata = {// title: "Home Page",// }export default function HomePage() { const [isLoading, setIsLoading] = ..