함수 및 변수 관리

api요청 함수

저장 규칙

모든 API 요청 함수는 src폴더 안에 api폴더 안에 작업 페이지 폴더에 파일을 만들어 관리합니다.

작성 규칙

파일 이름은 요청 방식 + 요청 데이터로 작성합니다.

getUserData.ts

코드는 아래와 비슷한 양식으로 작성합니다.

const getUserData = async () => {
  const result = await fetch("http://localhost:8123/api/hi");

  if (!result.ok) {
    throw new Error("Failed to fetch data");
  }

  return result.json();
};

export default getUserData;

컴포넌트에서 사용 (with 리액트 쿼리)

컴포넌트에서 API요청 파일을 불러와서 사용합니다.

"use client";

import { useQuery } from "@tanstack/react-query";
import getUserData from "../_api/getUserData";

const User = () => {
  const { data } = useQuery({
    queryKey: ["user"],
    queryFn: getUserData,
  });

  return <p>{data}</p>;
};

export default User;

상수

app폴더 안에 constants.ts파일에 공통 상수를 모두 같이 관리합니다.