1. 프로젝트 시작
터미널(iTerm)을 이용해 프로젝트 경로로 이동 후
react-native init --version 0.61.5 my_first_app
정상적으로 해당폴더에 생성된 것을 확인
+)요즘 git도 연습하고 있어서
git add .
git commit -m "Add ReactNative Project"
git push
근데 git push에서 오류가 나서 .. fetch 후 pull하라고 하길래 그렇게 한 다음에 push해주었다.
여태까지 계속 오류가 났던게 up-stream을 안해줘서 였던 것 같다.
git push —set-upstream origin main
이거 한번 해주고 ( 브랜치명인데 원래 나는 지금 혼자써서 main으로 하는중이라... 메인씀
2. IntelliJ에서 프로젝트 실행 + Simulator 구동
Open > (방금 생성한) my_first_app
시뮬레이터 구동(iOS)
이제 부터 명령어는 IntelliJ에 있는 터미널로 실행해줍니다.
ios Simulator구동
react-native run-ios
단축키 및 기능
cmd + D를 누르시면 다양한 기능들을 볼 수 있습니다.
Cmd + R : Reload 변경한 코드를 시뮬레이터에 반영시킴
→ cmd + D를 누르신 후 Disable fast refresh를 눌러주시면 , cmd + s(저장) 키를 누를때마다 반영되게 만들 수 있습니다!
시뮬레이터 기종 변경
react-native run-ios --simulator="iPhone 기종"
//react-native run-ios --simulator="iPhone 8 Plus"
이런식으로 해주시면 해당 기종으로 시뮬레이터가 실행됩니다
기종명은
File > Open simulator > 에서 확인해보실 수 있습니다
(구버전은 Hardware > Device > 에서 확인 가능하다네요)
애뮬레이터 구동(Android)
M1으로 android emulator 설치 + 사용하기
2021.02.08 - [WEB_APP/React-Native] - [Silicon Mac M1] 안드로이드 에뮬레이터(Android Emulator)설치
시작은 위 글에도 적혀있지만,
일단 안드로이드 에뮬레이터를 켠 후
iTerm을 이용해 프로젝트 폴더로 이동한 후
react-native run-android
해주면된다.
단축키 및 기능
cmd + M : 설정을 확인할 수 있음
R(빠르게 2회) : Reload 수정한 코드 변영 ( 마찬가지로 disable fast refresh 를 누르면 저장으로 코드변경이 반영되게 만들 수 있습니다)
'Frontend > React-Native' 카테고리의 다른 글
[React] React기초(props / state) (0) | 2021.05.29 |
---|---|
[ES6] 기본 문법 + VScode js개발환경 (0) | 2021.04.06 |
리액트 네이티브(ReactNative)란? (2) | 2021.03.29 |
[Silicon Mac M1] 안드로이드 에뮬레이터(Android Emulator)설치 (0) | 2021.02.08 |
[React-Native] Style 연습-웹툰페이지 만들기 (0) | 2021.02.05 |