리액트-네이티브 개발환경 셋팅 우분투 18.04

이거 먼저 보고 시작

https://reactnative.dev/docs/environment-setup

npx jetify

라이브러리 오류뜨면

Setting up the development environment · React Native

 

1. node.js 가상환경 만들기

 

pypi.org/project/nodeenv/

nodeenv

우분투에 기본적으로 파이썬이 설치되어있다. 

 

설치된 파이썬의 라이브러리를 이용하면 Node.js의 가상 환경을 쉽게 만들 수 있다.

 

먼저 우분투에 설치된 파이썬을 이용하여  virtualenv를 설치하자

 

쉘을 열고 설치하자 pip install virtualenv

 

이제 파이썬 가상환경을 만든다 

 

원하는 폴더에서 만들자 virtualenv [env name] --python=python3.9

 

가상환경폴더로 들어가서 

 

source bin/activate 바이너리 파일을 실행해준다.

 

고러면

 

파이썬 가상환경이 실행된다.

 

가상환경 내에서 nodeenv를 설치한다.

 

pip install nodeenv 

 

nodeenv 파이썬 패키지를 이용하여 node 가상환경을 만든다. 

 

nodeenv test --node=14.15.3

 

test 폴더로 들어가 

 

source bin/activate를 실행하다.

 

그리고 yarn을 설치한다.

 

npm install --global yarn

 

NOTE:노드 가상환경에서 expo CLI나 react native cli를 -g(글로벌)로 설치하여도 가상환경의 bin 폴더에 설치된다.

결국 CLI를 버전마다 독립적으로 사용할수 있다.

 

2. openJDK 가상환경 폴더에 설치 및 환경변수 설정

 

openJDK를 웹에서 설치하자. OpenJDK 

 

파일이름은 ~.tar.gz 이다.

 

원하는 폴더에서 (가상환경 안에 만들면 좋다)쉘을 열고 tar -xvf ~.tar.gz를 사용하자

 

그러면 압축이 풀린다.

 

설치후 환경변수를 설정해야 한다. 

 

vi ~/.bashrc에 

 

export JAVA_HOME=/너가/압축한/폴더/루트(제일처음)

 

를 추가하고 저장한다.(ESC-> : -> wq -> ENTER )

 

3. 안드로이드스튜디오 설치

 

안드로이드스튜디오를 설치하자 Download and install Android Studio

 

~tar.gz파일을 받을 수 있다.

 

원하는 폴더(가상환경 안에 만들면 좋다)에서 tar -xvf ~.tar.gz을 사용하자.

 

 

가상환경 안에 새로운 폴더를 만들어야 한다. 

 

안드로이드스튜지오는 SDK(개발자 도구)를 특정 폴더에 저장한다.

 

기본적으로는 root가 관리하는 폴더에 저장되어이ㅉ사.

 

가상환경으로 이동시키자.

 

SDK폴더 위치는 

 

처음 열린 UI에서 아래쪽 구석에 있는 톱니바퀴를 누루고 SDK로 들어가면 된다.

 

Appearance & Behavior -> System Settings -> Android SDK

 

여기서 설정된 경로를 /너의가상환경/testSDK로 설정하자. 

 

그리고 아래의 것을 .bashrc에 추가하자.

 

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

마지막으로 필요한 SDK와 안드로이드 버전을 아래의 문서에서 확인하여 설치하자.

 

2. Install the Android SDK 를 참고하면 된다.

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

npm install --global yarn

5. qemu-kvm 설치 후 유저사용 허가 하기

https://blog.naver.com/alice_k106/220218878967

3. [Cloud Computing] 전가상화와 반가상화

http://blog.naver.com/PostView.nhn?blogId=alice_k106&logNo=221179347223&parentCategoryNo=7&categoryNo=&viewDate=&isShowPopularPosts=true&from=search 

121. [Qemu + KVM] Qemu와 KVM의 개념 - 에뮬레이션과 가상화

위의 글을 대략 읽고 시작해야 한다. 그리고 아래와 같이 해보자. 귀찮.............................

안드로이드스튜니오 리눅스 파일이 에뮬레이터를 코딩을 하기위해서 리눅스의 오픈 소스인 qemu-kvm을 사용하여 코딩을 한것같다.그래서 아래와 같이 permission을 허용해야 한다.

sudo apt update

sudo apt install qemu-kvm

 

To check the ownership of /dev/kvm usels -al /dev/kvm

The user was root, the group kvm. To check which users are in the kvm group, use

grep kvm /etc/group

This returned

kvm:x:some_number:

on my system: as there is nothing rightwards of the final :, there are no users in the kvm group.

To add your user to the kvm group, you could use

sudo adduser $USER kvm

which adds the user to the group, and check once again with grep kvm /etc/group.

 

6. 에뮬레이터 추가

 

안드로이드스튜디오 AVD에 기기를 추가하자. 

 

7. 시작

 startㅇㅁㅇㅁ

npx react-native init AwesomeProject

yarn react-native start

터미널을 새로열고 시작.

sudo chown kms /dev/kvm && yarn react-native run-android

 

 

8. 결제

https://github.com/iamport/iamport-react-native

iamport/iamport-react-native

react-native-bootpay

https://www.npmjs.com/package/react-native-bootpay

react-native-bootpay

 

9. firebase

 

yarn add @react-native-firebase/app

yarn add @react-native-firebase/analytics

yarn add @react-native-firebase/auth

yarn add @react-native-firebase/firestore

yarn add @react-native-firebase/storage

 

위의 문장들을 쉘에 입력하여 설치한후..

파이어 베이스를 리액트네이티브에 연결해야 한다. 

먼저 웹에서 파이어 베이스 프로잭트를 만든다.

그리고 나서 리액트 내이티브 프로잭트에 연결시킨다.

연결하는 내용은 공식문서를 참고하자(아래있음)

import storage from '@react-native-firebase/storage';

import firestore from '@react-native-firebase/firestore';

import auth from '@react-native-firebase/auth';

https://rnfirebase.io/

React Native Firebase | React Native Firebase

 

12 라이브러리 딕셔너리

https://reactnative.directory/popular

 

13. REDUX

프로잭트 루트에서 순차적으로 설치를 해준다.

 

yarn add redux

유저의 정보를 객체로 보관 가능하게 하는 라이브러리. 어느 스크린에서 유저의 정보를 찾을 수 있고 수정할 수 있다.

yarn add react-redux

리액트용 리덕스

yarn add redux-thunk

redux-thunk는 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 

yarn add @reduxjs/toolkit

코드를 적게 사용하여 리덕스를 관리할 수 있게 만드는 것.

 

14. React Navigation 

https://snack.expo.io/@boson/5b84d0

Unnamed Snack - Snack

yarn add @react-navigation/native

 

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

 

yarn add @react-navigation/stack

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

yarn add @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

 

개발환경 [0]

네비게이션 셋팅 [0]

파이어베이스 연결 [0]

리액트엘리먼트 [0]

다이나믹 스크린 구현 [x]

파이어베이스 로그인(구글, 이메일, 페이스북) [x]

리덕스 셋팅 [x]

동영상 피드 구현 [x]

포스트 구현 [x]

마이페이지 구현 [x]

결제구현 [x]