🎯 리액트 라우터(React Router)를 통해서 경로를 설정하고, API 통신과 데이터 레이어를 통해 회원가입 페이지를 제작합니다.

📗 Today I Learned

React Router

React Router는 한 장의 웹페이지 안( SPA )에서 사용자가 이동하는 것처럼 보이게 화면만 바꿔주는라우팅 라이브러리입니다.

🤔 왜 React Router를 사용하는 걸까?

React는 기본적으로 SPA 구조라 페이지를 이동하더라도 전체 페이지를 새로고침하지 않습니다. 그래서 URL에 따라 다른 화면을 보여주는 URL 라우팅을 지원하지 않습니다.

사용자 경험이나 SEO, 공유 기능에서 문제가 생길 수 있기 때문에 라우팅 기능을 지원해주는 것이 📍"React Router" 입니다.

React Router 라이브러리 설치

이미 리액트 템플릿을 만든 상태이므로 두번째 방법으로 설치해주었습니다.

1️⃣ 공식문서 설치 방법( React 템플릿에 router 포함된 방법 )

npx create-react-router@latest my-react-router-app

2️⃣ React Router DOM 라이브러리 단독 설치 방법( react-router-dom / @types/react-router-dom )

npm install react-router-dom

npm install --save-dev @types/react-router-dom

🤔 react-router / react-router-dom / react-router-native의 차이가 뭘까?

패키지 이름	설명
react-router	라우터의 기본 핵심 (라우팅 로직만 있음)
react-router-dom	브라우저용 DOM 라우터 (웹)
react-router-native	React Native 전용 라우터 (모바일)

---

API 요청 플로우 전체 구조

사용자 화면에서 데이터를 요청하고 관리하여, 최종적으로 서버로부터 받은 데이터를 표시하는 전체 흐름 구조입니다.

┌────────────────┐
│ [1] View 👀  │
│ Header        │  ← 사용자에게 보여지는 화면
└────┬───────────┘
     │ 화면이 뜰 때 데이터 필요!
     ▼
┌────────────────┐
│ [2] Hook 🔗   │
│ useCategory() │  ← 데이터를 요청하는 커스텀 훅
└────┬───────────┘
     │ 내부에서 Query 라이브러리 호출!
     ▼
┌──────────────────────┐
│[3] Query Library ⚙️│
│ useQuery           │ ← 캐싱/로딩/에러 관리 도우미
└────┬─────────────────┘
     │ Fetcher 호출 (진짜 요청함수)
     ▼
┌──────────────────┐
│ [4] Fetcher 📬 │
│ fetchCategory()│ ← fetch로 API 호출
└────┬─────────────┘
     │ 백엔드한테 데이터 요청!
     ▼
┌─────────────────────┐
│ [5] API Server 🧠 │
│ '/categories'      │ ← 실제 데이터 응답 (JSON)
└─────────────────────┘

---

react hook form

React에서 폼을 쉽게 다룰 수 있게 도와주는 라이브러리입니다.

설치 방법

npm install react-hook-form

예제 코드

import { useForm } from 'react-hook-form';

function SimpleForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log(data); // { email: '...', password: '...' }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        placeholder="이메일"
        {...register('email', { required: true })}
      />
      {errors.email && <span>이메일을 입력해주세요</span>}

      <input
        placeholder="비밀번호"
        type="password"
        {...register('password', { required: true })}
      />
      {errors.password && <span>비밀번호를 입력해주세요</span>}

      <button type="submit">제출</button>
    </form>
  );
}

• register : input을 폼에 등록합니다. (입력값 추적 + 유효성 검사 포함)

• handleSubmit : 폼 제출 시 실행되는 함수를 인자로 받는 함수로 내부적으로 유효성 검사를 통과하면 onSubmit이 실행됩니다.

• formState.errors : 각 input의 에러 상태를 객체로 관리합니다.

• {...register('email', { required: true })}

  • 'email'이라는 key 값을 추적해줌 → 나중에 onSubmit(data)에서 data.email로 접근합니다.

---

axios

클라이언트 측에서 서버로 HTTP 요청을 쉽게 보내고 응답을 처리하는 라이브러리입니다. fetch API의 기능을 확장한 라이브러리로, 비동기 요청을 보내고 데이터를 받는 데 편리한 장점을 가지고 있습니다.

설치 방법

npm install axios

예제 코드

//http.ts
import axios, { AxiosRequestConfig } from 'axios';
import { getToken, removeToken } from '../store/authStore';

const BASE_URL = 'http://localhost:9999';
const DEFAULT_TIMEOUT = 30000;

export const createClient = (config?: AxiosRequestConfig) => {
  const axiosInstance = axios.create({
    baseURL: BASE_URL,        // 기본 주소
    timeout: DEFAULT_TIMEOUT, // 요청 타임아웃
    headers: {
      'Content-Type': 'application/json',
      Authorization: getToken() ? getToken() : '',
    },
    withCredentials: true,    // 쿠키 포함 여부 
    ...config,                // 외부 커스터마이징 허용
  });

  axiosInstance.interceptors.request.use((config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `${token}`;
    }
    return config;
  });

  axiosInstance.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error.response.status === 401) {
        removeToken();
        window.location.href = '/login';
        return;
      }
      return Promise.reject(error);
    }
  );

  return axiosInstance;
};

export const httpClient = createClient();

• BASE_URL : 기본 요청 URL을 나타냅니다.

• DEFAULT_TIMEOUT : 요청을 기다릴 수 있는 최대 시간(ms)을 나타냅니다. 요청이 30초 안에 안 끝나면 timeout 됩니다. 무한 로딩을 방지하기 위해 사용됩니다.

• axios.create()를 통해 커스텀 클라이언트 객체(axiosInstance)를 생성해줍니다.

  • headers: { 'Content-Type': 'application/json' } : JSON 데이터를 주고받겠다고 명시해줍니다.

  • Authorization: getToken() ? getToken() : '' : 로그인했으면 토큰을 넣고, 없으면 빈 문자열로 내보냅니다.

  • withCredentials: true : 이 설정이 있으면, 쿠키 같은 민감한 정보도 함께 보내줍니다.

  • 외부에서 추가 설정을 넘기면 ...config로 병합해줍니다.

• axiosInstance.interceptors.request.use() : 요청 인터셉터로, 매 요청 전에 토큰이 있는지 체크하고, 있다면 Authorization 헤더에 붙여줍니다. 로그인 상태 변화에 따른 토큰 동기화가 확실해집니다.

• axiosInstance.interceptors.response.use() : 응답 인터셉터로, 응답 처리 중 에러가 401 Unauthorized면 토큰을 삭제하고, /login으로 보냅니다.

사용 방법

// category.api.ts
import { Category } from '../models/category.model';
import { httpClient } from './http';

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

// cart.api.ts
interface AddCartParams {
  bookId: number;
  quantity: number;
}

export const addCart = async (params: AddCartParams) => {
  const response = await httpClient.post(`/carts`, params);
  return response.data;
};

/categories 경로로 GET 요청을 보내는 예시입니다.

• httpClient는 설정한 axiosInstance를 불러옵니다.

• response.data는 Axios가 응답을 받을 때 자동으로 .data에 응답 본문을 담아주기 때문에 이를 리턴해줍니다.

/carts 경로로 POST 요청을 보내서 장바구니에 책을 추가합니다.

• params는 { bookId, quantity } 구조를 가지는 객체입니다.

  • 객체를 HTTP 요청의 body에 담아서 보냅니다.

---

백엔드 코드 연결

🤔 기존에 작성했던 백엔드 코드를 어떻게 불러와야 하지?

서버의 개념이 헷갈려 프로젝트 내부에 있거나 서버 코드를 내 컴퓨터로 가져와야 한다고 생각했지만, 굳이 그럴 필요 없이 주소(URL)만 알고 서버가 잘 구동되어 있다면 어디서든 사용할 수 있었습니다.

CORS(Cross-Origin Resource Sharing)

CORS는 다른 출처(origin)에 있는 서버에 브라우저가 요청할 때, 보안을 위해 막아두는 것(SOP : Same-Origin Policy)을 서버가 명시적으로 허용해서 통신을 가능하게 해주는 방식입니다.

• 출처(origin): 프로토콜(Protocol) + 호스트(Host) + 포트 번호(Port number)

출처: CORS(교차 출처 리소스 공유) / tosspayments

cors 라이브러리

현재 프론트와 백엔드의 포트 번호가 다르기 때문에 cors 라이브러리를 통해 CORS 설정을 해줍니다.

const cors = require('cors');
app.use(
  cors({
    origin: true, // 배포 시에는 도메인을 입력해주는 것이 좋음
    credentials: true,
  })
);

• origin: true : 요청이 온 도메인이 무엇이든 허용해줍니다.

• credentials: true : 요청에 쿠키나 인증 정보를 포함할 수 있도록 해주는 옵션입니다.

✨ 프론트에서도 axios나 fetch에 withCredentials: true를 넣어줘야 같이 동작합니다.

---

✏️ 회고

서버는 켜져있다면 어디서든 열린다는 걸 개념적으로만 이해하고 있다가 막상 한 폴더에서 코드만 적다보니 프로젝트 파일로 백엔드 코드까지 다 옮겨와 버릴 뻔 했다..😅 팀원들의 도움도 받고, 개념 정리를 하니 확실히 서버의 개념에 대해 확실히 정립한 것 같다.