본문 바로가기

App/React Native25

expo, expo(bare), react-native CLI 차이 React Native - Reat Native CLI(Expo 없이 배포) Expo (Managed Workflow) 설정할게 없어서 사용하기 쉽다. 내장된 많은 네이티브 모듈이 있다. Expo CLI를 통해 제어한다. Expo Wrapper를 포함한 Standalone 앱 배포가 가능하다. Android Studio, Xcode 필요없다. Expo (Bare Workflow) Non-Expo 앱 임포트된 Expo 패키지를 사용한다. 상대적으로 설정, 관리가 쉽다. 네이티브 모듈도 사용가능하다. Android Studio와 XCode에서도 빌드, 배포가 가능하다. React Native CLI Non-Expo 앱 Expo 패키지를 이용할 수 있다. 사용자 설정이 필요하다. 자신의 것을 만들기 좋다. 자.. 2020. 12. 28.
[React Native] 배포(expo, react-native cli) React Native - 배포 코드를 테스트하고, 정리한다. 앱 환경 / 개발 환경을 설정한다. 아이콘, 스플래시 스크린을 추가한다. 빌드 & 배포한다. Expo (Managed) app.json 설정을 통해 자동 asset 생성한다. expo publish expo build:android/ios Over the air 업데이트 Non-Expo 손수 설정 Android studio / Xcode 를 이용해서 빌드 내장된 OTA 업데이트는 없다. expo 배포 https://docs.expo.io/versions/v34.0.0/distribution/introduction/ Android $ expo build:android $ expo fetch:android:keystore $ expo upload.. 2020. 12. 28.
[React Native CLI] - Simulator 연동(android, ios) React Native CLI - Simulator 연동(android, ios) expo 를 사용하지 않고 react-native CLI로 앱을 실행하고, 빌드, 배포해보자. 일단 react native cli를 설치한다. $ yarn global add react-native-cli 또는 $ npm install -g react-native-cli 그리고 reac-native 를 초기화시킨다. 새로운 프로젝트 폴더를 만든다. $ react-native init MyReactNativeProject 1) Android 일단 안드로이드 시뮬레이터를 설치하고, react-native를 실행해보자. 참고로 mac에서 하였다. 1) 안드로이드 스튜디오를 다운받는다. 2) 우하단에 Configure 대신 SDK.. 2020. 12. 24.
[React Native] - Auth, 자동로그인, 자동로그아웃 React Native 300 - Auth, 자동로그인, 자동로그아웃 클라이언트(리액트네이티브 모바일앱)가 서버에게 인증 데이터를 보내면, 서버는 세션에서 인증 데이터를 저장하며 클라이언트에게 세션 키를 리턴한다. 무상태(stateless) 를 다루는 웹 애플리케이션은 RESTful API 또는 GraphQL API 를 이용해 세션에서 인증을 관리한다. 하지만 모바일 앱의 경우, 서버가 각 클라이언트의 인증을 관리하지 않기 대문에 다른 방법이 필요하다. 이 때 세션 대신 토큰을 이용한다. 모바일 앱이 인증 데이터를 보내면, 서버는 서버만 아는 개인키(private key)를 만들어 토큰의 형태로 모바일 앱에게 보낸다. 그러면 Redux storage 같은 곳에 이 토큰을 저장한다. 앱이 실행되는 동안 메.. 2020. 12. 23.
[React Native] 앱 기능 인증 (Authentication) 2020. 12. 21.
[React Nativ] - 비동기 데이터 가져오기 (fetch, redux-thunk) React Native 202 - 데이터 가져오기 (fetch) 앱이 실행되자마자 서버에 있는 DB데이터를 가져와서 조회하려고 한다. 예를 들면, 아마존 홈페이지를 누르고 쇼핑탭에가면 쇼핑 상품들이 쫙 뜨는 것을 구현하고 싶다. 데이터는 메모리에 있는 것이 아니라 서버(server-side)에 있기 때문에, HTTP 의 GET 요청을 통해 데이터를 받는다. 리덕스에서 프로젝트의 액션을 보자. redux 는 기본적으로 액션 객체를 디스패치한다. ({type: ACTION_TYPE } 과 같은 액션 객체) 따라서 액션 생성자는 아래와 같이 파라미터를 받아와서 바로 액션 객체를 리턴해주는 함수였다. export const fetchProducts = (products) => { return { type: SE.. 2020. 12. 21.
[React Native] redux-thunk, Http 요청, 웹서버, DB React Native 201 - redux-thunk, Http 요청, 웹서버, DB 1 React Native App 2 Web Server 3 Database 1, 2, 3을 연동해보자. 1에서 바로 3으로 연동하는 것은 보안상 매우 위험한데, 그 중간에 미들웨어 역할을 하는 웹서버를 넣어준다. 여기서는 React Native를 위한 간단한 웹서버가 필요하므로, 이런 기능을 빨리 제공해주는 구글의 Firebase 웹서버를 적극 이용한다. 데이터 상태 관리 react-redux 에서 데이터의 상태 관리를 할 때, reducer,action 을 사용했다. 여기서 action 함수만 useDispatch 를 통해 모든 영역에서 사용할 수 있었다. 하지만, 리덕스에 등록되어 있지 않은 다른 함수도 사용하고.. 2020. 12. 20.
[React Native] TextInput 마음대로 사용하기, 유효값 체크 React Native 200 - TextInput 리액트네이티브 공식 사이트 를 방문하면 TextInput 의 사용법을 자세하게 알 수 있다. setTitle(text)} autoCapitalize="sentences" autoCorrect returnKeyType="next" onEndEditing={() => console.log("onEndEditing")} onSubmitEditing={() => console.log("onSubmitEditing")} />TextInput 에 여러 아규먼트를 사용할 수 있다. 신기한 기능들이 많은데 하나씩 살펴보자 대부분은 이름에서 알 수 있다. 헷갈리는 것만 기록한다. onChangeText : 텍스트가 바뀔 때 마다 함수 적용 returnKeyType : .. 2020. 12. 16.
[React Native] 사용자가 글 수정, 삭제 React Native 105 - 사용자가 글 수정, 삭제 userProductsScreenj.js 사용자가 들어가서 상품을 수정하고 삭제하는 화면이다. 왼쪽에 DrawerNavigator로 이동할 수 있도록 만들어 놓았다. useCallback useCallback 은 함수를 재사용하고 싶을 때 사용한다. 이 때 함수 안에서 사용하는 props가 있다면 deps 배열 안에 꼭 추가 해주어야 한다. 이로써 props 가 가장 최신 상태에 있는 것을 useCallback안의 함수가 사용할 수 있게 된다. useEffect useEffect 는 상태가 변화될 때, 특정 함수를 실행시킨다. useEffect 의 두 번째 파라미터 deps에 함수를 넣을 수 있다. deps 에 특정 값을 넣게 된다면, 컴포넌트가.. 2020. 12. 15.
[Reactive Native] 주문 하기 만들기 React Native 104 - 주문하기 장바구니에 담은 목록을 주문화면으로 가져와 본다. models/orders.js class Order { constructor(id, items, totalAmount, date) { this.id = id; this.items = items; this.totalAmount = totalAmount; this.date = date; } get readableDate() { return this.date.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: &#39.. 2020. 12. 8.
728x90