나의 개발일지

Data Fetching React에서 일반적으로 data를 fetching 하는 방법 "use client"; import { useEffect, useState } from "react"; export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch( "https://nomad-movies.nomadcoders.workers.dev/movies" ); const json = await response.json(); setMovies(..

Route groups 사용 방법 : 폴더 이름을 ( ) 괄호로 묶어주기 라우트 그룹의 이름 지정은 조직화를 위한 것이외에는 특별한 의미가 없으며 URL 경로에 영향을 주지 않는다. 라우트 그룹을 포함하는 라우트는 다른 라우트와 동일한 URL 경로로 해석되어서는 안된다. 예를 들어, 라우트 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 해석되어 오류가 발생할 수 있다. 최상위 레이아웃(layout.js 파일)이 없는 상태에서 여러 개의 루트 레이아웃을 사용하는 경우, page.js 파일은 라우트 그룹 중 하나에 정의되어야 한다. 예를 들어, app/(marketing)/page.js와 같은 형식이다...

app > layout.tsx import Navigation from "../components/navigation"; export default function RootLayout({children}: {children: React.ReactNode;}) { return ( {children} ); } layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다. layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다. 만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면 about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다. export default function RootLayout({ children, }: { ..

Link 태그는 클라이언트 사이드 네비게이션을 제공해준다. import Link from "next/link"; export default function Navigation() { return ( Home About Us ); } import Navigation from "../components/navigation"; export default function Page() { return ( Hello! ); } usePathname을 통해 현재 path에 해당하는 페이지 표시를 해줄 것이다 import { usePathname } from "next/navigation"; export default function Navigation() { const path = usePathname(); cons..

Not-Found Next.js는 기본적으로 페이지가 존재하지 않을 경우, 404 페이지가 출력된다. 하지만 에러페이지를 custom할 수 있다. Next.js에서 명시한 규칙의 파일명 not-found.tsx 파일을 만들어 사용하면 된다. 아무 주소를 입력했을 때 내가 설정한 문구가 뜬다. Global not-found와 Local not-found Global not-found : 말그대로 전체적인 범위에 대해 적용되는 404페이지이다. 'app/not-found.tsx'로 위에서 만든 것이 Global not-found이다. Local not-found : 특정 라우트 내에서만 적용되는 404페이지이다 앱 전체 범위 뿐만 아니라 '/pages/posts/[id].tsx'와 같은 동적 라우트에서 해당..

Page Router와 다른 점 가장 큰 변화는 페이지 라우팅 방식이다. Page Router는 Next.js의 기본 라우터로서, 각자의 파일이 'pages' 디렉토리 내에 위치하는 경우 자동으로 라우트가 생성된다. 예를 들어, 'pages/about.js' 파일이 있다면, 이는 '/about' URL로 접근할 수 있게 된다. ( 정적인 페이지 구조 ) App Router는 Next.js의 동적 라우팅 시스템으로서, 런타임에 URL 경로를 결정할 수 있다. '[param].js'와 같은 파일 형식으로 파일을 생성하면, 'param' 부분은 URL의 일부로 대체될 수 있다. 'pages.posts/[id].js' 파일이 있다면 '/posts/1' , '/posts/abc'와 같은 다양한 URL로 접근이 가..