• 본 시리즈에서는 How to GraphQL의 Tutorial 문서들을 차례대로 번역합니다.
• 이 글은 GraphQL React + Apollo Tutorial - Introduction을 번역한 글입니다.
• 본 시리즈는 GraphQL Basic and Advanced 시리즈와 GraphQL-Node Tutorial 시리즈에서 이어집니다. GraphQL을 처음 접하는 분들은 해당 시리즈를 먼저 읽고 오시는 것을 추천드립니다.
• 오역 또는 의역이 있을 수 있습니다. 양해 부탁드리며, 수정이 필요한 부분은 댓글로 요청해주세요.

React + Apollo 튜토리얼 - 소개

참고: 이 튜토리얼의 최종 결과물은 GitHub에서 확인할 수 있습니다. 앞으로 이어지는 장들을 학습하면서 잘 따라가지 못할 때마다 위의 소스 코드를 참조하시기 바랍니다. 또한, 각 코드 블록에는 파일 이름이 함께 적혀있습니다. 이 표시를 클릭하면 GitHub 상의 대응하는 파일로 바로 링크되니, 코드를 어디에 작성해야 할지, 최종 결과물이 어떤 모습인지 궁금할 때마다 확인하시기 바랍니다.

개요

이전까지의 튜토리얼에서 GraphQL의 주요 개념과 장점에 대하여 배웠습니다. 자, 이제 직접 프로젝트를 만들어보며 손을 더럽힐 시간이 왔습니다!

지금부터 Hackernews를 클론 코딩해볼 것입니다. 이 어플리케이션이 가지게 될 기능들은 아래와 같습니다.

• 링크들의 리스트 표시
• 링크들의 리스트 검색
• 사용자 인증 (로그인)
• 인증된 사용자가 새로운 링크 생성
• 인증된 사용자가 링크에 대하여 투표 (각 사용자는 한 링크에 대하여 한번의 투표만 가능)
• 다른 사용자가 링크를 생성하거나 어떤 링크에 대하여 투표했을 때 실시간 갱신

이 프로젝트에서는 어플리케이션을 만드는 데에 다음과 같은 기술 스택을 이용합니다.

• Frontend:
  • React: UI 개발을 위한 프론트엔드 프레임워크
  • Apollo Client 2.1: 실사용가능한, 캐싱 기능이 포함된 GraphQL 클라이언트
• Backend:
  • graphql-yoga: 빠른 설정, 성능, 그리고 굉장한 개발자 경험에 특화된 만능 GraphQL 서버
  • Prisma: 데이터베이스를 GraphQL API로 만들어주는 오픈 소스 GraphQL API 레이어

React 프로젝트는 create-react-app을 사용하여 만들 것입니다. create-react-app은 필요한 빌드 관련 설정이 모두 되어있는 빈 프로젝트를 생성해주는 유명한 커맨드라인 도구입니다.

왜 GraphQL 클라이언트를 사용하나요?

GraphQL의 클라이언트 부분에서 이미 GraphQL 클라이언트의 역할을 고수준에서 다루었습니다. 이제, 보다 구체적으로 익힐 차례입니다.

요약하면, 반복적인 작업이나 어플리케이션 로직 차원에서 몰라도 되는 부분에 대한 작업을 처리할 때에는 GraphQL 클라이언트를 사용하는 것이 바람직합니다. 예를 들면, 저수준의 네트워크 관련 사항이나 로컬 캐시를 유지하는 것 등에 대하여 신경쓰지 않더라도 GraphQL 쿼리 또는 뮤테이션을 전송할 수 있어야 한다는 것입니다. 이러한 기능들은 GraphQL 서버와 통신하는 프론트엔드 어플리케이션에서는 필요로 하게 될 것들입니다. 이미 좋은 GraphQL 클라이언트가 많은데, 굳이 직접 만들 필요가 있을까요?

우리는 몇가지 GraphQL 클라이언트 라이브러리 중에서 고를 수 있습니다. 이들 라이브러리는 모두 GraphQL 동작에 대하여 다양한 수준의 제어권을 제공하며, 각각이 장단점을 가집니다. 아주 간단한 경우(작은 스크립트 작성 등)에는 graphql-request 정도면 충분할 겁니다. 이러한 라이브러리는 GraphQL API에 보내는 HTTP 요청에 대하여 얇은 수준의 계층을 적용하게 됩니다.

보다 큰 어플리케이션이라면 캐싱, 옵티미스틱(Optimistic) UI 갱신 등과 같은 편리한 기능이 필요할 것입니다. 이런 경우 GraphQL 동작의 모든 생명 주기를 다룰 수 있는 완전 GraphQL 클라이언트가 필요하겠죠. Apollo Client, Relay, urql 등과 같은 선택지가 있습니다.

Apollo vs Relay vs urql

프론트엔드에서 GraphQL을 막 다루기 시작한 사람들이 가장 흔히 하는 질문은 바로 어떤 GraphQL 클라이언트를 사용해야 하는지에 대한 것입니다. 당신의 다음 프로젝트에 가장 적합한 클라이언트가 무엇인지 결정하는 데에 부디 몇 가지 힌트를 드릴 수 있으면 좋겠군요!

Relay는 Facebook이 직접 만든 GraphQL 클라이언트로, 2015년에 GraphQL와 함께 오픈 소스로 공개되었습니다. Relay는 Facebook이 2012년에 GraphQL을 사용하기 시작한 이래 축적한 노하우들을 집대성하고 있습니다. Relay는 성능이 크게 최적화되어있으며, 가능한 한 네트워크 전송을 최소화하도록 되어있습니다. 흥미로운 점으로, Relay는 본래 라우팅 프레임워크로서 탄생되었고 데이터를 불러오는 역할은 이후에 추가되었습니다. 즉, 강력한 데이터 관리 솔루션으로 진화하여, 자바스크립트 어플리케이션에서 사용할 수 있는 GraphQL API 인터페이스로 거듭났습니다.

Relay의 성능상 장점에 대한 대가는 상당한 학습 시간(Learning Curve)입니다. Relay는 제법 복잡한 프레임워크로, 모든 부분을 이해하는 데에는 상당한 시간이 소요됩니다. Relay Modern이라고 불리는 1.0 버전이 출시되면서 이러한 상황은 개선되었습니다. 하지만 GraphQL을 바로 사용할 수 있는 것을 원한다면, Relay는 아직 좋은 선택은 아닐 듯 합니다.

Apollo Client는 커뮤니티 주도 하에 개발되어, 이해하기 쉽고 유연하며 강력한 GraphQL 클라이언트를 추구합니다. Apollo는 웹 및 모바일 어플리케이션을 개발하는 모든 주요 플랫폼에서 사용될 수 있는 단일 라이브러리를 개발하겠다는 야망을 품고 있습니다. 현재 React, Angular, Ember, Vue와 같은 대중적인 프레임워크를 위한 바인딩을 제공하는 자바스크립트 클라이언트가 존재하며, iOS와 Android를 위한 초기 버전의 클라이언트도 존재합니다. Apollo는 서비스 개발에 바로 사용될 수 있는 수준의 클라이언트이며, 캐싱, 옵티미스틱 UI, 구독 지원 등과 같은 편리한 기능들을 제공합니다.

urql은 Relay와 Apollo에 비하면 최신 프로젝트이며, 보다 역동적인 접근을 취하는 GraphQL 클라이언트입니다. React에 크게 초점을 두고 개발되었지만, 그 핵심에서는 간단함과 확장성을 목표로 하고 있습니다. 효율적인 GraphQL 클라이언트를 만들기 위한 기본적인 구조만이 주어지지만, "Exchanges"를 통하여 GraphQL 동작과 결과를 처리하기 위한 완전한 제어를 제공합니다. urql에서 제공하는 퍼스트 파티 Exchange인 @urql/exchange-graphcache를 사용하면 Apollo와 거의 동등한 기능을 제공하지만, 보다 적은 용량(Footprint)와 집중화된 API만으로도 가능해집니다.

Quiz

GraphQL 클라이언트 라이브러리를 사용하는 것의 가장 큰 장점으로 올바른 것은?

• 어플리케이션에서 애니메이션을 사용하는 것이 쉬워진다
• GraphQL 클라이언트는 보안을 향상시키기 위하여 주로 사용된다
• 네트워크와 캐싱을 위한 기반 코드를 작성하지 않아도 된다
• GraphQL 클라이언트는 실질적인 장점을 제공하지 않지만, 그럼에도 불구하고 제3자 라이브러리를 사용하는 것은 항상 좋다