[FE] 라우트 작성, api 통신 및 회원가입 구현

라우트 작성

1. 메인 페이지(/) 라우트

{
  path: "/",
  element: (
    <Layout>
      <Home />
    </Layout>
  ),
  errorElement: <Error />,
}

• 루트 경로("/")에 접속하면 Layout 컴포넌트 내부에 Home 컴포넌트가 렌더링
• 에러 발생 시 Error 컴포넌트가 표시됨

2. 도서 목록 (/books) 라우트

{
  path: "/books",
  element: (
    <Layout>
      <div>도서 목록</div>
    </Layout>
  ),
}

• "/books" 경로에 접속하면 Layout 안에 도서 목록 텍스트가 표시됨

3. 회원가입 (/signup) 라우트

{
  path: "/signup",
  element: (
    <Layout>
      <SignUp />
    </Layout>
  ),
}

• "/signup" 경로에서는 Layout 내부에 SignUp 컴포넌트가 렌더링됨

 

API 통신

 

1. http.ts

const BASE_URL = "http://localhost:9999";  // API 서버 기본 주소
const DEFAULT_TIMEOUT = 30000;             // 30초 타임아웃

기본 설정

const axiosInstance = axios.create({
  baseURL: BASE_URL,          // 기본 URL 설정
  timeout: DEFAULT_TIMEOUT,    // 요청 제한 시간
  headers: {
    "content-type": "application/json"  // JSON 형식으로 통신
  },
  withCredentials: true,      // 쿠키 포함 설정
  ...config                   // 추가 설정 확장
});

 Axios 인스턴스 생성

axiosInstance.interceptors.response.use(
  // 성공적인 응답 처리
  (response) => {
    return response;
  },
  // 에러 응답 처리
  (error) => {
    return Promise.reject(error);
  }
);

인터셉터 설정

 

2. category.api.ts

: 카테고리 데이터를 서버로부터 가져오는 API 호출 함수 

import { Category } from "../models/category.model";  // 카테고리 타입 정의
import { httpClient } from "./http";                 // axios 인스턴스

• Category: 카테고리 데이터의 타입 정의
• httpClient: 이전에 설정한 axios 인스턴스

export const fetchCategory = async () => {
  const response = await httpClient.get<Category[]>("/category");
  return response.data;
}

• async/await를 사용한 비동기 함수
• get<Category[]>: 응답 데이터가 Category 배열임을 명시
• "/category": API 엔드포인트 경로

3. auth.api.ts

: 회원가입 API 를 호출하는 함수

import { SignupProps } from "../pages/Signup";    // 회원가입 데이터 타입
import { httpClient } from "./http";              // axios 인스턴스

• SignupProps: 회원가입 시 필요한 사용자 데이터 타입
• httpClient: 설정된 axios 인스턴스

export const signup = async (userData: SignupProps) => {
  const response = await httpClient.post("/users/join", userData);
  return response.data;
}

• async/await 비동기 함수
• POST 요청을 "/users/join" 엔드포인트로 전송
• userData를 요청 본문에 포함

---

🌟 배운 점

리액트가 너무 어렵다고 느꼈다.  api 를 사용해서 이제 백엔드와 프론트엔드를 연결하는 부분을 하는 것 같은데, 따라하면서 내가 뭘 하고 있는지 잘 모르겠다는 생각이 들었다. 그리고 오늘 계속 네트워크 오류가 났는데 이 부분도 아직 해결을 하지 못했다. 강의를 다시 들어보면서 고쳐보고, 해결 하면 블로그에 내용을 추가해야겠다. 리액트도 어려운데, 너무 많은 기능을 한꺼번에 배우다보니 과부하가 오는 것 같다🥹