#0 Introduction

#0.1 Requirements

1. node 설치 (npm 같이 들어가 있음)

 

2. npm install -g expo-cli 명령어 실행

 

3. 맥 유저는 Xcode / 윈도우 유저는 안드로이드 스튜디오 설치

 

4. expo client (모바일) 다운 로드 - 위 시뮬레이터 없이 모바일로 테스트 가능

 

#0.2 Expo vs RN CLI

 

EXPO와 REACT NATIVE CLI 중에 무조건 EXPO를 사용하자. EXPO 단점은 NATIVE 파일에 접근할 수 없다는것인데, 실제 접근할 일이 많이 없다. 그냥 EXPO 를 쓰자.

 

#0.3 Creating the Project

1. 원하는 위치에 expo init jh-weather 로 프로젝트 폴더 생성 및 깃헙 추가

2. npm start 명령어 실행 하면 새창이 하나 뜬다.

 

#0.4 Getting to know Expo + #0.5 How does React Native Work?

1. 모바일 or 시뮬레이터를 연동 시키면 된다.

 

2. 구동원리, 기본 html이랑 비슷하지만, 조금 다르다. 리액트 네이티브는 순수 네이티브 언어가 아닌, 순수 네이티브와 ios혹은 안드로이드 중간 브릿지 역할을 해주는 정도로 보면 된다. 따라서, 컨텐츠 위주의 앱에는 적합하지만, 3d 게임,카메라 어플 등과 같이 뭔가 느낌이 하드웨어하고 깊숙한 느낌의 앱에는 적합하지 않다. 하지만 내가 할려는 거는 컨텐츠 위주이기 때문에 아주 딱이다!. 아래 코드 내용을 눈으로 흐름을 읽어보자. 가장 기초적인 샘플 구조이다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello every one!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'black'
  }
});