일단 하나를 해보자

리액트 네이티브란?

페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크이다.

HTML,CSS 대신 자바스크립트 스레드로 이뤄져 있다.

장점

 JavaScript를 사용하여 Android 와 iOS를  동시에 개발할 수 있어 효율적이다.

codePush를 통한 배포로 원하는 기능을 스토어를 거치지 않고 할 수 있다.

쉽고 빠른 UI 작성을 할 수 있다.

리액트 개발자가 사용하기 쉽다.

단점

성능이슈가 쉽게 나타나 낭비되는 렌더링을 확인해야 한다.

버그의 원인을 추적해나가는 과정이 다소 어렵다.

빌드타임이 오래 걸린다.

Windows, Linux 또는 Mac OS를 사용하여 React Native를 시작할 수 있습니다.

iOS 및 Android 환경은 Mac OS에서 모두 사용 가능하지만

Linux와 Windows는 Android 환경만 지원합니다.

React Native 개발을 위해 macOS를 사용한다고 하지만 Windows 및 Linux에서도

할 수 있다.

React Native 를 시작하는 두 가지 방법이 있다.

Expo CLI  

설치 및 배포가 쉬움 하지만 expo 라이브러리를 써야돼서 한정적일 수 있음

React Native CLI

설치해야되는 것들이 상대적으로 많음

expo란?

“create-react-native-app was replaced by expo-cli.”

Expo CLI는 개발자와 Expo 도구 간의 기본 인터페이스인 명령줄 앱입니다.

쉬운 앱개발을 할 수 있습니다.

Expo 는 ios, Android앱 개발할 수 있는 프레임워크이자 플랫폼이다

https://docs.expo.dev/workflow/expo-cli/

expo 설치 (with 타입스크립트)

Nodejs 가 설치되어있어야 한다.

npm install -g expo-cli

expo init 폴더명

cd 폴더명

npm start # you can also use: expo start

(expo 앱 깔아서 QR찍어서

핸드폰으로 연동해서 보면 되는데 

만약에 

android emulator로 보고 싶으면

Run on Android device/emulator 를 클릭하면, 자동으로 연결된다.

또는 터미널 상에서 a 버튼을 누르면 바로 실행된다.

Press a for Android emulator, or w to run on web.)

기존 프로젝트에 typescript 추가하기

npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

참고 :

https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project

TypeScript 구성 파일을 추가합니다. tsconfig.json프로젝트의 루트에 생성

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": ["es2017"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}

jest.config.jsTypeScript를 사용하도록 Jest를 구성 하는 파일 만들기

module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

JavaScript 파일의 이름을 다음과 같이 변경하십시오.*.tsx

./index.js은 그대로 두어야 한다. 그렇지 않으면 프로덕션 빌드 번들링과 관련하여 문제가 발생할 수 있습니다.

yarn tsc

새 TypeScript 파일을 유형 검사하려면 실행하십시오 .

(만약 안된다면  npm install typescript –g 로 전역설치

https://stackoverflow.com/questions/39404922/tsc-command-not-found-in-compiling-typescript)

react native cli 설치

- “고급 시스템 설정”에서 환경변수 수정 (시스템속성->환경변수 -> 새로 만들기)

변수 이름 적고, 하단에는 설치한 폴더 경로 입력 후 확인.

-시스템 변수에서 path 클릭, 새로 만들기 클릭, %JAVA_HOME%\bin 입력후 확인

-명령 프롬프트 에

javac    (javac 명령오는 텍스트 파일로 작성된 java 파일을 bytecode로 컴파일함)

java-version 입력해 버전 값 나오는지 확인

2. 안드로이드 스튜디오 설치 및 환경설정 Download Android Studio and SDK tools  |  Android Developers

-Tools에서 SDK manager 들어가서 사용할 디바이스 선택 및 설치

-환경변수 수정

3. Nodejs 설치 Node.js (nodejs.org)

4. Python 설치 Download Python | Python.org

5. npx react-native init AwesomeProject  

(타입스크립트 템플릿 추가

npx react-native init AwesomeTSProject --template react-native-template-typescript

)

6. npx react-native start

7. npx react-native run-android (새 터미널 창에서 입력, npm run android 해도 됨)

참고(특히 환경변수 설정 참고~~!) : https://marshmello.tistory.com/69

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

에러났을 때

-에러 SDK tool 안 깔려 있는 것이 없는지 확인

-경로 확인(환경변수 확인)

에러 

error failed to launch emulator. Reason:No emulators found as an output of `emulator -list-avds` 

Could not determine the dependencies of task ＇:app:compileDebugJavaWithJavac＇. > SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project＇s local properties file

해결

local.properties 파일 만들어서 해결

(sdk.dir=해당 경로 입력)

참고: https://healthcoding.tistory.com/35

https://eso0609.tistory.com/92 

https://stackoverflow.com/questions/59355688/how-to-solve-the-error-failed-to-launch-emulator-reason-no-emulators-found-as