next수업시간에 배운 것에 대해 정리해보자..
메타데이터란?
다른 데이터를 설명하는 데이터
즉, 특정 데이터의 속성, 구조, 출처, 사용법 등을 설명하는 정보를 포함합니다.
메타데이터 설정하기
1. 설정 기반 메타데이터(Config-based-Metadata)
- layout.js나 page.js 파일 내에 정적 metadata 객체를 내보내거나 동적으로 generateMetadata 함수를 생성하여 사용한다.
- 위 함수는 페이지의 메타데이터가 페이지의 동적 내용에 의존할 때 유용한다.
2. 파일 기반 메타데이터(File-based Metadata)
- 특정 라우트 세그먼트에 정적이거나 동적으로 생성된 특수 파일을 추가하여 사용한다.
- 위 방법은 특히 사이트의 아이콘 또는 소셜 미디어 이미지 같은 리소스를 관리할 때 강력하다.
metadata 객체 사용하기
- rayout 타이틀을 변경하여 사용한다.
또한, 중첩 병합이 가능하다
export const metadata = {
title: '페이지 제목',
description: '페이지 설명'
}
// 예제
export const metadata = {
title: "siyeon",
description: "siyeon's Blog",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
라우팅
Next.js는 파일 시스템 기반의 라우팅을 해준다.
pages 경로에 파일을 추가하면 자동적으로 route 할 수 있다!
- Next.js 프로젝트 안의
pages라는 폴더에 라우팅하고 싶은 이름으로 된 파일을 만들어주면 되는 것이다.
-> 자연스럽게 우리가 만든 파일 이름을 주소로 라우팅되는 것이 정적 라우팅이다.
다이나믹 라우팅(Dynamic Routing)
⭐️ 미리 정의된, 고정된 URL이 아니라 사용자가 접근한 경로 또는 특정 값에 따라 동적으로 변화하는 주소를 의미한다.
직접해보자!
1. Item 폴더안에 [id] 폴더 생성
2. [id]안에 page.tsx 생성 -> item/[id]를 작성 시 출력된다.
Params 사용해보자
export default function Items({ params: { id } }: { params: { id: string } }) {
return (
<div>
<div>물품번호 : {id}</div>
</div>
);
}/items/5로 들어가면
이와같이 뜬다.
API를 연결해서 상세페이지를 만들어보자
1. getItems 함수
async function getItems(id: string) {
const response = await fetch(`https://dummyjson.com/products/${id}`);
return response.json();
}id라는 문자열을 인자로 받아 특정 상품 정보를 가져오는 함수이다.fetch를 사용하여https://dummyjson.com/products/{id}API에서 상품 데이터를 가져온 후,await키워드로 요청이 완료될 때까지 기다린다.- 응답을 JSON 형식으로 변환해 반환한다.
2. getNextItem 함수
async function getNextItem(id: string) {
const nextId: number = parseInt(id, 10) + 1;
const response = await fetch(`https://dummyjson.com/products/${nextId}`);
return response.json();
}- 현재 상품의
id를 기반으로 그 다음 상품의 정보를 가져오는 함수이다. id를 숫자로 변환한 후, 1을 더해nextId값을 생성한다.- 이후 nextId를 사용하여 다음 상품의 API 경로
https://dummyjson.com/products/{nextId}에서 데이터를 가져온다. - 응답을 JSON 형식으로 변환해 반환한다.
3. Items 컴포넌트
export default async function Items({
params: { id },
}: {
params: { id: string };
}) {
const items = await getItems(id);
const nextItem = await getNextItem(id);
return (
<div>
<p>물품번호: {id}</p>
<p>상세설명: {items.description}</p>
<p>다음 항목: {nextItem.description}</p>
</div>
);
}- Next.js에서 사용하는 비동기 함수로, params 객체에서 id 값을 추출하여 getItems와 getNextItem을 호출한다.
- await로 두 함수가 데이터를 모두 가져올 때까지 기다린 후, 해당 데이터를 사용하여 JSX를 반환한다.
- 렌더링되는 부분은 다음과 같다:
- id를 화면에 표시
- 현재 상품의 설명items.description을 표시
- 다음 상품의 설명nextItem.description을 표시
전체코드
async function getItems(id: string) {
const response = await fetch(`https://dummyjson.com/products/${id}`);
return response.json();
}
async function getNextItem(id: string) {
const nextId: number = parseInt(id, 10) + 1;
const response = await fetch(`https://dummyjson.com/products/${nextId}`);
return response.json();
}
export default async function Items({
params: { id },
}: {
params: { id: string };
}) {
const items = await getItems(id);
const nextItem = await getNextItem(id);
return (
<div>
<p>물품번호: {id}</p>
<p>상세설명: {items.description}</p>
<p>다음 항목: {nextItem.description}</p>
</div>
);
}
Promise & await
비동기 처리를 쉽게 다루기 위해 제공되는 중요한 개념들이다.
Promise
비동기 작업이 끝나는 "약속"을 표현하는 객체이다.
- 비동기 작업이 처리 중이거나 처리된 후 성공적으로 처리되었는지 또는 오류가 발생했는지를 나타내느 상태정보를 갖는다.
Promise의 상태
- Pending(대기): 초기 상태, 성공 또는 실패로 변하지 않은 상태
- Fulfilled(이행): 연산이 성공적으로 완료됨
- Rejected(거부): 연산이 실패함
Async/Await
Async
- 항상
Promise를 반환한다. async키워드가 붙은 함수 내부에서는await키워드를 사용할 수 있습니다.
Await
await키워드는async함수 내에서만 사용할 수 있으며, Promise가 결과가 나올 때까지 함수의 실행을 일시 중지합니다.await는Promise가resolve된 값을 반환하며,Promise가reject되면 예외를 발생시켜try/catch블록으로 오류를 처리할 수 있습니다.
Frontend Developer