최고의 개발자 (목표)

개발을 얼마 하지도 않았는데 갑자기 react native expo Attempt to invoke virtual method 'boolean abi .facebook.. 라는 에러가 떴다.

구글링을 통해 찾아보니, 이 오류는 안드로이드 폰에서만 발생하는 문제이고, Expo 앱의 2.24.1 버전에서 발생한다는 것을 알았다. 따라서 Expo 앱을 2.23.2로 다운 그레이드 하는 것이 필요했다.

https://apkcombo.com/ko/expo/host.exp.exponent/ 이 사이트에 들어가서  Expo 앱의 2.23.2 버전 apk를 다운 받았다.

그리고 핸드폰에 있는 Expo를 삭제한 뒤, 설정 > 생체 인식 및 보안 > 출처를 알 수 없는 앱 설치 에 들어가 허용을 해주었다. 그 후, 다운 받은 apk를 실행했다.

왜 새로운 버전의 Expo에서 안드로이드만 오류가 나는지 모르겠다.

Expo 앱이 알아서 업데이트가 되는 바람에 다른 방법을 찾아야했다.

expo 버전을 45.0.1로 업데이트해서 문제를 해결했다.

expo upgrade

1. 완료한 것

- figma로 디자인

- notion 정리

- start page 완성

- start page에서 버튼 누르면 로그인 페이지로 이동

2. 코드

페이지에서 페이지간 이동을 하는 방법을 구글링을 통해 찾아봤었는데 class component로 쓰여진 글이 많아서 function component로 바꿔서 사용해보았다. (사실 function component가 훨씬 익숙하다,,)

StartPage.js에서 시작하기 버튼을 누르면 Login.js에서 넘어갈 수 있도록 구현했다.

① App.js

- 설치할 것

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

/*App.js*/
import React, { Component } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import StartScreen from "./src/StartPage";
import LoginScreen from "./src/Login";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        // header를 감춘다
          options={{ headerShown: false }}
          name="StartPage"
          component={StartScreen}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="Login"
          component={LoginScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

코드의 순서에 따라 달라진다. 위에 있는 page가 가장 먼저 실행된다.

② StartPage.js

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { Image } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function StartPage({ navigation }) {
  return (
    <View>
      <Text>CHERISH PET!</Text>
      <StatusBar style="auto" />
      <View>
        <TouchableOpacity onPress={() => navigation.navigate("Login")}>
          <Text>시작하기</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

간소화한 코드로, 오늘 완성한 코드와는 다르다. TouchableOpacity의 onPress 속성으로 눌렀을 때 "Login" 페이지로 넘어가도록 했다.

③ Login.js

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { Image } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function Login({ navigation }) {
  return (
    <View>
      <StatusBar style="auto" />
      <View>
        <Text>CHERISH PET!</Text>
    </View>
  );
}

※ 참고한 사이트

https://dlee0129.tistory.com/15

#1, #2 Weather App

2021 동계 모각코 1월 17일 결과와 2021 동계 모각코 1월 19일 결과 를 이어서 정리한다.

* ScrollView
  내부에 컴포넌트와 뷰들을 자식으로 담을 수 있는, 화면의 스크롤을 사용할 때 쓰는 컴포넌트
- 스크롤 방향은 horizontal을 통해 가로 또는 세로로 변경
- contentContainerStyle={{styles.변수}}
- pagingEnabled 속성으로 페이지처럼 만들 수 있음
- showsHorizontalScrollIndicator={false} 로 스크롤 바를 없앨 수 있음.
- indicatorStyle="white"으로 스크롤바의 색상을 변경할 수 있음(ios에서만 작용)

- 참고 사이트 : https://reactnative.dev/docs/scrollview

* Dimension
  화면 크기를 얻는 API

* Location
- expo install expo-location 입력
- Location.requestForegroundPermissionAsync()으로 유저에게 위치 접근 권한 동의 알림창 보여줌
- Location.getCurrrentPositionAsync()으로 user의 위도와 경도를 알아냄.
- Location.reverseGeocodeAsync()으로 위도와 경도를 이용해 주소를 가져옴.
- openweatherorg의 api를 이용해 날씨를 가져옴

* toFixed()
ex) (12.12).toFixed(1) -> 12.1

* expo/vector-icons
- icons.expo.fyi 사이트에 가면 아이콘 확인 가능

※ 코드는 https://github.com/leecr1215/Nomad_Weather에서 확인할 수 있습니다

#3, #4 Todo App (Work Hard Travel Hard App)

* react native에만 있는 속성
- paddingVertical
- paddingHorizontal

* button 관련 컴포넌트
① TouchableOpacity
- 누르는 이벤트를 들을 준비가 된 View
- 터치하면 래핑된 View의 opacity가 감소하여 흐리게 표시됨
- View가 터치에 적절하게 반응하도록 하는 래퍼

② TouchableHighlight
- 클릭한 요소의 배경색이 바뀌도록 함
- underlayColor

  원하는 배경색을 설정할 수 있는 속성
- onPress

  유저가 Touchable을 눌렀을 때 실행되는 이벤트

  onPress={이벤트명}
- onLongPress

  유저가 Touchable을 길게 눌렀을 때 실행되는 이벤트

③ TouchableWithoutFeedback
- Touchable 컴포넌트이고 화면의 가장 위에서 일어나는 탭 이벤트를 듣는 컴포넌트
- UI 변화를 보여주지 않음

④ Pressable
- disable 속성 있음
- hitSlope 속성 : 요소 바깥 어디까지 탭을 누르는 것을 감지할 것인지 정할 수 있음

* text input 관련 속성
- placeholder
- onFocus
  화면을 터치하면 쓸 준비가 된 상태
- onChangeText : 입력한 Text를 받을 수 있음
- keyboardType 종류 :  number-pad, email-address 등
- returnKeyType 종류 :   send, next, done, go 등
  -> 키보드의 return 버튼 상태를 변경할 수 있음
- returnKeyLabel(안드로이드만) : return 버튼에 쓸 text를 마음대로 정할 수 있음
- secureTextEntry : 글씨가 안보이고 ●으로 보임
- multiline : 한 줄 이상 쓰는 경우에 사용
- autoCapitalize: 대문자를 지정
- sentences: 첫 글자가 대문자로 입력됨
- words: 다 대문자로 입력됨
- onSubmitEditing : 완료 버튼 눌렀을 때 발생하는 이벤트(함수)

* object assign
: object를 가져다가 다른 object와 합쳐주고 새로운 object를 리턴

* Object로 map 쓰는 법
- Object.keys(object 이름) => key들을 array로 반환
- 즉 Object.keys(object 이름).map()으로 사용

* AsyncStorage
- 다운
expo install @react-native-async-storage/async-storage
- 사용
await AsyncStorage.setItem(key, value)
이때 value는 string 형태

- 참고 사이트 : https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/

* Alert.alert()
- 확인 알림창
- 사용자에게 물어볼 때 사용
- text 및 버튼 넣는 것 가능
- 버튼을 눌렀을 때 실행할 함수 적용 가능

* publish app
- QR코드 스캔으로 앱 확인 가능

* asserts 폴더
- 앱이 로딩될 때 보여주는 아이콘 설정
- 앱을 나타내는 아이콘 설정

* build 하는 법

방법 1. https://docs.expo.dev/classic/building-standalone-apps/
- expo build:android or expo build:ios 입력
   -> 엔터 계속 누르기
- 그 후 나오는 링크로 들어가서 build 현황 확인
- expo build:web 으로 웹 빌드

방법 2. React Native for Windows + macOS
React Native로 네이티브 Windows, macOS 앱을 빌드할 수 있다.
https://microsoft.github.io/react-native-windows/

방법 3. viroReact
ViroReact는 React Native를 사용하여 AR/VR 애플리케이션을 빠르게 구축하기 위한 오픈 소스 개발자 플랫폼

AR 및 VR 앱은 single code를 기반으로 함

https://viromedia.com/viroreact

* expo의 문제점
- 앱 설정에 관해서 많은 설정을 할 수 없음
   -> 기초적인 파일들에 접근이 불가능함
- js와 json이 아닌 다른 파일에 접근해야할 때 불편함
- npm run eject를 하면 expo에서 꺼내짐

* 앱 아이콘

ppt로 직접 그렸습니다. 필요하신분은 사용하셔도 됩니다.

※ 코드는 https://github.com/leecr1215/WorkHardTravelHardApp에서 확인할 수 있습니다

* display 

https://d2.naver.com/helloworld/8540176

* select option

https://wazacs.tistory.com/31