리액트 앱과 백엔드 서버 연동 테스트 2

1. 백엔드 서버 만들기

//10000번 포트를 사용하는 백엔드 서버 (스프링부트, http://localhost:10000)

package com.test.reactspringboottest.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.LinkedHashMap;

@RestController
@RequestMapping(value = "/")
public class ReactController {

    @GetMapping("/getFromReactApp")
    public HashMap<String, String> getFromReact(){
        LinkedHashMap<String, String> respMap = new LinkedHashMap<>();
        respMap.put("key1","value1");
        respMap.put("key2","value2");
        respMap.put("key3","value3");

        return respMap;
    }
}

 

#application.yml

server:
  port: 10000

 

2. 리액트 프론트 엔드 서버에서 GET요청 발송 (localhost:3000 => GET => localhost:10000)

 

2.1. package.json 수정

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  //여기 추가
  "proxy":"http://127.0.0.1:10000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

 

2.2. index.js 작성

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//  <React.StrictMode>
//    <App />
//  </React.StrictMode>

<div>
        <input type="button" value="get data" onClick={
                function(){
                	//localhost:10000/getFromReactApp
                        fetch('/getFromReactApp') 
                        .then(function(result){return result.json})
                        .then(function(json){console.log(json);})
                }.bind(this)
        }>
        </input>
</div>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

파일 작성 후

프론트 서버 (재)기동

$ npm run start

 

2.3. 요청발송

[get data] 버튼 눌러서 GET요청을 발송했다.

성공.

 

 

 

 

3. 실패 사례

위처럼 메소드 명을 정해주지 않고 fetch('/')로 했을 때는 올바른 응답을 받지 못하였다.

 

3.1. 백엔드 서버 만들기

//10000번 포트를 사용하는 백엔드 서버 (스프링부트, http://localhost:10000)

package com.test.reactspringboottest.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.LinkedHashMap;

@RestController
@RequestMapping(value = "/")
public class ReactController {

    @GetMapping("") // 루트 경로 그대로 사용
    public HashMap<String, String> getFromReact(){
        LinkedHashMap<String, String> respMap = new LinkedHashMap<>();
        respMap.put("key1","value1");
        respMap.put("key2","value2");
        respMap.put("key3","value3");

        return respMap;
    }
}

 

#application.yml

server:
  port: 10000

 

3.2. index.js 수정

fetch('/')를 사용

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//  <React.StrictMode>
//    <App />
//  </React.StrictMode>

<div>
        <input type="button" value="get data" onClick={
                function(){
                        fetch('/')
                        .then(function(result){return result.json})
                        .then(function(json){console.log(json);})
                }.bind(this)
        }>
        </input>
</div>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

3.3. 요청발송

[get data] 버튼 눌러서 GET요청을 발송했다.

실패.