프론트엔드3 Spring 서버에서 출력한 데이터 react에서 가져오기 이전 포스트에서 MySQL과 Spring Framework을 연동하여 데이터베이스에서 백엔드로 데이터를 가져와서 출력하는 활동을 진행하였습니다. 이번에는 이렇게 백엔드에서 출력한 데이터를 react 서버로 가져와서 이를 저장, 활용하는 코드입니다. 1) Proxy 패키지 다운cmd에서 react 패키지 폴더 안에 proxy middleware를 다운로드합니다. npm install http-proxy-middleware --save 2) setupProxy.js 생성리액트 프로젝트에서 src/main/fronted(react 프로젝트명)/src/ 폴더 안에 setupProxy.js 파일을 생성하여 아래의 코드를 작성합니다.const { createProxyMiddleware } = require('htt.. 2024. 3. 28. react-router-dom을 이용하여 페이지 주소 설정 & 변환하기 react-router-dom을 이용하여 제작한 프론트엔드 페이지에 주소를 부여하여 해당 주소로 이동하면 페이지로 변환되는 코드를 작성해보겠습니다. 먼저 App.js에서 불러올 페이지를 Router에서 지정합니다. 아래는 App.js의 코드입니다.import React from 'react';import { BrowserRouter, Routes, Route} from 'react-router-dom';import College from './page/College';import Home from "./page/Home";import Department from "./page/Department";import License from "./page/License";import Header from "./H.. 2024. 3. 28. react-native와 spring 연동하기 react로 프론트엔드를, spring으로 백엔드를 구성해서 웹사이트 프로젝트를 진행할건데, 이를 위한 환경 구축과 백엔드에서 프론트엔드로 데이터를 받아오는 과정을 진행해보겠습니다. 1. spring project 만들기Spring Tool Suite4에서 File->New->Spring Starter Project를 클릭하면 아래와 같은 화면이 나타납니다. 여기에 프로젝트명, 패키지명 등을 작성한 뒤 Next를 클릭하면, 아래 사진의 화면으로 넘어갑니다. 저는 나중에 MySQL이랑도 연동을 해야되서 SQL 관련 패키지도 같이 체크했어요. 그렇지 않을 분들은 Spring Boot DevTools, Spring Web 정도만 체크해도 됩니다. 그런 뒤에 Finish 버튼을 클릭하면 스프링 프로젝트가 생.. 2024. 2. 22. 이전 1 다음
