개발자의 공부 노트

리액트와 스프링 부트간 통신을 해야한다. 아래와 같이 아주 간단한 소스를 활용하여 테스트를 하면.. const [apiTest, setApiTest] = useState('') const btnOnClick = () => { api.get("/api/hello") .then((response) => setApiTest(response.data)); } return ( 서버에서 받은 데이터 : {apiTest} API 테스트 )@RestController@RequestMapping("/api")public class SampleController { @GetMapping("/hello") public String helloReact() { re..

프론트(리액트)와 백엔드(스프링부트) 통신을 위해 Axios를 사용하는데, 추후 토큰 요청 및 인터셉터 등 공통적으로 사용하기 위해 Axios를 전역으로 설정합니다.import axios from "axios";const api = axios.create({ // todo 추후 기술});// 요청 인터셉터axios.interceptors.request.use(function (config) { // todo 추후 기술 return config; }, function (error) { return Promise.reject(error); });// 응답 인터셉터axios.interceptors.response.use(function (response) { // todo 추후 ..

리액트에 대한 관심이 높아져서 vite를 사용하여 리액트 프로젝트를 생성하고, 스프링부트를 이용하여 프로젝트를 새로 시작하여 최대한 실무적인 관점에서 진행하려고 합니다. 리액트 프로젝트에서 사용하는 프로그램과 의존성은 아래와 같습니다. 프론트VSCodeNode.js (v22.14.0)TypeScriptViteMUI (CSS 라이브러리)Axios (백엔드와 통신하기 위해 사용) 백엔드- 추후 기술[리액트 프로젝트 생성 및 의존성 추가]>  리액트 프로젝트 생성시 필요한 프로그램들은 다른 블로그나 AI를 활용하면 금방 찾으실 수 있습니다. 바로 vite를 이용하여 프로젝트를 생성하고 의존성을 추가하도록 하겠습니다. 가. 프로젝트 생성npm create vite@latest터미널에서 위 명령어를 입력 합니다...