-
< react > backEnd 와 연결하기react 2023. 10. 13. 17:25
이번에는 react 서버 와 spring boot 를 서버를 연동하는 방법을 공부하겠습니다.
리액트 화면이 랜더링시에 자동으로 호출되는 상태 함수가 있다.
이 상태 함수는 상태값과 mapping 되는데
화면에 랜더링 된 후 직후의 상태를 didmount 라고 한다
이 상태에 따라서 특정 작업([ex]Open Api호출, 파일 접근, 네트웍 접근 등) 을 정의해서 수행할 수 있다
여기서 mount 라는 단어는 화면을 구성하는 DOM이 완료되었는지 여부를 뜻한다.
unmount는 위와 반대이다.
화면이 닫히거나, 화면이 다른 화면에 의해 가려질 때 등의 상태를 말한다.
이 역시 unmount() 라는 함수를 이용해서 재정의 할 수 있다.
일반적으로는 초기화 했던 작업을 모두 해제하는 작업을 정의한다.
서블릿 할 때 init 이라는 것을 기억하면, 그것과 같다라고 생각하면 된다.
dismount 호출
단 reader(0 에서 직접 호출하지 않도록 문서에 정의되어있다.
그러니 따로 함수를 구성해서 사용해야한다.
새로운 component 라는 폴더를 생성해 모듈을 하나 만들어줍니다.export function call(api, method, request){ let options = { header:new Headers({ "Content-Type":"application:json" }), url:API_BASE_URL + api, method:method, }; if(request){ //Get 방식인 경우엔 bobd(클라이언트의 전송 데이터를 json 형식으로 변경) options.body = JSON.stringify(request); } return fetch(options.url,options) .then((response)=>{ response.json().then((json)=>{ if(!response.ok){ //서버 응답이 error 인 경우엔 reject 호출 후 서버 정보 리턴 return Promise.reject(json); } return json; } ) }) }
config 폴더를 만들어서 api-config.js 를 만든다.
//요청할 서버의 설정 정보를 정의하는 설정 파일 let backEndHost; const hostname = window&&window.location&&window.location.hostname; if(hostname ==="localhost"){ backEndHost ="http://localhost"; } export const API_BASE_URL =`${backEndHost}`;
이렇게 한 후
app.js 를 이렇게 수정한다.import "./App.css"; import {Container, List, Paper} from "@mui/material"; import Todo from "./Todo"; import { useEffect, useState } from "react"; import { orange } from "@mui/material/colors"; import AddTodo from "./AddTodo"; import { call } from "./components/ApiService"; function componentDidMount(){ } function App() { const[items, setItem] = useState([]); // 화면 랜더링이 모두 끝난 후에 바로 호출되는 내장 함수. // 여기서 backEnd 의 todo 를 호출해보도록 하자 useEffect(()=>{ call("/todo","GET",null) .then((response)=>console.log(response)); }); // 할 일 항목을 추가하는 이벤트 정의한다. const addItem = (item) => { item.id = "id-" + items.length; item.done = false; //{ID:ID-0,done=false,title:""} //item 추가 반드시 setter 로 해야한다. 원본 불변도 setItem([...items, item]); console.log('items : ' + items) } //항목 수정을 위한 이벤트 정의 const editItem=()=>{ setItem([...items]); } const deleteItem = (item) =>{ const newItems = items.filter(e=>e.id!==item.id); setItem([...newItems]); } //함수형인 경우엔 useEffect 를 사용해야한다. // componentDidMount 와 같은 기능인데, 얘는 클래스형태로 정의 시에 사용해야한다. //메인 App 에 Todo 를 저장하는 작업 먼저 수행 let todoItems = items.length > 0 && <Paper style={{margin: "16px", background:"orange"}}> <List> {/* 만약 이미 존재하는 Todo 리스트가 있다면 props 를 주고 생성한다. */} {items.map((item) => ( <Todo item={item} key={item.id} editItem={editItem} deleteItem={deleteItem} /> ))} </List> </Paper> return( <div className="App"> <Container> <AddTodo addItem={addItem}/> <div className="TodoList"> {todoItems} </div> </Container> </div> ); } export default App;
이렇게 하고 서버 리스타트를 하면이런 예외가 뜬다 예외가 뜨는 이유는 백에서 cors 인증 처리를 안 했기 때문이다.
이제 백으로 넘어가 서버에서 cors 를 해제 하는 방법을 알아보자cors( cross origin resource sharing)
첫 요청을 한 url 과 최종 요청을 한 url 이 서로 틀릴 때
기본적으로 웹 서버는 비정상적인 요청이라 판단해서 응답을 하지 않는 현상이다.
하고 백 서버로 넘어가 기존 루트에 config 패키지를 생성 후 WebMvcConfig 클래스를 생성한다package com.example.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /* * 부트의 서버에서 CORS 를 허용하는 방식은 간단하다. * 이 클래스를 bean으로 등록해서 서버가 스타트 됨과 동시에 메모리에 올리면 되고, * 설정하는 방식은 WebMvcConfigurer( interface) 를 상속해서 CORS() 메서드를 오바리읃 하면 된다 * 이때 이 메서드에는 설정 정보를 등록하는 파라미터가 같이 오는데, 그 파라미터는 객체의 메서드(주로 setter) 를 이용해서 설정하면 끝이다. * */ //config 객체를 빈으로 등록하는 Annotation @Configuration public class WebMvcConfig implements WebMvcConfigurer{ @Override public void addCorsMappings(CorsRegistry registry) { // registry 객체 메서드를 이용해서 등록만 하면 끝 registry.addMapping("/**")// 모든 패스 .allowedOrigins("http://localhost:3001") .allowedMethods("GET","POST","PUT","DELETE","PATCH","OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }
이렇게 후 리엑트로 넘어가 서버 리스타트 후 확인하면
이렇게 405 ERROR 만 뜨는 걸 확인 할 수 있다.
( 참고로 405는 뜨는 건 크게 신경 안쓰셔도 돼고 CORS 예외만 사라진 걸 확인 하시면 성공하신겁니다.)
app.js 에 해당 코드 부분에 경로를 서버와 맞춘다.useEffect(()=>{ call("/todo/test","GET",null) .then((response)=>console.log(response)); });
수정 후 재실행 하면
이렇게 모든 예외가 사라지고 정상 작동하는 걸 확인 할 수 있다.
'react' 카테고리의 다른 글
<React> 명령어 (2) 2024.03.05 <React> npx create-react-app 에러 (0) 2024.03.05 < react > 컴포넌트를 이용한 간단한 react 응용 (0) 2023.10.11 < react > 기초 다지기 (2) 2023.10.11