공부하기에 앞서,, 저는 Windows 사용자이며, 맥북 미보유자로 Windows-android 개발 선 공부를 할 예정입니다.
해당 클래스는 android/ios 모두 알려주기에 추후 맥북 구매시 ios ver 공부하도록 하겠습니다 :)
React native 세팅 방법은 3가지 ❗❕
1) 기본 세팅
생성 : npx react-native init @@@Project (프로젝트명)
시작 : npx react-native run-android or npm run android
요래 실행됨 ㅎ_ㅎ
[windows에서 'npx react-native run-android'할 때 아래 Emulator 오류로 막히시는 분들은 아래처럼] 'error Failed to install the app. Make sure you have an Android emulator running or a device connected.'
이 에러가 뜨는 이유는 한 번도 Android Studio에서 애뮬레이터를 사용해본 적이 없어서 등록된 애뮬레이터가 없기 때문에 Android Studio에서 빈프로젝트를 만드시고 구글에 애뮬레이터 만드는 법 치셔서 애뮬레이터 만드신 후에 다시 명령어 입력하면 정상적으로 작동한다고 합니다 :)
2) ignite CLI 세팅
위 기능이 사전 설치 + 설정 되어 있음
이 강의에서는 기본 세팅으로 시작 후 설정하는 연습을 할 거지만, 추후 사용을 위한 ignite 세팅을 연습해본다
1. cmd에서 위 내용처럼 실행1-2. 위 내용처럼 Y 동의해주고 설치 진행2. 요렇게 되면 설치 및 생성완료시작되어가는 중 시간이 꽤 걸린다...요렇게 생성됩니다아
> 많은 구조들이 완성되어 있고, Demo파일까지 생성되어 생산성을 올려주는 형식,,,,,
하지만, 흥미로운 구조로 설정되어 있어 이해도가 필 수 ************************
이해도 없이 사용하기 어려운 구조라고 합니다.
3) 이 강의에서 다룰 세팅
Create React Native App
-페이스북과 Expo의 합작으로 양쪽의 장점만 모아둔 세팅법
1) 우리가 접근해야 하는 Native 파일(android, ios)에 접근 권한을 가진 어플을 만들어줌 > native 접근이 가능 = 우리가 원하는 모든 것들을 설치할 수 있음
> React Native CLI를 사용할대 얻을 수 있는 Native접근 권한!
2) 동시에 Expo로 작업하는 것도 가능 > Expo 가 가진 SDK와 수많은 API, 컴포넌트들을 통해 효율적 작업 가능, QR코드를 통한 프리뷰 이용 가능 > Expo는 android, ios에 접근이 불가한데 Create React Native App으로 가능!
But, ignite처럼 사전 세팅 등의 어떤 것도 대신해주지는 않음.....
위 1 챕터에서는 사전에 숙지해야할 내용을 알려주었고, 2 챕터에서 진짜 강의 시작 :)
오늘의 목표(?) 사전에 강의를 들어야 했는데 현재 회사 업무 과다로 이제야 시작함 ㅠ
요 마스터클래스에서는 4개의 어플을 만들게 될 예정인데, 첫번째 앱은 아래와 같다!
영화/TV shows에 대한 정보를 찾을 수 있는 어플?
🎉이 어플을 만들며 배워볼 점!
- Top/Stack내비게이션 만드는 법
- Navigator들을 커스텀화 하는 방법과 이것들이 각각 어떻게 다른지
- React Native에서 CSX 사용하는법 연습! (아래 스크린 만들...?!)
- ScrollView, RefreshControl, FlatList 등등
- Dark/Light테마를 위한 Theme다루는 법
- React Query : API접근할때 사용하는 라이브러리
자 이제 시작해봅니당! 먼저 SET UP!
#2.1 AppLoading part One
콘솔에 npx create-react-native-app을 입력해줍니다!
위 처럼 기본 설정으로 시작해주고, vs code에서 열고 시뮬레이터를 실행 시켜줍니다
(니꼬쌤 맥북이라 잘 들어봐야할듯)
완료화면요렇게 쳐주면 vs code로 실행됩니다
터미널을 분리해서 순서대로 실행해줍니다
- npm start <-metro서버 실행 (계속 실행시키기 위해 별도 터미널사용)
- npm run android (ios) <-시뮬레이터 실행
화면을 요래 만들어주고 백지상태에서 시작!
Expo SDK 컴포넌트를 사용 할 수 있으니, expo의 Apploading 컴포넌트를 살펴본다.
Apploading 컴포넌트 - 사용자에게 앱이 보여지기 전 원하는 어떤 요소라도 시작 전 모두 다 불러올 수 있게 해줌 - 예를들어, API를 호출하거나 이미지 혹은 폰트를 미리 불러올때 유용쓰~~!! 사용방법 : expo install expo-app-loading *Apploading을 사용하면 Apploading을 렌더링할때까지 splash screen이 계속 떠있음,, 1. 어플이 준비가 됐는지 안됐는지 알려주는 state가 있고 2. 준비가 덜 됐으면 Apploading을 렌더링 해주는데, 만약 Apploading을 계속 렌더링하면 어플리케이션 실행 안됨
👍실전 적용 1) onfinish : 로딩이 끝나면 호출되는 함수 2) onError : 모종의 이유로 startAsync에 에러가 발생하면 이 함수로 보내짐 3) startAsync : promise가 resolve되거나 종료됐을 때, promise를 반환하는 함수인데 Apploading이 onfinish를 호출해줌
✅실전 사용
preload가 필요한 이유
1) 어떠한 이유로 API를 호출 할 수도 있고
2) 어플이 디스플레이 되기 전 어떤 정보들을 받아오고 싶을 수도 있고 (ex: notification정보)
> 그러면 어플이 실행되기 전에 startLoading 내부에서 그에 필요한API를 호출, 3) 어플에 video요소가 있다면 어플 실행 전에 비디오를 먼저 preload하고 싶을 수 있고
4) 데이터베이스 가지고 작업할 때, 어플 시작 전 데이터베이스를 열어서 preload : 어플이 커지면 데이터베이스에 바로 접근 가능
5) 아이콘 preload : tap navigation에서 아이콘을 사용하는데 아이콘 preload가 필요하다 (유저가 어플 실행 시 모든 아이콘 보여야함)
