[React Native] 개발환경 구축

EXPO CLI 설치

• 터미널에 들어가서 sudo npm i -g expo-cli 입력

환경 구축

• iOS는 딱히 환경을 설정할 필요 없다.
• Android에서는 sdk 경로를 설정 해줘야한다.

~/.bash_profile
export ANDROID_SDK=/Users/sungjinpark/Library/Android/sdk
export PATH=/Users/sungjinpark/Library/Android/sdk/platform-tools:$PATH

~/.bash_zshrc
export ANDROID_SDK=/Users/sungjinpark/Library/Android/sdk
export PATH=/Users/sungjinpark/Library/Android/sdk/platform-tools:$PATH

앱 만들기

• expo init
• 여기서 나오는 managed workflow / bare workflow 두가지가 있다
  • Managed Workflow에서는 expo가 컴플렉시티를 다 manage 해준다. (iOS & Android X, 오로지 pure Javascript 프로젝트)
  • Bare Workflow에서는 bareborn 안드로이드와 iOS 프로젝트를 만들 수 있다.

Hotkey

• iOS 창에서 developer menu = control-d + command-d
• Android에서 developer menu = shake(?)

Debugging

• Chrome과 VS Code에서 React Native 디버깅이 가능하다.
• 개인적으로 크롬보다는 VS Code에서 디버깅을 추천한다. (개인취향)
• 디버깅 순서:

  1. 먼저 디버깅 메뉴를 클릭 한 뒤, launch.json 파일을 만든다.

  2. React Native 입력 후, “Attach to packager”를 선택한다. (다른 configuration을 사용하고 싶을 시 “add configuration” 사용.

  3. 여기서 문제가 생기는 “port error”는

     Code > Preferences > Setting > 해당 칸에 “React Native Port” 입력 후 localhost port를 기입한다.

  4. 여기서 또 생기는 문제 “another debugger is already connected...”는 열려 있는 localhost 탭을 닫아줘야한다!

  5. 그러면 디버깅 실행 가능~.~

Publishing

• 프로젝트를 실행 시켜 놓고, 새로운 터미널을 열고 expo publish를 입력한다.
• 여기서 expo를 회원가입 및 로그인을 하고, 앱을 만들면 된다.