일단 하나를 해보자

리액트 네이티브란?

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

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

노마드코더 강의 보는중

리액트 네이티브는 브라우저가 없음, 웹사이트가 아니야!

앱개발하는데 필요한 java 등등 깔아줄게 많음

그래서 강의에서는 네이티브 코드 바로 시작할 수 있게 expo 써서 한다.

핸드폰에 expo앱깔면 연동으로 보이네 신기하다

(expo 설치 내용 https://docs.expo.dev/)

( https://snack.expo.dev/ 여기서 작업하면 visual studio도 필요없고 node, npm 설치 안했어도 바로 테스트할 수 있음)

리액트 네이티브는 웹사이트가 아님!

HTML이 아니기 때문에 div쓸 수 없음

대신에 view를 씀 얘는 container컨테이너다 (react Native에서 import해와야 쓸 수 있음!)

(The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,,,)

react native에 있는 모든 텍스트는 text component안에 들어가야한다

border css는 사용불가능하다

처음에 react Native는 많은 컴포넌트와 API를 지원했는데 버그많고 비효율적이어서 

빠르게 만드는데 초첨맞추고 두 개를 축소시킴

(components와 API의 차이는 무엇인가?>

components는 화면에 렌더링할 항목이다

API는 (운영체제와 소통하는) 자바스크립트 코드이다)

reactNative 커뮤니티에서 쓸 수도 있지만

expo가 우리에게 필요한 Package를 제공한다.  https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/

여기서는 이미 container View가 Flew container다

모바일에서는 Flex direction 기본값이 colum(열-세로)

(원래 웹에서는 Flex direction 기본값이 Row(행-가로) 였음)

레이아웃에서 대부분 width, height안씀. 반응형 페이지 생각해야함!!! 매번화면 달라지는데말여

React Native에서는 flex 비율로 레이아웃 채워서 씀