Inflearn Community Q&A

안녕하세요. 제로초님!

현재 react native(cli)와 spring boot로 프로젝트를 진행하고 있습니다. (기본적인 환경설정은 제로초님 RN 강의를 보고 세팅했습니다.) 프런트 역할을 맡은 제가 axios를 사용해서 spring boot와 연결하려고 하고있습니다. 여기서 문제가 생겼는데요!

아래 코드처럼 백에서 간단하게 값을 받아와서 return 값을 받아오는 것만 확인하고자 아래 코드를 사용해봤습니다.

...
  const [hello, setHello] = useState('');
...
//API_URL=http://10.0.2.2:3105 로 설정해서 .env 파일에 넣어놨습니다.
  useEffect(() => {
    axios
      .get(`${Config.API_URL}/api/hello`)
      .then(response => setHello(response.data))
      .catch(error => console.log(error));
  }, []);
....

<Text>백엔드에서 가져온 데이터입니다 :{hello}</Text>

이 때 [AxiosError: Network Error] 에러가 생겨서 에러확인부터 해결방법까지 아래 블로그에 작성해뒀습니다. 여기서 궁금한 부분은 이런 에러가 왜 생기는지 의문입니다.. 제로초님 강의에서 초반에 다뤘던 aixos를 참고하고 작성해본 거라 왜 안되는지 모르겠더라구요. (제로초님 영상보고 만들었을 때는 잘돌아갔던 기억이 있습니다.)

https://velog.io/@foreveryejin/react-native-axios-get%EC%9D%B8%EC%88%98-%EC%97%90%EB%9F%AC

그래서 일단 아래 코드로 백에서 데이터를 받아와보자 했습니다!

...
  const [hello, setHello] = useState('');
...
  useEffect(() => {
    axios
      .get(`http://10.0.2.2:3105/api/hello`)
      .then(response => setHello(response.data))
      .catch(error => console.log(error));
  }, []);
....

<Text>백엔드에서 가져온 데이터입니다 :{hello}</Text>

코드 변경 후에는[AxiosError: Network Error] 해당 에러는 콘솔에서 생기지 않았고 리액트네이티브 디버거에도 에러는 따로 생기지 않았습니다. 에러는 생기지 않는데 백에서 return 해주는 값은 나오지 않더라구요. 백에서도 기본적인것만 만들어놔서 안되는 이유를 모르겠다고 하네요.

이렇게 백이랑 연결할 때 또 확인해야하는 부분이 있을까요?

백을 실행해 놓고 axios코드만 작성한다고 프런트랑 백이랑 연결이 되는 건지도 헷갈립니다..!

포트 번호를 확인해봐야할까요?

처음으로 프런트와 백이 있는 프로젝트를 시작하느라 무엇을 모르는지를 몰라서 어떤 걸 질문해야할지 막막했습니다..어떤 공부를 해야할지도 모르겠습니다ㅜㅜ

감사합니다..!