섹션 2. 서버 API와 연동하기
1강. axios로 서버에 요청 보내기
1) back-end 서버 켜기
back-end와 연결함
cd C:\Users\fortr\food-delivery-app-master\food-delivery-app-master\backback-end 서버가 있는 폴더로 이동
npm i필요한 패키지 설치
npm start
이러면 서버에 연결된 것
2) axios 설치
npm i axiosaxios 설치 후에는 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) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리,
섹션 13. 함수지향 - 유효범위 (시즌2 시작) 1강. 전역변수와 지역변수 JavaScript : 함수형 언어, 함수가 매우 중요하다. 유효범위(Scope) : 변수의 수명 1) 지역(local) 변수와 전역(global) 변수 지역변수는
coder-chobo.tistory.com
그러면 코드는 다음과 같이 된다.
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 : 요청 실패
