6. Spring boot + React Native 연결하기

우선 프론트부터

나는 axios로 통신할 거라서 이거부터 설치.

npm install axios

 

우선 간단하게 백엔드에서 데이터 가져오는 테스트부터 해봐야겠다.

화면이 로딩되면서 데이터 가져오고 싶어서

import axios from "axios";

function Login({navigation}) {

    const [data, setData] = useState('');

    useEffect(() => { // 컴포넌트가 마운트 될 때 실행
        axios.get("http://localhost:8080/login/test")
            .then((res) => {
                console.log("data : ", res.data)
                setData(res.data)
            })
            .catch((err) => console.log(err))
    }, []);
    
    return (
    	<View style={styles.container}>
        	<ul>
            	{data}
            </ul>
        </View>
    );
};

 

 

백엔드 

controller, dto, model, repository, service 폴더와 파일을 만들어준다

이때, repository는 인터페이스, 나머지는 클래스

 

우선은 백엔드와 프론트엔드 연결 확인만 해줄 거라 controller만 사용

MemberController

@RestController
public class MemberController {

    @GetMapping("/login/test")
    public List<String> loginTest(){
        return Arrays.asList("Hello", "world!");
    }
}

 

 

이렇게 작성해 주고 백엔드와 프론트엔드를 실행하면!

.......... 오류가 뜬다......!

흠... 잘 작성한 것 같은데... CORS error... 가 계속 난다... 

CORS 에러는 프론트엔드와 백엔드로 나누어 개발할 경우 흔히 발생하며, 최신 브라우저의 대부분은 헤더와 CORS 정책을 사용하고 있기 때문에 발생한다고 한다. 해결은 프론트엔드, 백엔드에서 모두 할 수 있지만 보통은 서버 쪽에서 설정하는 편인 것 같다.

CORS(Cross-Origin Resource Sharing = 교차 출처 리소스 공유)는 다른 출처(Origin) 간의 자원을 공유하는 정책.
CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

Spring boot에서 해결 방법
- CorsFilter를 만드는 방법
- @CrossOrigin 어노테이션을 이용하는 방법
- WebMvcConfigurer를 통해서 설정하는 방법

프론트엔드에서 해결 방법
- Proxy 서버 이용

보다 자세한 설명은 출처에서...

 

나는 WebMvcConfigurer를 이용하여 오류를 해결하였다.

config 폴더와 WebMvcConfig 클래스 파일을 만들어준다. 

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
        	.allowedHeaders("*")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("*");
    }
}

 

이 부분을 추가했더니 오류 없이 데이터가 잘 출력된다!!