간단한 Spring boot API 와 React axios로 데이터 주고받기



spring boot 3.1.6 버전
java 17 버전을 사용했습니다

Node 20.9.0 버전
Next.js는 14.0.3 버전 사용했습니다

먼저 spring boot 폴더 구조입니다

//FirstService interface

package com.example.test_api.service;

import java.util.Map;

public interface firstService {
    Map<String,Object> getFirstData();
}

위 코드를 토대로

// FirstServiceImpl

package com.example.test_api.service.impl;

import com.example.test_api.service.firstService;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class firstServiceImpl implements firstService {
    @Override
    public Map<String, Object> getFirstData() {

        Map<String, Object> firstData = new HashMap<>();

        firstData.put("label1","check1");
        firstData.put("label2","check2");
        firstData.put("label3","check3");

        return firstData;
    }
}

간단한 서비스를 만들었습니다

// FirstService

package com.example.test_api.service;

import java.util.Map;

public interface FirstService {
    Map<String,Object> getFirstData();
}

http://localhost:8080/first 로 데이터를 보내고 React에선

app 하위 폴더에 actions를 만들어서

// getData.ts

import axios, {Method} from "axios";
import * as https from "https";

export const getData = async (endpoint ='') =>  {
    try {
        const response = await axios.get('http://localhost:8080/first', {
            httpsAgent: new https.Agent({
                rejectUnauthorized: false
            })
        });

        const receivedData = response.data;

        Object.keys(receivedData).forEach((key) => {
            console.log(`${key}: ${receivedData[key]}`);
        });
    }catch (error){
        console.error('Error : ',error)
    }

}

데이터를 정상적으로 받아와 로그를 찍습니다