[React Native] 노마드 코더 React Native 무료 강의 내용 정리 #1 Introduction

#1.1 Welcome

- 강의 소개~~ 환영~~

 

#1.2 Requirements

- 강의 이해하기 위해 미리 알아야 하는 것들 : 'React', 특히 state, props, useEffect, useState

- 얘네만 알면 그냥 들어도 무방! 리액트 엄청 고수일 필요 없음!

 

#1.3 Software Requirements

- 실제로 배포하고 제대로 사용하기 위해선 안드로이드 스튜디오, 에뮬, 자바 등 깔아야 할게 많음.

- 해당 강의에선 쉽고 빠르게 바로 코딩을 배우기 위해 바로 결과를 보여주는 툴을 사용할 것.

- 다 들은 후에 실제로 배포하고 등등 하고 싶으면 그 땐 위의 것들을 셋팅해야할 것임.

 

 

#1.4 Installing Requirements

- RN app is not made only with JS - 오히려 우리의 코드(JS, Markup/Styling)이 가장 작은 부분임 - 가장 덜 중요..

- 젤 중요한 것은 우리 코드가 OS와 소통할 수 있도록 해주는 infrastructure들(위 사진에서 JS, Markup 제외한 부분들) 임.

- RN app을 다운할 때 js 코드만 받는 것이 아니라 os와 소통할 수 있도록 하는 infrasturcture들을 다 다운받는 것.

- 이것들을 빌드하고 컴파일 해야하기 때문에 java, xcode, andsroid studio가 필요한거임.

 

- 해당 강의에선 위의 것들을 쓰지 않음.

- 우린 앱스토어에 있는 위 app 틀을 다 갖고 있는 앱을 다운받을 것임. 해당 어플은 js, markup이 비어있음.

- 그 어플과 컴퓨터를 연동시켜서 우리의 코드를 저기에 넣어서 구동시켜볼 것임.

- 그래서 우린 컴파일 할 필요가 없음. 다운하고 js, markup 코드만 보냄. -> 즉시 코드를 어플에서 구동시킬 수 있음. 

 

앱 이름은 Expo임.

Expo는 구글 플레이스토어, 앱스토어에 다 있음.

 

니꼬쌤이 보시는 doc 사이트 - 

https://docs.expo.dev/get-started/installation/

Installation - Expo Documentation

 

 

terminal에 아래 코드 작성

# Install the command line tools
npm install --global expo-cli //강의에 있던거
npm i -g expo-cli //2022.05.02 기준 사이트에 있는거

**여기서 !! 난 권한 에러가 났는데 앞에 sudo를 붙이니 바로 실행 됐음!

sudo npm install --global expo-cli

 

 

MAC 사용자라면 'Watchman'이라는 것을 다운받아야함.

brew update
brew install watchman

 

이제 각자 구글 플레이스토어, 앱스토어에서 'Expo'라는 어플을 다운받으면 됨.

- 앱스토어에선 'Expo Go'라는 이름으로 있음

 

 

#1.5 Creating The App

 

1. Terminal > Docs로 가서 다음 코드 작성

# Create a project named my-app. Select the "blank" template when prompted
expo init NomadWeather

 

2.

요렇게 나오는데 가장 위의 'blank - a minimal app as clean as an empty canvas' 에서 엔터 누르기!

 

3. NomadWeather 파일을 VS Code에서 open.

 

 

코드 치기 전에 이 프로젝트가 각자의 폰에서 구동되는지 볼거임!

1. 폰에 Expo 깔았는지 확인.

2. VS Code zsh 터미널에 다음 코드 작성

npm start

3. VS Code 터미널 창에 qr 뜨면 성공.

4. 'Ctrl+c' 눌러서 app 죽이기.

5. 모바일, 컴퓨터(vs code)에서 각각 expo에 로그인 해야함.

6. 터미널 창에 다음 코드 작성

expo login

이후 메일 or username, password 작성

7.

로그인 성공.

 

 

 

다시 한번 앱 실행 해볼것임.

1. VSC terminal에 다음 코드 작성

npm start

2. 

위와 같이 뜨면 성공.

3. 이제 모바일 어플에서 'NomadWeather' 누르면 아래와 같이 나와야 함.

 

화면에 App.js에 있는 코드 그대로 뜸.

 

 

이제 VSC에서 코드를 수정해보자.

1. App.js에 들어가서 다음과 같이 수정하고 저장하기.

<Text>Hello! I made a RN App!</Text>

2. 저장하면 바로 핸드폰에서 아래와 같이 화면이 바뀜.

짱신기해!!!

 

 

 

#1.6 Recap

- React Native는 모바일 안의 브라우저 같은 것이 아님!

- RN App IS 'NATIVE', 왜냐면 얘가 'OS'랑 얘기를 하기때문.

- OS와 JS가 이루는 상호작용 때문에 RN은 native앱임.

- Native에선 event들이 발생함. 예) 화면 터치 등.

  그러면 우리의 OS에서 우리의 JS 코드한테 메시지를 보냄.

 

ex)

1) Native에서 Event 발생

-> 3) Bridge: Serialized payload를 통해 메시지를 보냄

-> 4) JS : Process event 메시지를 받고 

-> 5) JS : Call native methods or update UI 또 다른 메시지를 보냄.

-> 6) Bridge : Serialized batched response를 통해 메시지를 다시 Native로 보냄

-> 7) Native : Process commands 메시지 받음

-> 8) Native : Update UI 화면 변경!

 

여기서 우리가 해야할 것은 4~5번 뿐!

다른 것들은 Expo가 다 해줌, 우리는 컴퓨터에서 JS 치는 등 4~5만 하면 됨!