스페이스 루미

Rendering : Fundamentals - 렌더링 : 기초 렌더링은 작성한 코드를 사용자 인터페이스로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다. 렌더링 환경 애플리케이션 코드를 렌더링할 수 있는 환경은 클라이언트와 서버 두 가지가 있습니다. 클라이언트는 애플리케이션 코드에 대한 요청을 서버에 보내는 사용자 디바이스의 브라우저를 말합니다. 그런 다음 서버의 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환합니다. 서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 연산을 수행한 후 적절한 응답을 다시 보..

Routing - Route Handlers / 라우트 핸들러 라우트 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 지정 요청 핸들러를 만들 수 있습니다. 알아두면 좋습니다: 라우트 핸들러는 앱 디렉토리 내에서만 사용할 수 있습니다. 라우트 핸들러는 페이지 디렉터리 내의 API 경로와 동일하므로 API 경로와 라우트 핸들러를 함께 사용할 필요가 없습니다. 규칙: 라우트 핸들러는 app 디렉터리 내의 route.js|ts 파일에 정의됩니다: // app/api/route.ts export async function GET(request: Request) {} 라우트 핸들러는 page.js 및 layout.js와 유사하게 app 디렉터리 내에 중첩될 수 있습니다. 하지만 ..

Routing - Loading UI: 로딩 UI Next.js 13에는 새로운 파일 규칙인 loading.js가 도입되어 React Suspense로 의미 있는 로딩 UI를 만들 수 있습니다. 이 규칙을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있으며, 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. 즉시 로딩 상태 즉시 로딩 상태는 탐색 시 즉시 표시되는 fallback(대체) UI입니다. 스켈레톤, 스피너와 같은 로딩 표시기를 미리 렌더링하거나 표지 사진, 제목 등과 같이 향후 화면에서 작지만 의미 있는 부분을 미리 렌더링할 수 있습니다. 이를 통해 사용자가 앱이 응답하고 있음을 이해하고 더 나은 사용자 경험을 제공할 수 있습니다. 폴더 내에 loa..

Routing - Linking and Navigating : 연결 및 탐색 Next.js 라우터는 클라이언트 측 네비게이팅과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태와 동시 렌더링을 지원합니다. 즉, 탐색이 클라이언트 측 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하며, 중단이 가능하고, 경쟁 조건을 일으키지 않습니다. route 사이를 탐색(navigate)하는 방법에는 두 가지가 있습니다: 컴포넌트 useRouter 훅 이 페이지에서는 , useRouter()를 사용하는 방법을 살펴보고 네비게이팅이 어떻게 작동하는지에 대해 자세히 알아볼 것입니다. 컴포넌트 는 HTML 엘리먼트를 확장하여 경로 간 프리페칭과 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. Next.js..

Routing - Pages and Layouts : 페이지와 레이아웃 Next.js 13의 App Router에는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다. 페이지 페이지는 route에 고유한 UI입니다. page.js 파일에서 컴포넌트를 내보내 페이지를 정의할 수 있습니다. 중첩 폴더를 사용하여 route를 정의하고 page.js 파일을 사용하여 route에 공개적으로 액세스할 수 있도록 합니다. app 디렉터리 내에 page.js 파일을 추가하여 첫 번째 페이지를 만듭니다: // `app/page.js`는 루트 `/` URL의 UI입니다. export def..

Routing - Defining Routes : 라우팅 정의 이 페이지에서는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다. Routes 만들기 app 디렉토리 내에서 폴더는 경로를 정의하는 데 사용됩니다. 각 폴더는 URL 세그먼트에 매핑되는 route 세그먼트를 나타냅니다. 중첩된 route를 만들려면 폴더를 서로 중첩할 수 있습니다. route 세그먼트를 공개적으로 액세스할 수 있도록 하기 위해 특별한 page.js 파일이 사용됩니다. 이 예제에서는 /dashboard/analytics URL path에 해당하는 page.js 파일이 없기 때문에 공개적으로 액세스할 수 없습니다. 이 폴더는 구성 요소, 스타일시트, 이미지 또는 기타 함께 배치된 파일을 저장하는 데 사용할..

Next.js 라우팅 기본사항 Next.js 13에서는 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 새로운 App Router가 React 서버 컴포넌트 위에 구축되었습니다. 이 페이지에서는 새로운 라우팅 모델의 기본 개념을 소개합니다. 용어 문서 전체에서 이러한 용어가 사용되는 것을 볼 수 있습니다. 다음은 간단한 참조입니다: Tree: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다. Sub Tree: 트리의 일부로, 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root: 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다. Leaf: 하위 트리의 노드 중 자식이 없..