강의 주소: https://www.youtube.com/watch?v=0-S5a0eXPoc&t=101s

build 하는 2가지 방법

1. React Native CLI
2. Expo CLI : 간단하게 react navtive를 build 할 수 있도록 도와주는 tool(javascript package)/ React JS의 CRA같은 것

• publish 방법
  : Metro bundler 사이트에서 publish 메뉴 클릭
  : terminal에서 expo publish
• Expo에 publish하면, 고정 public web 주소를 통해, expo client앱을 이용하여 누구나 앱을 실행시킬 수 있음

설치 순서 (with Expo)

1. npm install -g expo-cli
2. expo init 프로젝트명
3. 'blank'로 선택: 기본적인 프로젝트 파일들이 구성되어 있고, iOS나 android 폴더가 따로 생성 되지 않음 (쉽고 빠르게 시작 가능)
   
4. npm start
   : 최초 접속하는 Metro Bundler는 one page application으로 compile하는 것을 관장
5. 빌드하고 싶은 디바이스를 선택(iOS, android, web, expo 등)
   : simulator에서 developer menu 보려면, iOS 는command + B', 안드로이드는 command + 'M'임 (실제 디바이스에서 보려면 흔들면 나옴)

핵심 컨셉(개념)

Core Components and API

View

: HTML의 div와 같은 역할
: View 대신, SafeAreaView를 사용하면, notch 부분에 콘텐츠가 겹쳐보이는 문제 방지 가능 (자동으로 padding 등을 넣어줌) => iOS에서만 적용, android X

Text

: NumberOfLines ={2} 속성은 보여지는 텍스트 라인의 줄 수를 정할 수 있음

Image

:(Local) <Image source={require('./assets/favicon.png')}></Image> 식으로 이미지 삽입 가능/ require는 reference 값을 변환하여 반환(위 경우, assets 폴더내에 위치한 숫자(2)를 반환)
:(Remote) <Image source={{ width: 200, height: 300, uri: 'https://picsum.photos/200/300', }} /> 식으로 작성
: Local의 경우 require 함수가 자동으로 metadata를 읽어와서 width와 height를 따로 설정할 필요가 없지만, uri로 가져오는 경우는 반드시 width와 height 값을 입력해야 함

Button

: title 속성(string)을 반드시 넣어야 함

Touchables

: Text component는 속성을 가지나, image component는 가지고 있지 않으므로, Tochables component를 활용하는 것임
: TouchableWithoutFeedback은 사용자에게 터치에 대한 피드백을 주지 않음
:TouchableOpacity는 사용자에게 터치될 때 opacity가 변화하는 걸 보여주는 태그
:TouchableHeighlight는 터치될 때 약간 어둡게 깜박이는 효과 보여줌

Alert

: alert 창을 customizing 가능
: Alert.prompt를 선택하면 prompt창 띄울 수 있음

기타

RN에서 이벤트 실행

: 예를 들어, onPress{() => } 식으로 터치 이벤트 붙일 수 있음

StyleSheet

• 왜 굳이 StylesSheet.create를 통해 style을 적용시키는가?

1. 속성 명칭에 대한 유효성 검사를 해줌
2. React Develoment Team에서 이걸 사용하는 경우 optimization 해주는 기능을 부여하려고 함

• 여러 StyleSheet 파일을 referencing 하기 위해서는 [1, 2]식으로 array 형태로 나열하면 되고, 나중에 오는게 앞에 스타일에 overwrite됨
• 별도 파일로도 뺄수도 있지만, convention은 해당 component바로 아래에 위치시켜서 수정하기 쉽도록 하고 있음

Platform

• OS 별로 적용되는 부분이 다른 경우가 있어, 개별적으로 컨트롤 해야할 수있음
• paddingTop: Platform.OS === 'android' ? 50 : 0,식으로 하면, OS가 android일 경우에만 padding top 값을 부여할 수 있음
• paddingTop: Platform.OS === 'android' ? StatusBar.currrentHeight : 0, 식으로, StatusBar 모듈을 import하여, 기기별로 다른 statusbar의 높이를 자동 계산하여 padding 값을 부여할 수 있음

Desity Independent Pixel

• phisical pixels = DIPs * Scale Factor
  

Orientation change detection

• width와 heigth가 스마트폰 방향에 따라 유연하게 바뀌게 하기 위해서 orientation 변화를 감지해야함
• import { useDimensions, useDeviceOrientation, } from '@react-native-community/hooks';를 통해, 가져온 objects를 이용하여, 감지할 수 있음

Flexbox

• alignContent는 여러 줄일때 전체 영역이 화면의 어디에 배치할지를 정의, alignItems는 개별 하나의 줄에서 어디 기준으로 하나의 row에 속하는 elements를 배치할지를 정의하는 것

position

• React Native의 기본 position default 값은 "relative"