[toyproject] 웹 애플리케이션 만들기4 - 리액트랑 스프링부트 연결하기

리액트 & 스프링부트 연결하기

React package.json

 "proxy": "http://localhost:8080", // 추가하기

테스트 코드 작성

• Backend

@RestController
public class TestController {

    @GetMapping("/test")
    public String test(){
        return "<h3>test data 전달 완료</h3>";
    }
}

• Frontend

const MainPage = () => {

    useEffect(() => {
        axios.get("/test")
        .then(payload => setTest(payload.data))
        .catch(e => toast.error("서버와 통신이 원활하지 않습니다."));
    }, []);

    const [test, setTest] = useState<any>('');
    return <div className="main_contents">
        <img className="move" src="/image/free-icon-mother-earth-day-4287570.png" alt="main_image"/>
        <div className="main-text">
        안녕하세요, 오늘은 2023년 6월 19일<br/>
        총 xx명의 지구방위대 분들이<br/>
        대략 xxkg만큼의 쓰레기로부터<br/>
        지구를 지켰어요
        <div style={{backgroundColor: 'red'}}>
            {test}
        </div>
        
        </div>
     
    </div>
}

export default MainPage;
}

export default MainPage;

데이터가 잘 들어오는 것을 확인할 수 있다.

그리고 간단한 서버 배포까지가 목표기 때문에 빌드와 관련된 부분까지 깔끔하게 정리된 블로그를 찾아 뒀다.
나중에 내가 기억하기 위해.. 슬쩍 적어둔다.

출처: https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85