1. Fetch

테스트 조건

1. fetch 함수로 https://jsonplaceholder.typicode.com/posts 해당 엔드포인트에 요청을 한다.
2. 각각 /fetch,/fetch/detail, /axios 3가지 독립적인 페이지에서 위 api 요청을 실행한다.
3. 모두 다 서버컴포넌트 이다.

테스트 process

• 먼저/fetch 페이지에 들어간다. fetch를 하는지 확인한다.
• /fetch/detail 에 들어간다. fetch를 하는지 확인한다.
• /axios 에 들어간다. fetch를 하는지 확인한다.

테스트 기대 결과

• 제일 처음 진입한 /fetch 에서는 fetch를 한다.
• 두번째로 들어간 /fetch/detail 에서는 fetch를 하지 않는다.
• 세번째로 들어간 /axios 에서는 fetch를 하지 않는다.

테스트!

1. fetch 함수를 이용해서 해당 endpoint에 api 요청을 하는 함수를 선언한다.

   1. 함수가 서버에서 실행되는지 확인하기 위해 console.log('실행!') 을 찍어준다.
   2. fetch함수가 실행하여 데이터를 가져왔는지 확인하기 위해 console.log(result)를 찍어준다.

   // @/utils/index.ts
   
   type Data = {
     id: number;
     title: string;
     body: string;
     userId: number;
   };
   
   export async function fetchPosts() {
     const data = await fetch('<https://jsonplaceholder.typicode.com/posts>');
   	console.log('⭐️ 실행! ⭐️');
     const result: Promise<Data[]> = data.json();
     console.log(result);
   
     return result;
   }
   

2. /fetch 페이지에서 fetchPosts 함수를 import 하여 실행하여 데이터를 가져온후 화면에 그린다.

   // @app/fetch/index.ts
   
   import { fetchPosts } from '@/utils';
   
   export default async function FetchContainer() {
     const data = await fetchPosts();
     return (
       <ul>
         {data.map((item) => (
           <li key={item.id}>
             <h1>{item.id}</h1>
             <h2>{item.title}</h2>
             <p>{item.body}</p>
           </li>
         ))}
       </ul>
     );
   }
   

3. /fetch/detail 페이지에서 fetchPosts 함수를 import 하여 실행하고, id가 짝수인 녀석들만 화면에 그린다.

   // @app/fetch/detail/index.ts
   
   import { fetchPosts } from '@/utils';
   
   export default async function FetchDetailPage() {
     const data = (await fetchPosts()).filter((item) => item.id % 2 === 0);
     return (
       <ul>
         {data.map((item) => (
           <li key={item.id}>
             <h1>{item.id}</h1>
             <h2>{item.title}</h2>
             <p>{item.body}</p>
           </li>
         ))}
       </ul>
     );
   }