Part 1. 프로젝트 init

1) 프로젝트 설명

UI: Instagram style

Packages & Tools

• Expo
• Yarn
• firebase
• react-navigation
• native-base

2) 프로젝트 생성

expo init
프로젝트 이름 입력

3) 패키지 다운로드

• react-navigation (https://reactnavigation.org/docs/getting-started/)

//react-navigation default
yarn add @react-navigation/native
expo install react-native-screens react-native-safe-area-context

//stack navigator
yarn add @react-navigation/stack
expo install react-native-gesture-handler

//bottom tab navigator
yarn add @react-navigation/bottom-tabs

• native-base (https://docs.nativebase.io/install-expo)

yarn add native-base

expo install react-native-svg

expo install react-native-safe-area-context

• firebase (https://docs.expo.dev/guides/using-firebase/)

//firebase
expo install firebase

4) 페이지 구성

• components
  : CardItem, InputItem, CommentItem, ProfileItem
• pages
  : SignInPage, SignUpPage, MainPage, SearchPage, AddPage, MyPage, DetailPage
• navigators
  : StackNavigator, BottomTabNavigator

//페이지별 기본 구조 샘플
import { View, Text } from "react-native";

const 페이지이름 = () => {
  return (
    <View>
      <Text>페이지이름</Text>
    </View>
  );
};

export default 페이지이름;