[ReactNative] ReactNative101#1 - Expo 설치, 안드로이드 기기에서 열기

에구마·2022년 5월 9일
0

RN

목록 보기
1/3

노마드 코더 왕초보를 위한 React Native 101 강의 수강하면서 공부한 기록!

#1 INTRODUCTION

안드로이드 스튜디오, 안드로이드 SDK 등 설치할 것들이 있지만,
이 강의에선 VSCode로 테스트용으로만 개발-!
필요한 소프트웨어 세팅은 다음에 하기로 한다.


1.3 Requirements

cmd에서 node와 npm 설치 확인은 필요함!
node -v
npm

1.4 Installing Requirements

javascript 보다 중요한것은 인프라 시설 ! (자바 등)

하지만 이번 공부에선 그런 설치들 없이 expo 사용!
https://expo.dev/ 공식문서
작성한 코드 결과를 즉시 확인 가능
색칠 부분은 Expo의 역할.
폰 안의 RN코드를 실행시켜서 폰에서 바로 미리보기 가능하게 해준다.

설치 과정

  1. npm i -g expo-cli

  2. 안드로이드 기기에 Expo 앱 설치
    https://docs.expo.dev/get-started/installation/

1.5 How Does React Native Work

Native를 만들 때 시뮬레이터가 있어야 하는 이유?
RN은 번역 느낌! 브라우저 없음!
우리코드(컴포넌트 등) -> RN -> iOS/And 등 운영체제
우린 RN코드를 만들면 된다!
RN이 bridge를 통해 Native 운영체제에 전달

1.6 Creating The App

프로젝트 만들고 안드폰에서 열기!

https://docs.expo.dev/get-started/create-a-new-app/

  1. 원하는 파일 경로에서 cmd 켜고 expo init {프로젝트명}

  2. blank template 선택되어 있고 그냥 엔터 TADA!
    설치 완료 후 그 프로젝트 폴더를 VSCode로 열면

  3. 로그인
    터미널에서 하면 오류가 난다.
    cmd를 켜고 expo login
    expo홈페이지 로그인과 동일하게 적어준다.
    안드로이드 기기에서도 동일하게 로그인!

  4. 안드로이드 기기에서 확인
    안드로이드 기기와 노트북 WiFi 동일하게 해둔다!!
    npm start


    🚨 터미널에는 QRCode가 나오지만 웹을 띄워주지 않는다면?
    OR 현재 폴더를 cmd에서 열고expo start
    OR VSCode 터미널에서 Command Prompt로 열고 expo start

    하면 localhost 주소를 얻을 수 있다. 링크 열고 QRCode 스캔하기!


    🚨 QRCode 스캔을 했는데, 기기에선 Something went wrong. Network response timed out 오류
    콘솔에선 '"react native" java.net.sockettimeoutexception failed to connect to ...' 라면?

    connection을 tunnel로 바꾸어준다.

    성공! 위쪽에 연결된 기기 정보도 뜰것이다!!

이후 작업시 실행 방법

터미널에서 cmd로 열고
expo : expo 설치확인
expo start
localhost 주소로 번들열고CONNECTION Tunnel로 바꿔준다
안드폰에서 Development servers 에 열린 프로젝트 열기! OR 큐알스캔해서 뜨기도함

터미널에 Android Bundling complete 6042ms
Android Running app on SM-A530N

🚨 안드로이드 expo 변경사항 반영 안되는 문제 ? reload 문제??
🤕 루트경로에 있는 App.js를 수정 중인지 확인할 것 .....! expo-shared 내의 App.js 아님 ㅜㅠ
     혹은 안드폰이랑 놑북이랑 같은 wifi인지도 확인.

🚨 안드로이드 expo 변경사항 자동 반영이 안된다면?
🤕 터미널에서 r 눌러서 리로드 시키거나 안드폰 흔들어서 나오는 reload 누르기

profile
Life begins at the end of your comfort zone

0개의 댓글