[Project] 공공데이터 공통표준용어 검색 만들기 - 화면 만들어보기 #3 fetch 로 데이터 불러와서 뿌려주기

화면 만들어보기 #3 fetch 로 데이터 불러와서 뿌려주기

---

이제 이전에 만들었던 FastAPI 서버와 통신해 데이터를 가져와보자.

 

NextJs 는 13버전 에서 부터 SSG, SSR, ISR의 Data Fetching 을 fetch api 를 통해 사용 할 수 있게 되었다.

 

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Data Fetching: Fetching, Caching, and Revalidating | Next.js

 

 

그렇다고 합니다.

 

우선은 깊게 알아보지는 않고 fetch 함수를 이용해 데이터를 불러옵니다.

 

export default async function Home() {

    const response =await fetch("http://localhost:4882");
    const data =await response.json();
    const items = data.data;
    console.info(items.length)
    
    ...

 

데이터가 잘 들어오는 것을 볼 수 있습니다.

 

이제 이 데이터를 가지고 이전에 그렸던 Data Table 부분을 처리해봅니다.

 

 

{items?.map((item:{[key:string]:string})=> {
    return <tr className="border-b border-neutral-200 dark:border-white/10" key={Math.random()}>
        <td className="whitespace-nowrap px-6 py-4 font-medium">{item["번호"]}</td>
        <td className="whitespace-nowrap px-6 py-4">{item[Object.keys(item)[1]]}</td>
        <td className="whitespace-nowrap px-6 py-4">{item[Object.keys(item)[2]]}</td>
        <td className="whitespace-nowrap px-6 py-4">{item[Object.keys(item)[3]]}</td>
    </tr>
})}

 

데이터가 잘 나오기는 하지만 아직 어영부영 어수선 해 보이네요 무엇을 중점적으로 볼지도 모르고 아직은 많이 부족합니다.

 

우선은 스타일 조정 부터 해줍니다.

 

form의 width 부터 main 태그에 맞춰 추기 위해 className 에 w-full을 주었습니다.

 

<form className={"w-full"}>
...

 

 

돋보기 아이콘이 search box 안에 있어야하는데 searchbox를 감사는 div의 너비가 form에 맞춰지면서 범위를 벗어나 버렸습니다.

 

div 너비를 width:max-content 값을 줘서 맞춰줍니다.

<div className="pt-2 relative mx-auto text-gray-600 w-px245 w-max">
...

 

 

 

가운데 있는 것보다는 왼쪽으로 정렬된 것이 보기 좋을 거 같아서 mx-auto는 지워버립니다.

 

<div className="pt-2 relative text-gray-600 w-px245 w-max">
...

 

얼추 만들어져 가는 모습이네요