https://www.youtube.com/watch?v=Z9cCjrbTW50
이 영상을 보게 되었고... 리액트를 할 줄 아는 나는 먼저 리액트 네이티브부터 무료 강좌를 들어보기로 하였다!
리액트 네이티브와 플러터 둘다 사용용도에 따른 방식이 다른거라 뭐가 더 좋다고 말할 순 없다고 한다.
네이티브를 배워보고 여유가 생기면 플러터도 다뤄보고 싶다.
웹 개발을 하다보니 내 기획을 앱으로도 만들면 좋겠다... 라고 느낀 것이 일단 앱을 배워야겠다고 생각하게 되었다.
가보자고~~
https://nomadcoders.co/react-native-for-beginners/enroll
Confirm Enrollment – 노마드 코더 Nomad Coders
nomadcoders.co
- state
- props
- useEffect
- useState
를 알고 있다면 리액트 네이티브를 배울 수 있다고 한다.
리액트 네이티브를 시작하기 앞서 초기 세팅이 그닥 좋지 않다고 한다..
그 이유는 앱을 만드는데 필요한 모든 소프트웨어가 필요하기 때문이다 (iOS, Android)
안드로이드 -> 안드로이드 스튜디오, 자바, 안드로이드SDK, 시뮬레이터
iOS -> Xcode, 시뮬레이터(MacOS)
등등 ...
이러한 과정을 생략하고 테스트용 툴과 VSCode를 사용하여 핸드폰에서 앱을 테스트해볼 수 있다.
즉, 빌드용이 아니므로 테스팅용으로 가볍게 사용하는 것이므로 원래는 위에 기재한 것들을 모두 다운 받아야한다.
기본적으로 node 와 npm 이 깔려 있어야 한다!
리액트 네이티브 앱은 자바스크립트로만 이루어져 있지 않다... 자바스크립트 코드로 운영체제와 이야기를 한다는 개념..
그래서 다른 툴들을 사용하여 자바스크립트를 인프라에 맞춰 컴파일하여 (Android-apk, iOS-ipa) 앱스토어 보내는 개념인 것..... 그래서 XCode 와 자바 등이 필요한 것임
블록된 자바스크립트와 CSS 부분(코드 부분)을 제외된 다른 부분(동일한 인프라)을 대용해주는, 이미 앱에 컴파일된 테스트용 툴은 바로
Expo 이다!
npm i -g expo-cli로 일단 설치~
만약 MacOS 유저라면 watchman 도 추가로 필요
brew update
brew install watchman그 다음
핸드폰에 Expo(안드로이드), Expo Go(iOS) 를 다운 받고 로그인 해준다.
Expo 는 리액트 네이티브 코드를 바로 보내줘서 미리 볼 수 있게 해준다.
리액트 네이티브란?
앱 동작 순서
사용자가 화면을 누른다
-> 그 정보가 JSON에 담겨 자바스크립트 코드로 payload로 받는다
-> 해당 정보를 바탕으로 변화가 일어나고
-> 그 변화를 다시 response 로 보내서
-> 화면의 UI가 변화되는 것임
expo로 앱을 만들 땐
expo init 앱이름그럼 뜨는 옵션들 중에서 가장 첫번째의 blank template 을 선택해준다.
그럼 앱이름으로 지정해준 폴더가 생긴다.
익숙한 파일들이 보인다.. CRA 와 유사함
package.json 에 보면 스크립트 명령어들이 있는데 해당 명령어들은 시뮬레이터가 없기 때문에 실행이 불가능하다.
"eject": "expo eject"해당 코드를 추가해준다.
그러면 expo 앱이 폰에 설치되어있는지 확인해준다고 함
우선 expo login 을 실행하여 로그인 해준다.
컴퓨터와 앱 둘다 로그인된 상태여야 한다!
다음 익숙한 npx expo start 실행(강좌의 내용과 달리 변경됐음)
QR코드가 나오게 되는데... 지금 expo 가 실행중인것으로
expo 가 폰에서 해당 코드를 실행시키도록 기다리는 상태가 된 것임
이제 폰으로 해당 프로젝트에 접속해보면... 이렇게 보이기 시작함
App.js 내용이 보이는 것인데... 내용을 변경하면 앱에서도 변경되는 것을 볼 수 있음...!!!
아, 근데 같은 네트워크에 접속해있어야만 가능하다고 함(처음에 계속 로딩바만 돌아서 당황했음)
매번 핸드폰으로 확인하기 번거로워서 iOS 시뮬레이터를 사용해주기로 했다.
https://docs.expo.dev/workflow/ios-simulator/
iOS Simulator
Learn how you can install the iOS simulator on your Mac and use it for developing your app.
docs.expo.dev
참고!
npx expo start 로 실행해주고 i 를 누르면 됨!
실시간 업데이트도 가능
이제 어플 만들기 돌입!
'App Study > React Native' 카테고리의 다른 글
| 노마드코더 리액트 네이티브 입문 - 6 (0) | 2023.05.31 |
|---|---|
| 노마드코더 리액트 네이티브 - 5 (0) | 2023.05.30 |
| 노마드코더 리액트 네이티브 입문 - 4 (0) | 2023.05.29 |
| 노마드코더 리액트 네이티브 입문 - 3 (0) | 2023.05.27 |
| 노마드코더의 리액트 네이티브 입문 - 2 (0) | 2023.05.25 |
