리액트 네이티브 & Expo 실행하기

앱개발 종합반 2주차

02. 리액트 네이티브 & Expo 실행하기

1) 리액트 네이티브

리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두가지 모두 만들어주는 라이브러리(=도구)

한계 : 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생함. (안드로이드 앱을 만들 땐 자바&코틀린, iOS 앱을 만들 땐 Swift라는 언어를 써야함)

2) Expo

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴

Expo 클라이언트 앱을 통해 개발 중인 앱 테스트 가능

3) Node & NPM 설치

처음에 node 설치할 때 버전을 잘못 깔아서 npm도 설치가 안됐음. ㅠㅠ
뒤늦게 다시 다운 받음

Yarn: npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴

Yarn 설치를 위해 cmd 창에 아래 명령어 입력

npm install -g yarn
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어

//설치가 완료된다음
yarn -v

4) Expo 명령어 도구 설치

cmd 화면에서 아래 명령어 입력

npm install -g expo-cli

• npm: 노드 패키지 매니저 명령을 실행하겠다
• install: 설치하겠다
• -g: 컴퓨터 전역적으로 설치하겠다
  == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있게끔!
• expo-cli: 설치 할 패키지 이름

5) Expo 가입, 로컬에 Expo 계정 세팅

Expo 홈페이지에서 계정 가입
(이 때 정한 user name 으로 로컬에서 로그인 함)

로컬에 세팅: cmd 화면에서 username 과 passport 입력

expo login --username "tiinto"
expo 패스워드 입력

6) Expo 앱 생성 및 실행하기

1 바탕화면에 폴더 생성
2 VSCode에서 폴더 오픈
3 터미널 탭에 아래 명령어 입력

expo init sparta-honeytip-coco

4 Expo 앱 유형은 blank 선택
5 Expo 앱 폴더 안으로 이동하기 위해 위치 이동 명령어 입력

cd sparta-honeytip-coco

cd <폴더명>
: change directory의 약자로 입력한 폴더명으로 이동하는 명령어

cmd 창에서 뒤로가기 명령어: cm .. (cm+띄어쓰기+..)

6 Expo 앱 실행
아래 명령어를 입력하면 자동으로 브라우저가 열림
--> QR코드를 카메라 앱으로 찍어 Expo 앱을 실행시킬 수 있음

expo start

Expo 앱(Expo 서버)을 켤 땐 : expo start 입력
Expo 앱(Expo 서버)을 끌 땐 : ctrl + c 입력

7) Expo 프로젝트 기본 폴더구조

assets: 기본제공 이미지를 포함하여 이미지들이 저장되는 곳
node_modules: 앱 개발시 사용하는 도구
App.js: 화면이 되는 파일
app.json: 배포시 앱에 대한 설명서

8) 본격적으로 앱개발 들어가기

---

<문제 상황>

Q. Expo QR 코드를 찍어서 앱이 실행은 됐는데 화면이 뜨지 않아요. (Something went wrong. Network response timed out.)

A. expo start 명령어를 입력했을 때 바로 열리는 구글 크롬 개발자 도구 화면 좌측 하단에 tunnel, lan, host가 있습니다. 여기서 하나씩 눌러보면서 연결되는 상황을 찾아보세요! 모든 분들이 접속 환경이 다르기 때문에 위 접속 방법 세 가지중에서 맞는 환경을 찾아야 합니다! 일반적으로는 같은 공유기에 연결하면 lan으로 하시면 연결이 되어야 합니다.

• 컴퓨터와 스마트폰이 다른 네트워크다(예를들어 스마트폰 LTE, 컴퓨터 와이파이) : Tunnel 사용하시면 됩니다.
• 컴퓨터와 스마트폰이 같은 네트워크다(같은 와이파이/공유기를 쓴다): LAN을 사용하시면 됩니다.
• 컴퓨터와 스마트폰이 같은 컴퓨터에서 돌아간다(에뮬레이터 등 사용): Local 사용하시면 됩니다.

만약 연결이 안되신다면 1) 컴퓨터 2) 스마트폰 3) 공유기 까지 모두 껐다가 켜보세요.

expo start 명령어를 입력했을 때 바로 열리는 구글 크롬 개발자 도구에서 조치
--> 문제 1. 바로 열리는 창 같은건 없음
그래서 Ctrl+클릭 or w 클릭을 통해 링크에 접속한 후 F12 눌러 개발자 도구 들어가도
흰 창에 Open up App.js to start working on your app! 이라고만 뜸
--> 문제 2. 좌측 하단에 tunnel, lan, host 이런것 안 뜸 ㅜㅜ!!

<학습 후기>

가슴에 참을 수 없는 답답함이 밀려온다... 후 하 후 하ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ쿠ㅜㅜㅜㅜㅜ
오류 때문에 일주일간 방치해두었던 강의를 다시 시작해본다....
그래 하자... 위의 오류는 잊고 오늘 다시 2-3 강의를 이어서 들어보자!!
어휴 갑갑해!!^_^