리액트 네이티브는 페이스북(메타)이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다.
React Native is an open source mobile application framework developed by Facebook(META).
Expo는 리액트네이티브의 프레임워크 입니다.
Expo is a React Native framework.
이 리액트네이티브를 사용하면 일반적인 안드로이드와 ios앱을 모두 개발할 수 있습니다.
Using React Native, you can develop both common Android and iOS apps.
Expo를 사용하는 방법이 모바일 앱을 개발하는 가장 편한 방법입니다.
Using Expo is the most convenient way to develop mobile apps.
하지만 앱개발을 하다보면 앱개발 기능에서 한계를 느낍니다.
However, when developing apps, you feel the limitations of app development functions.
그래서 이런 문제를 해결하기 위해서 리액트네이티브CLI로 앱을 개발하게 됩니다.
So, to solve this problem, we develop an app with React Native CLI.
아래는 리액트네이티브 CLI환경설정 부분과 앱개발을 시작하는 부분을 설명합니다.
Below is an explanation of React Native CLI environment settings and starting app development.
1.리액트네이티브 환경설정 (react native setup envirnment react-navite 0.75)
https://reactnative.dev/docs/set-up-your-environment
-Open JDK 다운로드(Open JDK Download)
https://openjdk.org/
-안드로이드 SDK 다운로드 (Android SDK Download)
한국어(KOREAN)
영어(ENGLISH)
-안드로이드 스튜디오 다운로드(Android Studio Download)
환경변수 설정 부분이 중요합니다.(Setting environment variables is important.)
※ 추가 설명이 필요하다면 나중에 추가로 설명하겠습니다.
If further explanation is needed, I will explain further later.
-nodejs설치
https://nodejs.org/en/download/prebuilt-installer
-VIsual Studio Code설치(Install Visual Studio Code)
필수 사항은 아닙니다. (It is not required.)
https://code.visualstudio.com/
2.react native설치
https://reactnative.dev/docs/integration-with-existing-apps
-Power Shell(또는 비주얼스튜디오 코드 터미널)에서 다음 명령어를 실행합니다.
Run the following command in Power Shell (or Visual Studio Code Terminal):
# npm install react-native3.USB연결 및 체크(USB Debugging)
https://reactnative.dev/docs/running-on-device
-먼저 여러분의 모바일폰과 PC가 USB를 통해서 연결되어 있어야 합니다.
First, your mobile phone and PC must be connected via USB.
-adb devices 명령어를 실행해서 device가 표시되면 연결된겁니다.
If you run the adb devices command and the device is displayed, it is connected.
4.안드로이드 스튜디오 실행(Run Android Studio)
-안드로이드 스튜디오가 실행되지 않으면 리액트네이티브를 실행 할 수 없습니다
If Android Studio is not running, You can’t run React Native.
4.프로젝트 시작(Get Started with React Native)
https://reactnative.dev/docs/getting-started-without-a-framework
리액트네이티브0.75버전에서 약간 바뀐 부분입니다.
This is a slightly changed part in React Native version 0.75.
기존에는 npm init [Appname]으로 프로젝트를 시작했다면 0.75버전 이후부터는 다음과 같이 실행 합니다.
Previously, if you started the project with npm init [Appname], from version 0.75 onwards, run it as follows.
npx @react-native-community/cli@latest init App1 
-해당디렉토리에 프로젝트 셋팅이 완료된 모습을 볼 수 있습니다.
You can see that the project settings have been completed in the relevant directory.
5.프로젝트 실행(Run project)
# npm run android
-모바일 폰에서 앱설치와 실행 상태를 볼 수 있습니다.
You can see the app installation and execution status on your mobile phone.
-왼쪽 이미지는 앱이 실행된 모습이고 오른쪽 App1은 앱이 설치된 모습입니다.
The image on the left shows the app running, and App1 on the right shows the app installed.
