--- title: React Native에서 Relay 환경 설정하기: 개발자 가이드 slug: docs-kr/react-native/graphql/relay-setup description: Relay 설치 및 환경 설정 과정. React Native에서 GraphQL 관리. 필수 구성 요소 및 단계별 설명. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T18:35:45.058Z --- # 릴레이 설정 ## 소개 이전 가이드에서는 스키마 파일을 가져오고, 저장하고, React Native 애플리케이션에 붙여넣는 방법을 배웠습니다. 이번 가이드에서는 Relay를 설치하고 React Native 애플리케이션 개발을 시작하기 위한 환경을 준비할 것입니다. ## 목표 릴레이를 설정하기 위해 먼저 React Native 애플리케이션에 Relay를 설치하고, 그 다음 Relay 환경을 준비해야 합니다. ## 전제 조건 :::hint{type="info"} - 다음 주제에 대한 기본적인 이해를 권장합니다: [Relay Modern](https://relay.dev/), [Babel JS](https://babeljs.io/), JavaScript (ECS5 및 ECS6), [GraphQL.js](https://github.com/graphql/graphql-js) README - 로컬 환경에서 실행 중인 React Native 기본 프로젝트. - React Native 프로젝트에 다운로드된 schema.graphql 파일. ::: 다음 단계에서는 React Native 애플리케이션에 초점을 맞춘 기본 Relay 설치를 찾을 수 있습니다. 이 주제에 대해 더 깊이 알고 싶다면 [공식 문서](https://relay.dev/docs/en/installation-and-setup#docsNav)를 방문해 주세요. ## 1 - React Relay 공식 API 설치 공식 라이브러리 *react-relay*를 설치하는 것부터 시작합시다. 이 라이브러리는 Relay Core Team의 공식 API로, 데이터 조각을 구축하는 데 필요한 모든 것을 포함하고 있습니다. :::BlockQuote 1 yarn add react-relay\@10.0.0 ::: :::hint{type="success"} 이 튜토리얼을 위해 Relay Modern을 10.0.0 버전으로 설치하는 것이 중요합니다. 11.0.0 버전부터는 새로운 훅 때문에 react-relay를 사용하는 방식이 다릅니다. ::: ## 2 - Relay 구성 Relay 구성은 Relay 컴파일러에 필요한 정보를 가지고 있습니다. 여기에서 Relay 컴파일러가 schema.file을 찾을 수 있는 위치, 검색해야 할 폴더 및 기타 구성을 지정할 것입니다. 먼저 relay-config 패키지를 설치합시다: :::BlockQuote 1 yarn add --dev relay-config ::: :::hint{type="success"} 참고: 이 튜토리얼은 패키지 클라이언트로 yarn을 사용하지만, npm을 사용해도 괜찮습니다. ::: 이제 Relay가 스키마 경로를 찾을 Relay 구성 파일을 생성합시다. - **애플리케이션의 루트에 새 파일을 만듭니다.** - **파일 이름을 relay.config.js로 지정합니다.** 파일을 열고 아래 정보를 사용하여 저장하세요: :::BlockQuote 1 module.exports = \{ 2 schema: './data/schema.graphql', 3 src: './', 4 }; ::: ## 3 - 릴레이 바벨 플러그인 런타임에서 GraphQL 아티팩트를 변환하려면 바벨 플러그인을 설치해야 합니다. :::BlockQuote 1 yarn add --dev babel-plugin-relay graphql ::: 이제 바벨 구성 파일 안에 플러그인 배열에 릴레이 바벨 플러그인을 추가해야 합니다. 최종 babel.config.js는 다음과 같이 보일 것입니다: :::BlockQuote 1 \{ 2 "plugins": \[ 3 "relay" 4 ] 5 } ::: 엑스포 프로젝트에서는 presets 배열 바로 뒤에 babel.config.js 안에 플러그인 배열을 추가하는 동일한 접근 방식을 따르세요. 최종 결과는 다음과 같아야 합니다: ```javascript 1 module.exports = function (api) { 2 api.cache(true); 3 return { 4 presets: [ 5 "babel-preset-expo", 6 ], 7 plugins: [ 8 'relay' 9 ] 10 }; 11 }; ``` :::hint{type="success"} 릴레이 플러그인은 GraphQL 아티팩트의 올바른 변환을 위해 다른 플러그인보다 먼저 실행되어야 합니다. 더 많은 정보를 원하시면 플러그인 바벨 문서를 확인하세요. ::: ## 4 - 릴레이 컴파일러 첫 번째 문서 이후로 우리는 릴레이 컴파일러에 대해 설명해왔습니다. 우리의 애플리케이션이 데이터 조각을 컴파일할 수 있도록 지금 설치하겠습니다. :::BlockQuote 1 yarn add **--**dev relay**-**compiler ::: 패키지.json을 열고 릴레이 컴파일러를 실행할 새로운 스크립트 명령을 구성합시다. :::BlockQuote 1 "relay": "relay-compiler --watchman false" ::: Watchman은 릴레이 컴파일러가 릴레이 조각의 변경 사항을 감지해야 하는지 여부를 구성하는 역할을 합니다. true이면 각 변경 시 다시 실행됩니다. false이면 yarn relay를 단독으로 실행한 후에 실행됩니다. 패키지.json 파일은 다음과 같아야 합니다: ```json 1 "scripts": { 2 "android": "react-native run-android", 3 "ios": "react-native run-ios", 4 "start": "react-native start", 5 "test": "jest", 6 "lint": "eslint .", 7 "relay": "relay-compiler --watchman false" 8 }, ``` ## 5 - yarn relay 실행하기 마지막으로, 설치 단계가 완료되었으므로, 애플리케이션의 루트에서 yarn relay 명령을 실행할 수 있습니다: :::BlockQuote 1 yarn relay ::: 데이터 조각을 빌드하지 않기 때문에, Relay Compiler는 변경된 파일을 반환합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/TsgibxDpL2xrdQWVEDSuq_image.png" size="80" width="385" height="101" position="center" showCaption="false"} 좋습니다, 귀하의 애플리케이션에는 이미 Relay가 설치되고 구성되었습니다. 이제 Back4App 서버에 요청을 시작하기 위해 환경을 구현해 보겠습니다. ## 6 - fetch 환경 준비하기 Relay 환경은 네트워크 레이어가 요청을 처리하는 방법과 *Relay Store*가 작동하는 방식을 정의합니다. Store는 변경될 때만 업데이트하고 캐싱하여 프론트엔드에서 데이터를 제어합니다. 간단한 환경은 최소한 네트워크 레이어와 Store가 필요합니다. **네트워크 계층** 이 [네트워크 계층](https://relay.dev/docs/en/network-layer)은 구축하기 쉽습니다. 이 계층은 우리의 애플리케이션의 각 요청을 처리하며, 쿼리, 변형 및 구독(애플리케이션이 지원하는 경우)을 수행합니다. Relay는 이를 소비하여 애플리케이션 서버에 접근하기 위한 호출을 준비하는 방법을 알게 됩니다. **릴레이 스토어** 이 [스토어](https://relay.dev/docs/en/relay-store.html)는 클라이언트 측에서 우리의 애플리케이션 데이터를 업데이트하는 책임이 있습니다. 각 요청은 업데이트 함수가 있을 수 있습니다. 업데이트 함수 내에서, 스토어 인터페이스를 사용하여 데이터를 업데이트하기 위한 도우미 함수 목록을 사용할 수 있습니다. 릴레이 환경을 준비하기 위해 환경 구성 파일을 생성해야 합니다. 이 파일은 쿼리가 수행될 때마다 쿼리 렌더러에 의해 읽힐 것입니다. 이 파일을 준비해 봅시다. ### 6.1 - 환경 파일 생성 우리는 릴레이 라이브러리의 디자인 원칙인 콜로케이션 개념을 따를 것입니다. 시작하기 위해, 애플리케이션의 루트에 폴더를 만들고 이름을 relay로 지정합시다. 그 안에 파일을 만들고 이름을 `environment.js`로 지정합니다. ### 6.2 - 환경 구성 그 후, `relay-runtime`에서 가져옵니다: ```javascript 1 import { 2 Environment, 3 Network, 4 RecordSource, 5 Store, 6 } from 'relay-runtime'; ``` ### 6.3 - 네트워크 레이어 구성 네트워크 레이어는 서버에서 데이터를 가져오는 기능이 필요합니다. 우선, POST 요청을 수행하는 fetch 함수를 생성해 보겠습니다: ```javascript 1 const fetchQuery = async (request, variables) => { 2 const body = JSON.stringify({ 3 query: request.text, 4 variables, 5 }); 6 7 const headers = { 8 Accept: 'application/json', 9 'Content-type': 'application/json', 10 'X-Parse-Application-Id': 'X-Parse-Application-Id', 11 'X-Parse-Client-Key': 'X-Parse-Client-Key', 12 }; 13 14 try { 15 const response = await fetch(`https://parseapi.back4app.com/graphql`, { 16 method: 'POST', 17 headers, 18 body, 19 }); 20 21 const data = await response.json(); 22 23 if (data.errors) { 24 throw data.errors; 25 } 26 27 return data; 28 } catch (err) { 29 console.log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; ``` :::hint{type="success"} 백엔드 요청을 try-catch로 감쌉니다. 오류가 발생하면 애플리케이션이 이를 처리합니다. 그렇지 않으면 정상적인 동작을 따르며 데이터를 반환합니다. ::: 네트워크 레이어에서는 애플리케이션-서버 연결을 구성합니다. Back4App에서는 두 가지 주요 키를 사용합니다: 애플리케이션 ID와 클라이언트 키. 키는 서버 URL과 함께 헤더에 입력해야 합니다. 이 정보를 얻으려면 앱으로 가서 API 콘솔 -> GraphQL 메뉴를 클릭하세요. GraphQL 콘솔이 열리면 상단에 URL이 표시되고 하단에는 필요한 애플리케이션 키가 표시됩니다. fetch 함수에 귀하의 정보로 교체하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/jqLTXI5I-dNrDTnR6eJ0v_image.png) :::hint{type="success"} 마스터 키를 노출하지 않도록 기억하세요. ::: ### 6.4 - 환경 내보내기 relay-runtime은 네트워크 레이어를 소비하는 데 필요한 기능을 제공하고 스토어를 생성합니다. 마지막으로, 이들을 새로운 환경으로 결합하고 애플리케이션에 내보냅시다. 아래 코드를 환경 파일에 사용하세요. ```javascript 1 const environment = new Environment({ 2 network: Network.create(fetchQuery), 3 store: new Store(new RecordSource()), 4 }); 5 6 export default environment; ``` 환경 최종 파일은 다음과 같이 보일 것입니다: ```javascript 1 import { 2 Environment, 3 Network, 4 RecordSource, 5 Store, 6 } from 'relay-runtime'; 7 8 const fetchQuery = async (request, variables) => { 9 const body = JSON.stringify({ 10 query: request.text, 11 variables, 12 }); 13 14 const headers = { 15 Accept: 'application/json', 16 'Content-type': 'application/json', 17 'X-Parse-Application-Id': 'X-Parse-Application-Id', 18 'X-Parse-Client-Key': 'X-Parse-Client-Key', 19 }; 20 21 try { 22 const response = await fetch(`https://parseapi.back4app.com/graphql`, { 23 method: 'POST', 24 headers, 25 body, 26 }); 27 28 const data = await response.json(); 29 30 if (data.errors) { 31 throw data.errors; 32 } 33 34 return data; 35 } catch (err) { 36 console.log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41 42 const environment = new Environment({ 43 network: Network.create(fetchQuery), 44 store: new Store(new RecordSource()), 45 }); 46 47 export default environment; ``` ## 결론 멋지네요. 이제 Relay와 Relay 환경이 설치되고 구성되었으니 Back4App GraphQL API를 소비할 준비가 되었습니다. 다음 단계는 첫 번째 쿼리 렌더러를 생성하고 서버와 통신하는 것입니다.