React + Apollo Tutorial (0) - Introduction

이 글은 다음 페이지를 번역한 글입니다.

https://www.howtographql.com/react-apollo/0-introduction/

Fullstack Tutorial with GraphQL, React & Apollo

---

Introduction

참고: 이 자습서의 최종 프로젝트는 GitHub에서 찾을 수 있습니다. 다음 장을 진행하는 동안 길을 잃을 때마다 항상 참고 자료로 사용할 수 있습니다. 또한 각 코드 블록에는 파일 이름이 주석으로 지정되어 있습니다. 이러한 주석은 GitHub의 해당 파일에 직접 연결되므로 코드를 어디에 넣을지와 최종 결과가 어떻게 표시되는지 명확하게 볼 수 있습니다.

---

overview

이전 튜토리얼에서 GraphQL의 주요 개념과 이점을 다루었습니다. 이제 우리의 손을 더럽히고 실제 프로젝트를 시작할 때입니다!

 

우리는 Hackernews의 간단한 클론을 만들 것입니다. 앱의 기능 목록은 다음과 같습니다.

• 링크 목록 표시
• 링크 목록 검색
• 사용자 인증 처리
• 인증된 사용자가 새 링크를 생성하도록 허용
• 인증된 사용자가 링크에 투표하도록 허용(링크 및 사용자당 1표)
• 다른 사용자가 링크를 찬성하거나 새 링크를 만들 때 실시간 업데이트

이 트랙에서는 앱을 빌드하기 위해 다음 기술을 사용합니다.

• 프론트엔드:
  • React: Library for building user interfaces
  • Apollo Client 3.2: Production-ready, caching GraphQL client
• 백엔드:
  • Apollo Server 2.18: Fully-featured GraphQL Server with focus on easy setup, performance and great developer experience
  • Prisma: Open-source database toolkit that makes it simple to work with relational databases

모든 필수 빌드 구성이 이미 설정된 빈 프로젝트를 제공하는 인기 있는 명령줄 도구인 create-react-app을 사용하여 React 프로젝트를 만들 것입니다.

 

---

Why a GraphQL Client?

GraphQL 파트의 Clients 섹션에서, GraphQL 클라이언트의 책임의 개념적인 부분에 대해 다루었습니다. 이제는 조금 더 구체화해야 할 때입니다.

 

요약하자면, 우리는 빌드 중인 앱에서 반복적이고 불가지론적인 작업에 GraphQL 클라이언트를 사용해야 합니다. 예를 들어, low level의 네트워킹 세부 정보나 로컬 캐시 유지 관리에 대해 걱정할 필요 없이 쿼리 및 변형을 보내는 것이 가능해집니다. 이것은 GraphQL 서버와 통신하는 모든 프론트엔드 애플리케이션에서 원하는 기능입니다. 놀라운 GraphQL 클라이언트 중 하나를 사용할 수 있는데 이러한 기능을 직접 구축해야 하는 이유가 있을까요?

 

여러분이 캐싱, 최적화된 UI 업데이트 및 기타 편리한 기능을 활용하려는 다소 큰 애플리케이션을 만들고 있다면, 여러분은 아마 모든 GraphQL 작업의 수명 주기를 처리하는 GraphQL 클라이언트를 사용하고 싶을 것입니다. 여러분은 Apollo Client, Relay 및 urql 중에서 선택할 수 있습니다.

 

---

Apollo vs. Relay vs. urql

프론트엔드에서 GraphQL을 시작하는 사람들로부터 가장 많이 듣는 질문은 어떤 GraphQL 클라이언트를 사용해야 하는지입니다. 다음 프로젝트에 적합한 클라이언트를 결정하는 데 도움이 되는 몇 가지 힌트를 제공하려고 합니다!

 

Relay는 2015년에 GraphQL과 함께 오픈 소스로 제공한 Facebook의 자체 GraphQL 클라이언트입니다. 여기에는 Facebook이 2012년 GraphQL을 사용하기 시작한 이후 수집한 모든 학습 내용이 통합되어 있습니다. Relay는 성능에 크게 최적화되어 있으며 가능한 한 네트워크 트래픽을 줄이려고 합니다. 흥미로운 참고 사항은 Relay 자체가 실제로 데이터 로드 책임과 결합된 라우팅 프레임워크로 시작했다는 것입니다. 따라서 JavaScript 앱에서 GraphQL API와 상호작용하는 데 사용할 수 있는 강력한 데이터 관리 솔루션으로 발전했습니다.

 

Relay의 성능상의 이점은 눈에 띄는 학습 곡선을 대가로 합니다. 릴레이는 복잡한 프레임워크이며 모든 복잡성을 이해하는 데 시간이 걸립니다. 그런 면에서 전반적인 상황은 Relay Modern이라는 1.0 버전이 출시되면서 개선되었지만, GraphQL을 막 시작할 무언가를 찾고 있다면 Relay가 아직 올바른 선택이 아닐 수도 있습니다.

 

Apollo Client는 이해하기 쉽고 유연하며 강력한 GraphQL 클라이언트를 구축하기 위한 커뮤니티 주도의 노력입니다. Apollo는 사람들이 웹 및 모바일 애플리케이션을 구축하는 데 사용하는 모든 주요 개발 플랫폼에 대한 하나의 라이브러리를 구축하려는 야심을 가지고 있습니다. 현재 React, Angular, Ember 또는 Vue와 같은 인기 있는 프레임워크와 초기 버전의 iOS 및 Android 클라이언트에 대한 바인딩이 포함된 JavaScript 클라이언트가 있습니다. Apollo는 프로덕션 준비가 완료되었으며 캐싱, 최적화된 UI, 구독 지원 등과 같은 기능이 있습니다.

 

urql은 Relay 및 Apollo에 비해 GraphQL 클라이언트에 대한 보다 동적인 접근 방식이며 새로운 프로젝트입니다. React에 중점을 두고 있지만 핵심은 단순성과 확장성에 중점을 둡니다. 이것은 효율적인 GraphQL 클라이언트를 구축하기 위한 기본 뼈대만을 제공되지만 "Exchange"를 통해 GraphQL 작업 및 결과를 처리하는 방법을 완전히 제어할 수 있습니다. 퍼스트파티 exchange인 @urql/exchange-graphcache와 함께 사용하면 기본적으로 Apollo와 기능면에서 동일하지만 설치 공간이 더 작고 매우 집중된 API입니다.

 

구글 번역보다 잘 번역할 수가 없네요.. ㅠㅠ 영어실력의 한계..

 

다음 글: React + Apollo Tutorial (1) - Getting Started