(이전 블로그에서 포워딩해온 포스트)
지난 포스트에서 언급한 듯이 React Hooks이 정식 릴리즈되었다.
이후 계속해서 훅에 대한 공부를 진행하기 위해 요즈음 제일 애정을 갖고 있는 'GraphQL'과 'React hooks'를 함께 사용하여 유명한 메신저 서비스인 Slack의 일부 기능만을 클론해보았다.
해당 프로젝트를 진행하며 학습한 부분과 프로젝트에 대한 정보를 알아보자.
React-Apollo-Hooks
React Hooks이 출시가 됨으로써 함수형 컴포넌트로 서비스를 개발할 수 있게 됨에 따라 GraphQL 쿼리를 이에 맞게 호출할 수 있도록 React-Apollo-Hooks 패키지를 사용하였다.
주요 쿼리인 Query, Mutation, Subscription 형태에 맞는 useQuery, useMutation, useSubscription 함수 등이 포함되어 있으며 함수형 컴포넌트의 특성에 맞게 작성된 패키지라 계속해서 만족한 패키지 였다.
ReadQuery & WriteQuery on Cache
Apollo-client에서 쿼리에 대한 캐쉬를 다루는 내용을 학습했다.
주로 Subscription 이후 변경되는 데이터에 대해 캐쉬를 통한 동기화를 하는 부분에 적용해보았다.
ElephantSQL
본래 해당 사이드 프로젝트는 BE & FE 모두 가벼운 레벨로 배포하려 하였으나 Database 지원에 어려움을 겪어 관련 정보를 찾던 중 PostgreSQL을 클라우드 환경에서 지원해주는 ElephantSQL에 대한 정보를 얻어 적용해보았지만 너무나도 좋지 않은 성능에 곧바로 다른 대책을 준비했다.
마무리
결국 BE & FE 에 대한 내용은 Github 에만 남겨두기로 하고 대신 조금 기능이 덜어내 누구든 쉽게 사이드 프로젝트를 체험해볼 수 있도록 Database 없이 LocalStorage에 데이터를 저장하여 이용이 가능한 로컬 프로젝트를 하나 더 개발하였다.
(Screenshot)
체험해보기 (Local Ver): https://dev4us.github.io/slack-apollo-hooks_frontend_local/
BE Repo: https://github.com/dev4us/slack-apollo-hooks_backend
FE Repo: https://github.com/dev4us/slack-apollo-hooks_frontend
Local Ver Repo: https://github.com/dev4us/slack-apollo-hooks_frontend_local
끝