웹 개발에서 API란?

Frontend service ←→ backend service 간의 연결될때 API가 활용된다.

Frontend Service는 고객과 닿아있고, Backend Service는 DB에 닿아있다.

고객이 DB에 접근하기 위해 FE와 BE가 연결되어야하고, 이때 API를 활용한다. 그때 BE가 제공해주는 API를 통해 DB에 접근 할 수 있다.

Next.js에서의 API 활용

/pages/api 폴더를 만들고 그 안에 활용함.

폴더 구조…

BE API 만들기

//pages/api/user.js

export default function handler(res, req) {
  res.status(200).json({ name: 'KYUSIK KO' });
}

클라이언트 데이터 페칭

//[username]/info.js

export default function UserNameInfo() {
  const router = useRouter();
  const { username, info } = router.query;
  const [firstName, setFirstName] = useState('');

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => {
        setFirstName(data.name);
      });
  }, []);

  return (
    <main>
      <h1>This is {username}'s</h1>
      <h1>Name : {firstName}</h1>
    </main>
  );
}