Spring + React + Typescript연동하기

(프로젝트 생성했다는 전제하에)

 

1. React 프로젝트 생성

npx create-react-app profile-frontend --template typescript

 

2. 필수 라이브러리 설치

cd profile-frontend
npm install axios react-router-dom

 

3. 프로젝트 기본 구조 설계

 profile-frontend/
├── public/
├── src/
│   ├── api/                         
│   │    └── memberProfileApi.ts	// API 호출 함수 모음
│   ├── components/                  
│   │    └── MemberProfileList.tsx	// 프로필 목록 불러오는 컴포넌트
│   ├── App.tsx                         // 메인 화면
│   └── index.tsx
├── package.json
└── tsconfig.json

 

 

📁 src/api/memberProfileApi.ts

import axios from 'axios';

export const fetchProfiles = (sort: string, page: number) => {
  return axios.get(`/api/member-profiles/members?sort=${sort}&page=${page}`);
};

Axios(액시오스)는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

axios로 Spring Boot 서버 (http://localhost:8080) 호출

 

📁 src/components/MemberProfileList.tsx

import React, { useEffect, useState } from 'react';
import { fetchProfiles } from '../api/memberProfileApi';

interface MemberProfile {
  id: number;
  name: string;
  viewCount: number;
  registeredAt: string;
}

const MemberProfileList = () => {
  const [profiles, setProfiles] = useState<MemberProfile[]>([]);

  useEffect(() => {
    fetchProfiles('name', 0)
      .then(res => {
        console.log('API 응답:', res.data);
        setProfiles(res.data.content);  // 여기 중요! content를 꺼내야함
      })
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {profiles.map(profile => (
        <div key={profile.id}>
          <h2>{profile.name}</h2>
          <p>조회수: {profile.viewCount}</p>
          <p>등록일: {profile.registeredAt}</p>
        </div>
      ))}
    </div>
  );
};

export default MemberProfileList;

 

 

package.json 파일에 "proxy" : "httpp://localhost:8080"  추가

(React 개발 서버가 /api로 오는 요청을 8080번 백엔드로 포워딩)

"dependencies" 다음이나 "scripts" 끝나고 추가

 

 

만약
 Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
발생하면  https://programmerjkr.tistory.com/43
위의 링크에 해결법 남겨 놓았다.