웹 개발/React3 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-router-dom 오류 react-router-dom의 버전이 여러개이고, 5.x.x 버전에서는 routes가 없어서 switch를 쓰거나, 6.x.x 버전에서는 routes를 쓰고, elementor={} 이런식으로 작성해야되는 등 버전마다 작성방법이 상이합니다. 문제는 각각의 버전에 따라서 제대로 코드를 작성하지 않거나, 잘못된 버전을 다운받아서 충돌이 생기면 코드를 제대로 작성해도 화면 출력이 안되는 오류가 발생.. Router를 여러개 쓰지 말라느니, Routes는 없다느니, Routes 대신 Router을 써야한다느니 여러 오류 메시지가 나타나는데, 오류 메시지에서 나오는 거 해결하느라 코드 고치면 그 다음은 오류 메시지는 안나지만 화면 출력이 안되더라고요.결국 패키지 다 지우고 다시 다운받았습니다.. 단, 다시 다.. 2024. 2. 22. 이전 1 다음
