본문 바로가기

반응형

전체 글

(102)
[React] React -Socket을 이용한 채팅기능 socket이란 뭘까 ? 우리(Client)는 여태 서버(Server)의 데이터가 필요할때 서버에게 요청하고 통신하여 사용하였다. 2020/10/15 - [React] - React와 Express연동하기 1 2020/10/15 - [React] - React와 Express연동하기 2 위글처럼 말이다. 이것이 HTTP통신이다. 그러나, socket통신은 특정 포트를 통해 실시간으로 양방향 통신을 하는 방식이다. 둘의 아주 큰 차이는 요청할때만 켜지느냐(:HTTP) 항상 실시간으로 켜지느냐(:socket), client가 요청하고 server가 보내주는 단방향 통신(HTTP)냐, server와 client가 같이 서로 보내는 양방향 통신이냐(socket) 이다. socket은 매우 유용하다. 오늘 해본 ..
[React Native] Async Storage - setItem, getItem, 중복확인 검사 아이디, 비번, 닉네임 변경 부분을 맡았따. 변경 후에 비번과 닉네임은 async storage부분에도 변경을 해줘야 했다. id는 asyncstorage를 삭제하고 다시 로그인하라고 로그인 페이지로 보낸다 그래서 해보았다 1. 기본적인 코드 import { AsyncStorage } from 'react-native'; //Library //Persisting data _storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } }; //Fetching data _retrieveData = async (..
[React Native] 바텀 내비게이션 및 스플래쉬화면 적용하기! 현재 소개팅앱을 만들고 있다. 거기에 바텀 내비게이션이 필요했다. 그래서 만들어 보았다. 1. createBottomTabNavigator모듈 설치 npm install @react-navigation/bottom-tabs 2. 코드 1) 기본적인 예시 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( ); } 위와 같이하면 아래에 Home탭과 Setting탭만이 생긴다. 다른곳은 갈수 없다. 그렇다고 바텀에 다 때려박으면 밑에 메뉴가 너무 많아 난잡해질것이다. 2)나의 코드 import Login f..
[React Native] MAC/IOS 알람 구현하기 3(Push notification)-firebase 2020/12/10 - [React Native] - [React Native] MAC/IOS 알람 구현하기 1(Push notification)-firebase [React Native] MAC/IOS 알람 구현하기 1(Push notification)-firebase 1. 프로젝트 생성 npx react-native init [파일명] 예를 들어 npx react-native init hyukpush 2. 모듈 다운 # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-fi.. coding-hyeok.tistory.com 2020/12/10 - [React Native] - [React ..
[React Native] MAC/IOS 알람 구현하기 2(Push notification)-firebase 2020/12/10 - [React Native] - [React Native] MAC/IOS 알람 구현하기 1(Push notification)-firebase [React Native] MAC/IOS 알람 구현하기 1(Push notification)-firebase 1. 프로젝트 생성 npx react-native init [파일명] 예를 들어 npx react-native init hyukpush 2. 모듈 다운 # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-fi.. coding-hyeok.tistory.com 1. Install the messaging module npm i..
[React Native] Android 알람 구현하기 2(Push notification)-firebase 2020/12/10 - [React Native] - [React Native] Android 알람 구현하기 1(Push notification)-firebase [React Native] Android 알람 구현하기 1(Push notification)-firebase 현재 진행중인 앱 프로젝트에서 메세지가 오거나 매칭이 완료되면 알람이 오는 기능을 구현하고 싶었다. 그래서 한번 배워보았다. firebase를 사용하였따 1. 프로젝트 생성 npx react-native init [파일 coding-hyeok.tistory.com 1. Install the messaging module npm install --save @react-native-firebase/messaging 2. install the..
[React Native] MAC/IOS 알람 구현하기 1(Push notification)-firebase App Push 기법은 네가지가 있다. 1. Expo Push Notification 2. FCM(Firebase Cloud Notification) + APNS(Apple Push Notification Service) 3. FCM only 4. AWS Amplicy 이다. 나는 2번을 사용할 것이다. Push가 언제 작동해야 하나? 3가지 경우가 있따. Foreground 상태 : 앱이 현재 실행되고 있을 떼 Background 상태 : 앱이 실행되어 있지만 화면에서 벗어나 있을 때 Quit 상태 : 앱이 꺼져 있을 때 1. 프로젝트 생성 npx react-native init [파일명] 예를 들어 npx react-native init hyukpush 2. 모듈 다운 # Using npm npm i..
[React Native] Android 알람 구현하기 1(Push notification)-firebase 현재 진행중인 앱 프로젝트에서 메세지가 오거나 매칭이 완료되면 알람이 오는 기능을 구현하고 싶었다. 그래서 한번 배워보았다. firebase를 사용하였따 1. 프로젝트 생성 npx react-native init [파일명] ex) npx react-native init hyukpush 2. 'local.properties' 파일 생성 또는 Android Studio로 들어가면 자동생성됩니당 android폴더에 'local.properties'파일생성하고 sdk.dir=/Users/hyukyun/Library/Android/sdk 자신의 sdk파일 경로를 써주면 된다 3. firebase 모듈 설치 # Using npm npm install --save @react-native-firebase/app # ..

반응형