NextJS

client side에서의 fetch리액트와 같은 client side에서는, fecth를 사용하여 값을 받아와 렌더링한다."use client"export default function Page(){ const [isLoading, setIsLoading] = useState(true); // 추가 const [data, setData] = useState(); const getMovies = asynch () => { const response = await fetch("url"); const json = await response.json(); setData(json); setIsLoading(false); } useEffect(() => { getMovies(); }, []); re..

오늘 한 일 / 학습NextJSNextJS에서 정적으로 라우팅하는 방식, 동적으로 라우팅하는 방식404 예외시 페이지로 핸들링하는 방법NextJS의 Hydration 과정서버 사이드 컴포넌트와 클라이언트 사이드 컴포넌트page.tsx, layout.tsx서버 사이드 fetchingfetch을 병렬로 처리하는 방법리액트의 Suspend 태그error.tsx로 예외 핸들링하는 방법

들어가며..다음의 강의를 보고 정리해서 작성한 내용입니다. Next.js 시작하기 – 노마드 코더 Nomad CodersNextJS for Beginnersnomadcoders.co  NextJS는 기본적으로, app 폴더 안의 page라는 파일을 참조하는데 이 경로가 바로 http://host/ 가 된다.파일 내부의 컴포넌트는 중요하지 않고, export default 된 컴포넌트를 사용한다.정적 라우팅NextJS에서는, 파일 시스템을 활용해서 url을 표현한다.만약 http://host/store/food 라는 경로의 페이지를 만들고 싶은경우 최상위 폴더인 app 폴더 내부에, store, food라는 폴더를 만들어주고 page.tsx 파일을 만들어주면 해당 경로의 페이지가 만들어진다.이때, 폴더에 ..