강의 - 160강 부터 시작

1. firebase 설정

-> 프로젝트 생성 (구글 애널리틱스 옵션 끄기)
-> 빌드 카테고리에서 - 리얼타임 데이터베이스 클릭 (생성)
-> 리얼타임 데이터베이스 (싱가포르) 선택
-> 테스트 모드에서 시작 선택 (그래야 인증 없이 읽기/쓰기 가능)
->

나중에 우리가 요청을 보낼 URL 이다.

(...여기까지가 161강 강의내용)

2. Axios 설치 및 설계

Axios 공식문서

• Axios 는 fetch 대신 사용 가능합니다.

npm install axios

(...여기까지가 162강 강의내용)

3. firebase DB 에 POST request 전송해보기

위 이미지와 같이 firebase 의 URL 뒤에 + /expenses.json 를 추가한다. 뒤에 추가한 /expenses.json 는 특정 노드를 의미한다.

위 주소로 요청을 전송하면 /expenses.json 노드가 생성된다.

내가 생성한 노드 - POST request

(...여기까지가 163강 강의내용)

4. firebase DB GET request 요청하기(페칭)

• GET request 는 async await 를 사용해야 합니다.
  

• 주의할 점 !!! - 위와 같이 정의한 api 함수를 컴포넌트 내부에서 사용할 때 도 마찬가지로 async await 를 (다시!!!) 사용해야 합니다. - Why? -> useEffect 함수는 프로미스를 반환하면 안되는게 그 이유라고 한다. 솔직히 이해 못했다. 그냥 시키는대로 하자. ㅋㅋㅋ
  

(...여기까지가 164강 강의내용)

5. 페칭받아온 데이터를 사용해보기

POST 요청으로 데이터를 생성 했을 때 내 앱 화면에 추가한 데이터가 곧바로 나타나지 않는 문제 해결을 위해서 콘텍스트를 사용함. 즉, POST 요청 과 동시에 콘텍스트 데이터 추가도 요청해버리는 것임. 그럼 다시 서버에서 데이터를 새로고침 해 불러오지 않아도 내가 추가한 데이터를 로컬의 콘텍스트에서 불러오는 것이 되어버림.

(...여기까지가 165강 강의내용

6. POST 요청으로 부터 받은 응답 데이터 사용해보기

(...여기까지가 166강 강의내용)

7. POST 요청으로부터 받은 응답 데이터 사용하기

(...여기까지가 167강 강의내용)

8. 로딩중 스피너 추가

LoadingOverlay.js 파일 생성

import { View, ActivityIndicator, StyleSheet } from 'react-native';

import { GlobalStyles } from '../../constants/styles';

function LoadingOverlay() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="white" />
    </View>
  );
}

export default LoadingOverlay;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    backgroundColor: GlobalStyles.colors.primary700,
  },
});

위 코드 추가

위 컴포넌트를 사용할 컴포넌트 내부에서 아래 코드 추가

import LoadingOverlay from '../components/UI/LoadingOverlay';


function RecentExpenses() {
  const [ isFetching, setIsFetching ] = useState(true);
  const expensesCtx = useContext(ExpensesContext);

  useEffect(() => {
    async function getExpenses() {
      setIsFetching(true);
      const expenses = await fetchExpenses();
      setIsFetching(false);
      // console.log(expenses);
      expensesCtx.setExpense(expenses);
      // console.log(expensesCtx.expenses);
    }
    getExpenses();
  }, []);

  if (isFetching) {
    return <LoadingOverlay />
  }

    
  // ... 이하 생략

(...여기까지가 168강 강의내용)