라벨이 react-native인 게시물 표시

[react-native]앱이 꺼져도 데이터를 보존하는 방법

이미지
   앱을 완전히 껐다가 켰을 때, 다시 로그인해야 하면 참 귀찮아진다. 사용자들의 편의를 위해서 요즘 앱들은 껐다가 다시 켜도 로그인되어 있는 화면을 다시 보여주곤 한다. 그렇게 할 수 있는 것은, 앱이 꺼지기 직전에 사용자가 로그인이 되어 있었는지 체크 한 후, 로그인한 적이 있으면(아직 로그아웃하지 않았다면) 바로 메인 화면으로 보내는 로직을 사용하기 때문이다.  그러기 위해선, 앱이 꺼져도 저장/관리한 데이터는 계속 사용할 수 있는 AsyncStorage 를 사용해야 한다. 1. vscode 터미널에서 A syncStorage 설치하기. expo install @react-native-async-storage/async-storage AsyncStorage는 react-native에서 가져와 사용할 수 있는 라이브러리로, 주로 이럴 때 사용한다.   1) 로그인 후 앱을 껐다 켰다 ⇒ 로그인이 되어 있으면 바로 메인 화면 보여주기   2) 글을 작성하다 페이지를 이탈했다 ⇒ 작성 중이던 글을 가져오기   3) 사용자가 좋아요를 눌렀던 게시글이 있다 ⇒ 매번 서버에서 가져오지 않고, AsyncStorage에서 꺼내 관리하기  이렇게 앱이 꺼져도 보존되면 편리한 데이터들을 AsyncStorage에 담아 관리하곤 한다. 2. A syncStorage 사용하기. 로그인했을 때 AsyncStorage 통에 로그인한 사용자 이메일을 저장한다. 그럼 이 통을 살펴볼 때 사용자 이메일이 있으면 로그인 한 적이 있다는 뜻이고, 로그아웃했을 때 AsyncStorage 통에 든 이메일을 지운다. 그럼 로그아웃 시 이 통을 조사했을 때, 아무것도 안 나오는 것이다. 순서로 살펴보자면,   1) SignInpage 에서 화면이 그려진 다음 useEffect 가 실행된다   2) useEffect 에서 AsyncStorage 속 session...

[react-native]움직이는 배너만들기-애니메이션

[스파르타 코딩클럽 | 앱개발 플러스 2주차 수업] 애니메이션-움직이는 배너만들기 리액트 네이티브에서 직접적으로 애니메이션 기능을 제공하지만, (링크) 이미 또 구현을 다 해놓고 쓰기만 하라고 하는 도구들도 너무나 많다. (링크) 가만히 있는 배너를 재미있게 꾸미기 위해 react-native-animatable  이란 라이브러리를 사용하여 배너를 움직이게 바꿔보았다.  우선 react-native-animatable 을 다음 명령어로 vscode 터미널에 입력하여 설치하도록 한다. yarn add react-native-animatable 현재 제작중인 앱의 MainPage.jsx 에 다음과 같이 코딩하니 위 화면과 같이 puls 로 동작하는 애니메이션이 만들어졌다. import React , { useState , useEffect } from 'react' ; import { StyleSheet , Image , View } from 'react-native' ; import { Col , Row , Grid } from 'react-native-easy-grid' ; import { Container , Header , Content , Left , Icon , Right , Text , Button , } from 'native-base' ; import CardComponent from '../components/CardComponent' ; import HeaderComponent from '../components/HeaderComponent' ; import * as Animatable from 'react-native-animatable' ; const data = require ( '../data.json' ); export default functio...

[react-native] JDK 설치

이미지
 react-native와 expo로 앱을 만든후 배포를 위해 expo build:android 명령을 실행했는데, 떡하니 발생한 오류... 빨간 글씨들이 이젠 낯설지가 않다.ㅎㅎㅎ  apk 생성은 되었지만 키 저장소가 생성되지 않았다, 자바 런타임 문제다 뭐 이런 내용...  알아보니 M1 mac에 자바가 깔려있지 않아서..라는데, 처음에 개발환경 설정할때 Homebrew, nodejs 등 전부 무사히 설치했던 것 같은데, 참 이상하다 라는 생각이 들었지만 뭐 어떡하리, 안됐다면 다시 해줘야지. JDK 설치를 위해 Homebrew 명령어를 실행, brew tap AdoptOpenJDK/openjdk 그러나  zsh: command not found: brew  라는 메세지가 출력되었다. 산넘어 산이라던가... Homebrew 설치하기 (소꿍님의 블로그를 참고하여 해결함. 고마우신 블로거님들이 참 많으심ㅎㅎ) 다시 homebrew 명령어를 실행, brew tap AdoptOpenJDK/openjdk 무사히 설치됨을 확인하고 brew cask install adoptopenjdk8  명령을 실행, ...했더니   Error: Unknown command: cask   라는 메세지 출력, 또 산인가..ㅎ; 모를땐 구글링이지.. 구글링 결과 명령어 사용법이 변경되었다고 한다.   brew install --cask adoptopenjdk8   명령을 실행, 무사히 설치가 완료되고    java -version  명령어로 java 버전을 확인할 수 있다. openjdk version "1 .8 .0_292 " OpenJDK Runtime Environment ( AdoptOpenJDK )( build 1 .8 .0_292-b10 ) OpenJDK 64 -Bit Server VM ( AdoptOpe...