0052. 실전 FE 개발 배우기9 - 서버 API 연동, axios로 서버에 요청, back-end 서버 켜기, 로딩창, react-native-config

섹션 2. 서버 API와 연동하기

1강. axios로 서버에 요청 보내기

1) back-end 서버 켜기

back-end와 연결함

cd C:\Users\fortr\food-delivery-app-master\food-delivery-app-master\back

back-end 서버가 있는 폴더로 이동

 

npm i

필요한 패키지 설치

 

npm start

 

이러면 서버에 연결된 것

 

 

2) axios 설치

npm i axios

axios 설치 후에는 npm package기 때문에 run-android를 다시 해야 한다.

 

서버 요청은 요즘 axios는 좀 덜 쓰는 추세이다.

(ky나 got으로 넘어가는 추세이나 react-native와 호환 여부가 불투명해서 axios가 안전하다.)

 

장점 : axios 하나만 써도 클라이언트, 서버 잘된다.

단점 : 그래서 패키지 덩치가 너무 커졌다. 그럼에 비해서 서버와 클라이언트 모두 커버하기 어렵다.

 

try {

} catch (error) {

} finally {

}

try, catch에 finally가 추가된 것이 기본적인 골격이다.

finally : try를 하든, catch를 하든 최종적으로 실행되는 것

 

• useCallback은 async 사용 가능
• useEffect는 async 사용 불가

const onSubmit = useCallback(async () => {});

async는 다음과 같이 사용

 

3) 데이터 보내기

원래는 백엔드 개발자가 어떤 데이터를 보내면 되는지를 알려준다.

ex. /user라는 주소로 POST 요청을 해라!

 

일정 시간이 걸려서 비동기적 처리로 넘어가기 때문에 await을 붙어야 한다.

<비동기적 처리, 동기적 처리>

https://coder-chobo.tistory.com/33

0032. JavaScript 공부하기7 - (시즌2) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리,

 

그러면 코드는 다음과 같이 된다.

await axios.post( url: '/user', data: { email, name, password })

 

http 메서드 : get, put, patch, post, delete, head, options 등 서버 개발자와의 약속 List

https://github.com/ZeroCho/food-delivery-app/blob/master/API.md

 

const response = await axios.post(`${Config.API_URL}/user`, { email, name, password });

response가 필요함

response가 언제나 성공하는 것은 아니기 때문에 성공하면 data를, 실패하면 알림을 보내줌

 

    console.log(email, name, password);
    try {
      setLoading(true);
      const response = await axios.post(`${Config.API_URL}/user`, {
        email,
        name,
        password,
      });
      console.log(response.data);
      Alert.alert('알림', '회원가입 되었습니다.');
      navigation.navigate('SignIn');
    } catch (error) {
      const errorResponse = (error as AxiosError).response;
      console.error(errorResponse);
      if (errorResponse) {
        Alert.alert('알림', errorResponse.data.message);
      }
    } finally {
      setLoading(false);
    }
  }, [loading, navigation, email, name, password]);

전체 코드

 

 

2강. 로딩창 만들기(ActivityIndicator)

서버에 요청을 보낼 때는 로딩창이 필요하다.

  const [loading, setLoading] = useState(false);

전체 코드에 더해서 setLoading이 필요하다.

 

error : unknown

네트워크 에러인지, 문법 에러인지 뭔지 모른다.

const errorResponse = (error as AxiosError).response;

단순히 error.response라고 하면 error의 타입이 뭔지 모르기 때문에 AxiosError로 지정한다.

매번 (error as AxiosError). response라고 하면 지저분하기 때문에 변수로 지정한다.

 

import axios, {AxiosError} from 'axios';

AxiosError는 앞에서 불러오기

 

 

로딩창이 중요한 이유

disabled={!canGoNext || loading}

disabled에 loading을 넣어주는 것이 중요하다.

로딩 중에 광클하면 여러 번 데이터가 넘어가기 때문에 로딩 중에는 클릭이 되지 않게 막는 것이다.

 

  const onSubmit = useCallback(async () => {
    if (loading) {
      return;
    }
    if (!email || !email.trim()) {
      return Alert.alert('알림', '이메일을 입력해주세요.');
    }

그래서 윗부분에 loading을 생각해서 넣어야 요청 가지 않게 막아주는 디테일을 넣는다.

 

      }
      Alert.alert('알림', '회원가입 되었습니다.');
  }, [loading, email, name, password]);

여기서도 로딩을 넣는다.

 

회원가입을 눌렀을 때 표시를 해주기 위해서 뱅글뱅글 도는 Indicator를 넣어준다.

아래의 도는 부분이 indicator다.

disabled={!canGoNext || loading}
onPress={onSubmit}>
{loading ? (
	<ActivityIndicator color="white" />
) : (
	<Text style={styles.loginButtonText}>회원가입</Text>
)}

로딩일 때는 ActivityIndicator가 뜨게 만드는 것이다.

 

 

3강. 서버주소 react-native-config로 관리하기

 

로컬 주소 - localhost:3105 (안되면 10.0.2.2:3105 - 에뮬레이터의 내부 주소임)

IP주소 - 127.0.0.1:3105

wifi - wifi주소:3105 (네이버에 '내 와이파이' 검색)

 

환경 변수(Environment Variable)

상황에 따라 분기처리 되어야 하는 값들

'localhost:3105/user'는 개발자모드일 때와, 실제 배포할 때의 값이 달라지는 것이다.

 

개발모드 : __DEV__

이 값은 True 이므로 아래와 같이 처리할 수도 있다.

`${__DEV__ ? 'localhost:3105' : '실서버주소'}/user`

 

개발모드냐 배포모드냐에 따라서 달라지는 값들이 많을 것이다.

이를 중앙에서 관리하기 위해서 다음과 같이 사용한다.

npm i react-native-config

자꾸 여러 군데에서 분기처리하면 지저분한걸 한방에 처리하기 위함이다.

루트 디렉터리에. env라는 파일을 만들어서 관리한다.

 

 

const response = await axios.post(`${Config.API_URL}/user`

그러면 이렇게 불러오면 된다.

 

import Config from 'react-native-config';

상단에 import도 필요

 

 

4강. react-native-config 문제 해결하기

android:usesCleartextTraffic="true"

이걸 넣으면 android에서 http도 허용한다.

하지만 자주 쓰지 않는 것이 좋다. https가 보안이 더 좋기 때문.

 

android studio > File > Open > 해당 프로젝트의 android 폴더

buildconfig가 제대로 되었는지를 확인하기 위함

 

로딩이 매우 늦다.

프로젝트의 소스코드를 다 끌고 와서 편집하기 쉽게 만들어서 편집은 매우 쉽지만 메모리를 많이 차지한다.

 

 

로딩되는 동안 먼저 설정할 것 설정하기

 

-keep class com.fooddeliveryapp.BuildConfig { *; }

 

 

apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

 

 

resValue "string", "build_config_package", "com.fooddeliveryapp"

defaultConfig에 쓰면 됨

 

 

java(generated)>com.fooddeliveryapp> BuildConfig

여기 안에 API URL이 적혀있어야 하는데 없다.

 

그래서 config로 못 불러오는 것

terminal에서 metro를 다시 실행(run-android)해준다.

그러면 android studio에서도 추가가 되어 있을 것이다.

 

 

진짜 생겼다!

필자도 생길 줄 몰랐다^_^;

 

회원가입을 해봤더니 서버로 데이터가 들어왔다!

 

200 : 요청이 성공적으로 갔다!

1296.397 ms : 소요시간

52 : 용량(byte)

 

      if (errorResponse) {
        Alert.alert('알림', errorResponse.data.message);
      }

저 에러메시지는 위의 코드에서 나오는 것임

401 : 요청 실패