spring - react , 백엔드-프론트엔드 연동하기 연습

본격적으로 프로젝트 개발에 들어가기에 앞서, 백엔드 - 프론트엔드를 연동하여 데이터를 주고받는 방법을 먼저 알아보았다.

 

우선 백엔드 서버는 8080, 프론트엔드 서버는 3000으로, 서로 다른 포트끼리 데이터를 전달할 것이므로 가만히 두면 CORS 에러가 발생한다.

서치해본 결과, 이를 방지하기 위해서는 프론트엔드의 package.json에 프록시를 등록하면 된다.

 

- package.json

{
  "name": "frombooktobook-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "proxy": "http://localhost:8080",
  /* 새로 추가 */
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

 

여기서 이제 추가한 코드가 정확히 어떤 역할을 할까 싶어서 더 구글링해보았다.

 

리액트에서 서버끼리 데이터를 주고받기 위해서는 fetch 를 사용한다.

 

fecth('http://localhost:8080/home')

 

위의 코드로 리액트 서버는 http://localhost:8080/home 으로 접속해 데이터를 가져올 것이다.

 

그런데 만약 다음과 같이 작성한다면?

 

fetch('/home')

 

유효하지 않은 url이다. 리액트는 에러를 발생시키기 전에 먼저 proxy를 확인한다.

그리고 등록된 proxy가 있다면 해당 주소 기준으로 상대경로를 통해 서버에 접속한다.

즉, proxy로 'http://localhost:8080'이 등록되어 있다면 리액트는 위의 코드를 읽고 ' http://localhost:8080/home'로 접속해 데이터를 가져온다.

 

이처럼 package.json에 proxy를 등록함으로써 COR에러를 해결할뿐만 아니라 상대경로만으로 백엔드 서버에 접속할 수 있도록 해준다.

 

 

---

다음은 백엔드-프론트엔드 연동을 연습한 코드이다.

 

- (BE) PostController.java

@GetMappgin('/posts')
public String text() {
	return "This is Backend - posts";
}

 

- (FE) App.js

import { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [msg, setMsg] = useState("nothing received");
  
/*
  useEffect(()=>{
    fetch("/posts")
    .then(response=>{
      //console.log(response.text());
      return response.text();
    }).then(function(data) {
      setMsg(data);
    });
  },[]);
*/

  useEffect(()=>{
    axios.get('/posts')
    .then(response=>response.data)
    .then(function(data) {
      setMsg(data);
    })
    .catch(err=> {console.log(err)})

},[]);

  return (
    <div className="App">
      <h1>{msg}</h1>
  
    </div>
  );
}

export default App;

 

중간중간 오류가 정말 많이 났다 🙂

 

1. json이 아닌 String을 리턴해놓음 -> response.json()으로 프론트엔드에서 받아오니 오류 발생 -> response.text()로 받아오니 해결

2. fetch로 받아온 데이터가 어떻게 생겼는지 보고싶어서 console.log로 확인을 했었는데,

분명 console에는 모든게 정상적으로 찍혀 나오는데 자꾸 오류가 남 -> 구글링 결과, then에 함수 내에서 response를 두 번 사용하지 말라는 StackOverFlow의 답글을 보고, 콘솔로그를 주석처리 해봄 -> 해결

 

어쨌거나 저쨌거나 성공적으로 This is Backend - posts 가 찍혀나오는 것을 확인하였다.

.

.

완료 !