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

리덕스를 사용하다 보면 급격하게 늘어나는 코드 양과 그에 비례한 복잡함에 불만이 생기기도 한다. 이러한 단점을 보완한 Redux Toolkit이 공개 되었는데, Redux를 사용하기에 필수적인 로직들을 포함하고 있어 단순하지만 강력한 도구이다.

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

React Navigation을 이용하여 Top Tab Bar를 커스텀 하는 방법을 알아보자.

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

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

이번엔 Apollo Client에 카카오 로그인을 적용해 보겠다. 카카오 로그인 REST API를 사용할 것이며, 전체적인 플로우는 아래와 같다.

이제 서버를 구현할 때 기본이 되면서 보안상으로 아주 중요한 역할을 하는 인증/인가를 구현해 보려고 한다. 기본적으로 Bearer에 jwt 토큰을 적용한 인증 방법을 사용할 것이다.

기본적인 웹 구축이 되었으니 GraphQL을 적용해 볼 차례이다. 이를 위해 Apollo라는 라이브러리를 사용할 건데, GraphQL API 콜을 도와줄 뿐만 아니라 캐싱과 상태관리 등 다양한 이점이 있어 🚀 Apollo Client를 적용해 보기로 했다.

기본적인 GraphQL API 서버 구축이 되었으니 이제 db을 연결해 볼 차례이다. 여기서는 db는 MySQL을, ORM은 TypeORM을 사용할 예정이다. Sequelize가 더 익숙하지만 TypeGraphQL을 사용하게 되면서 TypeORM을 사용했을 떄 훨씬 생산성이 높아지기 때문에 TypeORM을 사용해 보기로 했다.