Frontend/React-Native

[ReactNative] 프로젝트 시작및 시뮬레이터

IagreeBUT 2021. 3. 29. 23:51
728x90

 

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)설치

 

[Silicon Mac M1] 안드로이드 에뮬레이터(Android Emulator)설치

안드로이드 스튜디오는 m1에 지원이 되지만, 에뮬레이터는 아직 정상적으로 작동하지 않는다 그래도 앞으로는 애플이 Intel과 손절했기 때문에 어떻게든 되도록 각 회사들이 열심히 개발해주고

iagreebut.tistory.com

 시작은 위 글에도 적혀있지만,

 

일단 안드로이드 에뮬레이터를 켠 후 

iTerm을 이용해 프로젝트 폴더로 이동한 후

react-native run-android

해주면된다. 

M1은 핸드폰 모양이 안나옵니다 ㅎㅎ..

 

단축키 및 기능

cmd + M : 설정을 확인할 수 있음 

R(빠르게 2회) : Reload 수정한 코드 변영 ( 마찬가지로 disable fast refresh 를 누르면 저장으로 코드변경이 반영되게 만들 수 있습니다)

728x90