axios interceptors로 토큰 리프레시 하기
사용자 인증은 많은 서비스에서 필수적인 부분이다. 사용자 인증에는 크게 세션/쿠키 인증과 토큰 기반 인증이 있는데, 대표적인 토큰 기반의 인증으로 JWT(Json Web Token)을 많이 사용한다.
2021-03-05

React Native FlatList 최적화 하기
FlatList는 많은 양의 데이터를 출력해야 할 때 유용하게 쓰이는 API 이다. 하지만 FlatList를 제대로 최적화 하지 않으면 스크롤이 느려지고 성능이 낮아지는 문제가 발생한다.
2020-10-16

React Native 캐러셀(carousel) 만들기
많은 앱/웹 서비스에서 캐러셀(carousel)을 사용해 사용자들에게 콘텐츠를 제공하고 있다. 리액트 네이티브에서 캐러셀을 구현하기 위해 react-native-snap-carousel 등의 라이브러리를 사용할 수 있지만 라이브러리 없이도 충분히 구현이 가능하다.
2020-10-09

React Native 커스텀 탭 바 네비케이션 만들기
React Navigation을 이용하여 Top Tab Bar를 커스텀 하는 방법을 알아보자.
2020-10-08

React Native 링크 프리뷰 만들기
채팅방이나 트위터, 페이스북에 공유하고 싶은 웹페이지의 url을 많이 공유하는데, 이 때 url만 표기가 된다면 내용을 알기 어렵기 때문에 해당 페이지의 썸네일, 제목, 내용 등이 미리보기 형식으로 표시해 주는 것이 필요하다.
2020-10-01

React Native 환경 설정하기
Dev 레벨에서만 개발하면 상관 없겠지만 앱을 배포하고 관리하기 위해서는 Dev, Staging, Production 등으로 개발 환경을 구분해서 운영하게 된다.
2020-09-23

RN Dark & Light Theme 적용하기
iOS 13버전 부터 기본 배경색을 검은색으로 사용하는 다크모드 기능이 추가 되면서 다크모드를 지원하는 앱이 많아졌다. 그래서 Styled-Components와 Redux-Toolkit을 사용해 다크모드를 지원하는 방법을 알아보았다.
2020-05-08

React Native 애플로 로그인 구현하기
지난해 애플 또한 애플로 로그인 하기 서비스를 시작했는데, 주목할 점은 기존 앱스토어 심사지침 상 서비스 자체 로그인 없이 소셜로그인 만으로 계정 승인이 이루어진 경우 반려 사유가 되었지만, 애플 로그인을 병행하는 경우 서드파티 로그인 만으로도 서비스가 가능하다는 점이다.
2020-04-15

React Native에서 쿠키 사용하기
리액트 네이티브에서 쿠키🍪로 인증을 기능을 구현하는 방법을 알아보기로 했다. ios와 android에서 웹처럼 자동으로 쿠키를 저장, 관리하는 방법이 있지만,,,, 네이티브 코드를 만지기엔🤢,,,, React Native에서 asyncStorage를 이용하여 수동으로 저장, 관리할 수 있는 방법으로 구현해 보았다.
2020-04-06

React Native 앱 이름 다국어 설정하기
모바일 기기의 언어 설정에 따라 앱 아이콘 아래에 표시되는 앱 이름도 다국어로 설정할 수 있는데 안드로이드와 ios에서 이를 설정하는 방법을 알아보자.
2020-03-02

React Native 파일 시스템을 사용해 이미지 캐싱하기
자주 사용하는 정적 이미지의 경우 접속 시 매번 이미지 서버에서 이미지를 가져오기 보다 이미지를 캐싱해서 사용하면 성능면에서 효율적인 경우가 있다. 그래서 파일 시스템을 이용해서 이미지를 캐싱하는 방법에 대해 알아 보았다. 📂
2020-03-01

React Native Firebase 환경설정하기
앱을 사용하는 사용자의 행동 분석이나 푸시알림 등의 서비스를 사용하기 위해서 React-Native-Firebase 모듈을 사용하여 React Native 앱에 Firebase 서비스를 연결해 사용중이다.
2020-01-27

React Native에서 카카오 소셜로그인 하기
네이버와 카카오톡 소셜로그인은 javascript나, ios, android sdk는 제공하지만 react-native를 위한 sdk는 따로 없기 때문에 native module을 사용하거나, (있다면) 관련 라이브러리를 사용해야 한다.
2019-10-25

TypeScript와 React Navigation
리액트 네이티브 프로젝트에 타입스크립트를 적용해 보기로 했는데 처음으로 맞닥뜨린 문제가 React Navigation의 screen props는 어떻게 타입으로 정의하고, 전달할지 였다. 이 문제의 해결법을 가장 기본적인 사용자 인증 플로우로 정리해 보았다.
2019-10-04

React Native X TypeScript 시작하기
TypeScript 공부를 시작했으니 이번엔 React Native에 TypeScript를 적용해보자. 먼저 프로젝트 만들기!
2019-10-03

Toast 만들어 보기
모바일에서 사용자에게 어떤 정보를 알려주기 위해 화면위에 잠깐 나타났다가 사라지는 것을 Toast라고 한다. 마치 토스트에서 식빵이 튀어오르는 것처럼 🍞.. Alert 대신 Toast를 써보려고 라이브러리를 설치해 봤는데 Modal 위에 Toast를 띄우려니 자꾸 Toast가 Modal 밑으로 숨어버려 그냥 만들어 보기로 했다.
2019-10-02

메일발송기능 적용하기
현재 진행중인 모바일 앱 프로젝트에서 앱 관련 문의사항을 메일로 보낼 수 있는 기능을 추가해 보았다. react-native-mail 모듈을 사용해 모바일에 설치되어 있는 기본 이메일 앱을 연동하는 방법이다.
2019-09-25

webView 내부에 Lottie로 애니 구현하기
이전 포스트에서 다루었듯, react native에서 소셜 로그인을 웹뷰를 사용해 구현했다. 기능 구현을 하고나니 마음에 안드는 점을 발견하게 되었는데, 소셜 어카운트로 로그인이 되고 서버에서 회원가입/로그인 작업이 되기 까지 시간이 걸리는데 그 동안 웹뷰엔 빈 화면만 표시되는 것이다.
2019-09-25

KeyboardAvoidingView 적용하기
처음 리액트 네이티브로 개발을 하고 디바이스로 테스트 할 때 가장 당황했던 것이 바로 키보드에 관한 것이었다. 시뮬레이터로 뷰를 보면서 개발할 때 하드웨어 키보드를 쓰다 보니 실제 모바일 기기에서 키보드가 올라왔을 때의 상황을 인지하지 못한 것이다.
2019-09-24

React Native 주간 달력 구현하기
월간 달력이 아닌, 주간달력을 구현해야 하는데 캘린더 라이브러리는 거의 월간단력을 지원해주고 있었다. 그래서 기초부터 아예 만들어버린 주간달력!
2019-09-10

React Native 커스텀 Tab Bar 만들기
현재 진행중인 프로젝트에서 상단 탭바 구현이 필요한데, React Navigation에서 제공하는 것 만으로는 디자인적으로 구현이 어려웠다. 그래서 커스텀 Tab Bar 를 적용하는 방법에 대해 알아보았다.
2019-09-09

React Native 로컬 푸시알림 구현
현재 진행중인 React Native 앱 프로젝트에 매일 일정한 시간에 푸시알림이 오는 기능이 필요해, React Native Push Notifications 모듈료 로컬 푸시알림을 구현해 보았다.
2019-09-08

React Navigation 커스텀 헤더의 back button
React Navigation의 기본 헤더가 지금 개발하고 있는 앱의 느낌과 맞지 않아 커스텀 헤더를 구현해 보았다. Stack Navigation에서 헤더의 가장 중요한 역할 중 하나가 back button인데, 커스텀 헤더에선 back button의 네비에이션을 어떻게 주어야 할까?
2019-08-22

NavigationService로 스크린 전환하기
React Navigation에서 screen에서 screen 사이를 오가는건 간단하지만 리스트나 컴포넌트에서 바로 스크린으로 넘어가긴 어렵다. 이때 사용할 수 있는 것이 NavigationService이다.
2019-08-22

React Native에서 Redux-Saga 적용하기
이전 프로젝트에서는 API 통신과 같은 비동기 처리를 위해 redux-thunk 미들웨어를 사용했었는데, 여기저기서 redux-saga가 좋다, 기회가되면 한 번 써봐라고 해서 도전! 해보았다.
2019-08-20

React Native에서 Lottie 사용하기
모바일이나 웹페이지에 애니메이션을 구현하기 위해서 gif를 사용해 왔는데, gif는 용량이 무겁고, 해상도 대응이 어렵다는 단점이 있다. 이에, gif의 훌륭한 대체재로 'Lottie'라는 라이브러리가 주목받고 있다고 하여 React Native에서 사용해 보았다.
2019-08-18

정렬과 배치
은근히 헷갈리지만 간단한 flexDirection, justifyContent와 alignItems를 활용한 정렬과 배치에 대해 알아보자.
2019-08-17

Passport와 JWT를 이용하여 Auth 구현하기[3]
앞선 포스팅을 통해 소셜로그인을 위한 서버쪽 로직은 완성되었다. 이제 클라이언트 쪽(React Native)은 어떻게 구현하는지 알아보자.
2019-08-15

리액트 네이티브 팝업 만들기
리액트 네이티브의 Modal 컴포넌트를 사용하면 간단한 팝업창을 만들 수 있다.
2019-08-07

리액트 네이티브에 폰트 설정하기
리액트 네이티브에서 커스텀 폰트를 설정하는 방법을 알아보겠다.
2019-07-21

안드로이드 에뮬레이터에 Device 추가하기
기본 안드로이드 애뮬레이터에는 갤럭시 폰 기종이 추가되어 있지 않기 때문에 갤럭시 기종으로 애뮬레이터를 실행하기 위해서는 스펙을 입력하여 Virtual Device를 새로 생성해야 한다.
2019-06-24

condition에 따라 style에 변화주기
condition/state에 따라 간단하게 style에 변화를 줄 수 있는 방법!
2019-06-24

Platform에 따른 Style 적용하기
React Native의 가장 큰 장점은 ios와 android를 동시에 개발 할 수 있다는 것이다. 하지만 각 운영체제별로 다르게 설정해줘야 하는 기능이 있다. 운영체제에 따른 Style을 다르게 적용하려면 어떻게 해야할까?
2019-06-24

React Native 네비게이션 설치하기
대부분의 모바일 앱은 한 스크린으로만 이루어져 있지 않기 떄문에 navigator를 사용하여 스크린 간 이동을 해야한다. React Navigation과 React Native Navigation이다.
2019-05-31

React Native 시작하기(React Native CLI)
ios와 안드로이드를 한 번에 개발할 수 있는, React를 알면 쉽게(😉) 시작할 수 있는 React Native를 시작해 보자.
2019-05-30