Firebase는 구글에서 만들어진 BAAS(Backend As A Service)이다. 모바일에서 필요한 저장장치, 테스팅 푸시 등 거의 모든 기능을 제공한다. RealTime Database 실시간으로 접근할 수 있는 database NoSQL의 형태로 구성되어있음 실질적으로 저장되는 값은 key와...

데이터를 저장하고 가져오는 방법은 매우 다양하다. 그중에서 AsyncStorage, Fetch API, redux-persist에 대해 살펴보려한다. AsyncStorage key값으로 string을 저장하며, 웹의 cookie와 비슷한 역할 android: SQLite에 저장 ios : 네이티브 코드로 저장로직이 작성되어 있음 ...

결과 화면 검색 API naver Developers에서 검색 api사용을 위해 application을 등록한다. 클라이언트 id와 암호를 메모해두고 다음 사용방법을 참고하여 api를 활용한다. 요청 url https://openapi.naver.com/v1/search/news.json에 get메서드를 사용하면 된다고 나와있다. clie...

결과 화면 Recoil atom을 먼저 작성한다 import { atom } from "recoil"; export const atomLinkList = atom({ key: "MAIN/LINK_LIST", default: { list: [], }, }); useSetRecoilState()를 사용하여 저장할 값들을 입...

Context API는 react 16.3버전부터 지원하고 있다. props-drilling을 제거하기 위해 도입되었다. 간단한 전역변수를 사용하거나, 간단한 상태관리가 필요할 때 많이 사용한다. 구성요소 Provider : 값을 제공해 주기 위해 root component로 사용한다. Consumer : 제공된 값에 접근할 수 있도록...

먼 이웃 컴포넌트에게 prop을 넘길때 prop-drilling이 발생하게 되는데, 이를 해결하기위해 global한 전역 상태 관리 도구인 Redux를 사용할 수 있다. Flux Redux에는 Flux의 개념이 포함되어 있다. Flux는 facebook에서 만든 오픈소스 라이브러리이지만, 현재는 사용하지 않고있다. action, dispatch...

결과 화면 screenOptions navigator의 screenOptions로 header와 하단바를 커스텀할 수 있다. import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import FavoriteImageListScreen from "../screen/F...

react native에서 유용하게 사용하는 hook library들을 정리해보려 한다. Hook의 기초 내용은 전에 작성한 이 글에서 확인하면 된다. react-native useWindowDimensions 화면의 사이즈를 얻을 때 사용 useBackHandler android에서 h/w back키를 눌렀을 때 처...

컴포넌트 사용 이유 컴포넌트를 만드는 이유는 재사용성을 위함이다. 컴포넌트화 하지 않고, 서비스를 만들면 너무 많은 양의 코드로 유지보수의 난이도가 증가한다. 그러나 너무 잦은 컴포넌트화는 예상하지 못한 변경점이 생겨 버그로 이어질 수도 있다. atomic design pattern 작은 단위부터 큰 단위까지의 컴포넌트를 조합해 만들어가는 디...

react-navigation은 react-native에서 사용하는 화면이동을 위한 라이브러리이다. navigator와 screen으로 구성되어 있다. 종류 stack Navigator 자료구조 중 stack은 제일 마지막에 들어온 게 제일 먼저 나가는 방식이다. 이 stack Navigator또한 제일 마지막에 켜진 화면이 제일먼저 사라진다...