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

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

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

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

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

이전 포스팅에서 Express.js 환경에서 passport를 사용하여 자체회원 및 소셜회원의 회원가입과 로그인, 그리고 리액트 네이티브에서의 소셜로그인을 구현해 보았다. 이제 남은 것은 로그인 시 발급받은 토큰으로 로그인 상태를 유지하는 미들웨어를 구현하는 것이다.

앞선 포스팅을 통해 소셜로그인을 위한 서버쪽 로직은 완성되었다. 이제 클라이언트 쪽(React Native)은 어떻게 구현하는지 알아보자.

함수 내에서 정의되어 함수가 실행되는 동안 존재, 호출되는 변수를 지역변수(Local Variable)라고 하며, 이는 그 변수가 속한 함수 외부에서는 참조할 수 없다. 반면, 전역에 정의되어 함수 내외부에서 참조할 수 있는 변수를 전역변수(Global Variable)라고 한다.

이전 포스팅에서는 passport를 사용하여 자체 회원가입과 로그인을 구현해 보았다. 이제 소셜 로그인을 구현해 보자!

요즘은 대부분의 서비스가 자체 사이트 회원가입과 로그인 뿐만 아니라 구글, 페이스북 등 기존 유저가 가지고 있던 어카운트를 활용하여 로그인 하는 소셜로그인 서비스를 제공한다.