React Native - GraphQL과 Relay를 통한 사용자 관리

사용자와 작업하기 소개 많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보에 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다 back4app/parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 parse user라는 전문 사용자 클래스를 제공합니다 이 클래스가 어떻게 작동하는지 더 잘 설명하기 위해 사용자 가입, 사용자 로그인 및 사용자 로그아웃을 만드는 실용적인 가이드를 제공하겠습니다 다음 튜토리얼에서는 graphql과 relay를 사용하여 react native 애플리케이션에서 각각을 구현하는 방법을 이해해 봅시다 목표 parse user 클래스와 relay가 이 클래스를 어떻게 처리할 것인지 설명합니다 parse 사용자 클래스 parse user는 parse object의 하위 클래스이며, 유연한 스키마, 자동 지속성 및 키 값 인터페이스와 같은 모든 동일한 기능을 가지고 있습니다 parse object의 모든 메서드는 parse user에도 존재합니다 차이점은 parse user가 사용자 계정에 특정한 몇 가지 특별한 추가 기능을 가지고 있다는 것입니다 parse user 속성 parse user는 parse object와 구별되는 여러 값을 가지고 있습니다 username 사용자 이름 (필수) password 사용자 비밀번호 (가입 시 필수) email 사용자 이메일 주소 (선택 사항) 사용자에 대한 다양한 사용 사례를 살펴보면서 이들 각각을 자세히 살펴보겠습니다 relay 변형 react native에서 relay를 사용하여 user 클래스를 처리하는 방법은 mutations를 사용하는 것입니다 mutations는 함수를 생성하고, 실행하며, 데이터를 백엔드로 전송하고, 반환을 기대하는 역할을 합니다 모든 mutation 함수는 전송할 데이터를 준비합니다 백엔드에서 반환되면 성공 또는 오류 시나리오를 처리합니다 두 경우 모두 애플리케이션은 다음 상태를 제어하고 이후에 어떤 일이 일어날지를 결정할 수 있습니다 이 가이드는 프론트엔드에서 graphql을 소비하기 위해 relay modern을 사용하고 있습니다 뮤테이션을 생성하는 흐름은 쿼리나 프래그먼트를 생성하는 것과 유사합니다 relay mutation은 백엔드 사양과 일치해야 합니다 새로운 mutation을 생성할 때 relay compiler는 백엔드 구조가 애플리케이션/프론트엔드의 진실 소스인 schema graphql과 동일한지 확인합니다 모든 relay mutation은 commitmutation이라는 주요 함수를 가집니다 이 함수는 graphql 프래그먼트, 입력 변수, 완료 및 오류 콜백을 처리합니다 relay mutation은 다른 인수를 가질 수 있지만, 다음 튜토리얼에서는 사용되지 않을 것입니다 commitmutation commitmutation은 클라이언트 측에서 graphql에서 뮤테이션을 생성하고 실행하기 위한 기본 함수입니다 queryrenderer와 유사하게, commitmutation은 props를 받습니다 이 props는 서로 결합되어 fetch를 준비하고, 서버를 호출하며, 반환을 처리합니다 각 경우에 애플리케이션을 처리하기 위해 필요한 props가 매우 많습니다 그러나 다음 튜토리얼에서는 오직 다음 하나만 사용할 것입니다 환경 환경은 애플리케이션의 저장소 및 네트워크를 담당합니다 입력은 변이를 해결하는 데 필요한 변수를 포함하는 객체입니다 oncompleted 및 onerror 이름에서 알 수 있듯이 변이가 완료되면 호출되는 함수입니다 oncompleted는 성공을 위한 것이고 onerror는 오류를 위한 것입니다 commitmutation의 예 1 function commit({environment, input, oncompleted, onerror}) { 2 const variables = {input}; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, relay mutation에 대한 더 많은 정보는 공식 문서 를 참조하세요 결론 이제 변이 개념이 명확하게 설명되었습니다 다음 튜토리얼에서는 back4app에서 회원 가입 흐름을 처리할 것입니다 여기에서는 새로운 사용자를 등록하고 세션 토큰을 반환하는 간단한 변이를 구현하는 방법이 명시될 것입니다