GraphQL과 Apollo 열 네번째 이야기 - React와 Apollo Client

 

카카오페이 | 마음 놓고 금융하다

 

 

 

 

 

 

리액트를 다루는 기술

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

🗂 목차

✅ GraphQL과 Apollo 첫번째 이야기 - 개념 익히기
✅ GraphQL과 Apollo 두번째 이야기 - REST API란?
✅ GraphQL과 Apollo 세번째 이야기 - GraphQL의 정보 주고 받는 방식
✅ GraphQL과 Apollo 네번째 이야기 - Apollo란?
✅ GraphQL과 Apollo 다섯번째 이야기 - GraphQL을 간단하게 구현해 보아요 😀
✅ GraphQL과 Apollo 여섯번째 이야기 - GraphQL Module화에 대해 알아보아요 😀
✅ GraphQL과 Apollo 일곱번째 이야기 - GraphQL Data Type에 대해 알아보아요 😀
✅ GraphQL과 Apollo 여덟번째 이야기 - GraphQL Union과 Interface 그리고 인자와 인풋 타입에 대해 알아보아요 😀
✅ GraphQL과 Apollo 아홉번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 한번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 두번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 테스트
✅ GraphQL과 Apollo 열 세번째 이야기 - TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 네번째 이야기 - React와 Apollo Client
✅ GraphQL과 Apollo 열다섯번째 이야기 - React와 Apollo Client - Query와 Mutation 사용하여 웹 페이지 만들기
✅ GraphQL과 Apollo 열 여섯번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 일곱번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기

🤔 내가 만난 문제

⚠️ [Nest.js] TypeORM Table 관계가 맺어졌을 때, Seeding (feat. Migration)
⚠️ [Spring Boot 3.0] Could not resolve org.springframework.boot:spring-boot-gradle-plugin
⚠️ [Spring Boot 3] Spring Doc(Swagger) White Label Error

📋 부록

🔍 [Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo)
🔍 [SOLID][Nest.js][Java + Spring] Interface를 활용한 결합도 분리 (Interface를 이용한 Dependency Injection - DI)

 

 

 

 

🚀 GraphQL과 Apollo 열 네번째 이야기

    🔽 React와 Apollo Client

        📦 개요

이 전 시간까지 BackEnd에서 GraphQL을 어떻게 구성하는지에 대해 공부하고, Java(자바), Spring Boot(스프링 부트), TypeScript(타입 스크립트), Nest.js(네스트)를 이용하여 실습해보는 시간을 가졌어요.

이제 FrontEnd에서는 구성된 BackEnd API를 어떻게 호출하고, 상호 작용할 수 있는지에 대해 공부해 볼게요.

이번 글은 얄코님의 강의를 들으며, 정리하는 내용입니다.

 

 

 

 

 

    🔽 실습 환경

        📦 BackEnd

강의에서는 얄코님이 만드신 Node.js 기반에서 진행하지만, 주니는 이 전에 만든 Nest.js 환경으로 BackEnd를 사용해 보려고 해요.

GitHub - junyharang-coding-study/GraphQL-Study: GraphQL을 공부하고, 실습한 코드에요 😀

 

소스 코드는 이 곳에서 받으실 수 있어요.

 

npm run start:dev

위 명령어를 입력하면 자동으로 기존 Mock Data 및 Table 내용을 날리고, 다시 Seed를 통해 Table을 만들고, Mock Data를 Ebedded SQLite에 입력하도록 해 두었어요.

해당 서버는 8081 포트로 기동 됩니다.

 

 

    🔽 실습

        📦 FrontEnd

React의 환경은 얄코님이 만드신 환경에서 진행해 보도록 할게요.
다만, BackEnd 코드가 다르기 때문에 FrontEnd도 약간은 다른 방향으로 진행할 거에요.

GitHub - junyharang-coding-study/GraphQL-Study: GraphQL을 공부하고, 실습한 코드에요 😀

실습 코드는 위에서 내려 받을 수 있어요.

주니는 FrontEnd IDE로 JetBrain의 WebStorm을 사용할 거에요.

JetBrain 사의 IDE로 프로젝트를 최초 열면 위와 같이 명령어를 입력하지 않아도 Module을 설치할 수 있는 내용이 나와요.
위의 RUN 'YARN INSTALL' 버튼을 누르거나, Terminal에서 npm install 명령어를 입력하여 Module을 설치해 주세요.

npm install

npm start

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports"

만약 위와 같이 npm start로 기동 해 주었는데, 문제가 생기면 아래와 같이 해 주면 해결 됩니다.

 

npm update

 

rm -rf node_modules && npm install

 

 

Error: error:0308010C:digital envelope routines::unsupported

그런데 이번엔 위와 같이 문제가 발생하였어요.

이럴 땐 아래와 같이 해결 해 주시면 됩니다.

npm uninstall react-scripts

npm install react-scripts

 

다시 npm start 명령어를 입력하면 정상 작동될 거에요.

npm start

localhost:3000

 

 

React.js 코드를 좀 분석해 보면 App.js는 

src/components

4-1-react-before-apollo/src/App.js

위 Component(컴포넌트) 들을 Import 한 것을 알 수 있어요.

 

 

4-1-react-before-apollo/src/App.js

App.js의 NavMenus()는 menu 값에 따라 상단 App-header의 Button을 표시하는 함수에요.
mainComp()는 App-header 아래 Main 화면에 나타날 Component Mapping이에요.

20번째 줄에 Roles, Teams, People 이라는 문자열 배열로 부터 HTML li Element(엘리먼트)를 만들어 

이렇게 Navigation을 만들어 주는 역할을 하고 있어요.

이처럼 특정 Data(데이터)를 기반으로 간단한 Code(코드)를 통해 원하는 HTML 엘리먼트를 만들어 낼 수 있는 것이 React.js 라는 Library(라이브러리)에요.

4-1-react-before-apollo/src/App.js

 

src/components

그리고, 위 세 컴포넌트들은 각각 파일에서 만들어진 내용이 바로 

40번째 줄에 의하여 화면에 출력해 주고 있어요.



즉, App.js의 App()은 크게 Header 부분과 Main 부분의 코드로 나뉘어 있고,
Main을 채울 각각의 내용들은 바로 이 컴포넌트 Directory(디렉터리) 안에
componentes 디렉터리 밑에 각각 파일에 들어 있는 것이에요.


그리고, roles.js, teams.js, people.js는 공통적으로 AsideItems(Main 화면 왼쪽의 Side Section - List가 나타날 곳)과 MainContens(Main 화면 - List 각 항목의 내용부가 표시될 곳)을 통해 화면을 그려내는 역할을 해요.

4-1-react-before-apollo/src/components/roles.js

AsideIteams()는

localhost:3000

위 화면에서 왼쪽 검정색 부분을 그려내는 역할을 하고 있고,

MainContens()는 오른쪽에 회색 부분을 그려내는 역할을 하고 있어요.

세 컴포넌트 파일 모두 같은 내용으로 채워져 있어요.

이제 React에서 Apollo(아폴로) Client(클라이언트)를 이용해서 GraphQL Server로부터 정보들을 받아와서
화면들을 채워나가는 작업을 해볼거에요.

 

 

 

 

 

    🔽 Apollo Client 사용하기

이번 글을 통해 다 알지 못한 부분에 대해서는 Apollo Client Document를 참고해 주시면 좋을 거 같아요.

 

        📦 Apollo Client Module 적용

npm i @apollo/client graphql

최초 위 명령어를 통해 아폴로 클라이언트를 설치해 주어야 해요.

4-1-react-before-apollo/src/App.js

그리고 위 3 ~ 4번째와 같이 import 문을 통해 아폴로를 사용할 수 있게 해 주어야 해요.

4-1-react-before-apollo/src/App.js

그리고 위와 같이 Code를 입력해 주었는데,
강의에서는 uri를 4000번 포트로 하였지만, 주니는 8081 Nest.js Server로 테스트를 해 볼거라서 위와 같이 해 주었어요.

아폴로 클라이언트 객체는 GraphQL Server를 상대로 데이터를 주고 받는 역할을 하는 친구에요.

REST API를 이용해 FrontEnd를 개발해 보았다면 Axiox 혹은 Ajax 라이브러리 역할이라고 생각하면 돼요.

12번째 줄에 InMemoryCache() 객체는 GraphQL 클라이언트가 한번 받아온 정보들을 필요 이상으로 다시 Request(요청)할 필요가 없도록 Cache(캐시)를 관리해 주는 역할을 하고 있어요.

4-1-react-before-apollo/src/App.js

위 코드를 변경해 주었는데, ApolloProvider Tag를 추가하고, 기존에 있던 내용을 안에 넣어주었어요.
안에 들어간 내용 즉, 컴포넌트들이 mainComp()로 들어갈 거라고 이야기 했었는데, 해당 컴포넌트들에서는 이 아폴로 클라이언트를 사용하여 서버로부터 데이터를 불러오고, 다시 컴포넌트들에게 데이터를 전송할 수 있게 해 준 부분이에요.

        📦 GraphQL 서버로부터 목록 받아와 표시

본격적으로 Roles Tab에 GraphQL 적용을 해보도록 해볼게요.
GraphQL Server로부터 역할들의 정보를 받아 목록을 표시해 볼게요.

src/components/roles.js

최초 위와 같이 2 ~ 3번째 줄에서 useState, useQuery, gql을 Import 해 주었어요.

BackEnd - src/graphql/schema/schema.graphqls

 

http://localhost:8081/graphql

GraphQL에서 Role 목록을 받아오기 위해서는 getRoles()로 요청을 보내야 해요.

src/components/roles.js

그리고 위와 같이 요청을 보내 값을 받아올 수 있는 Schma를 넣어 요청 객체를 만들어 주었어요.

src/components/roles.js

현재 선택된 ID를 저장하는 코드도 Roles() 안에 넣어 주었어요.

localhost:3000

 

src/components/roles.js

이제 왼쪽 검정 공간을 나타내는 asideItems()는 아무것도 없는 div Tag만 들어 있고, 이를 반환하는 걸 알 수 있어요.

src/components/roles.js

해당 코드를 위와 같이 변경해 주었어요.

그런 뒤 npm start 명령어를 통해 다시 실행해 주었어요.

http://localhost:3000/

그랬더니 위와 같이 CORS Error가 발생한 걸 확인할 수 있어요.

주니는 Nest.js Server를 쓰기 때문에 Nest.js에서 CORS 허용을 해주도록 할게요.

BackEnd - src/main.ts

728x90

14번째 줄과 같이 app.enableCors()를 넣어 주었어요.
참고로 HTTP Methods는 GET과 POST만 허용해 줬는데, 이는 GraphQL은 GET과 POST만 사용하기 때문이에요.

그런 뒤 서버를 재기동 해 줍니다.

http://localhost:3000/

그럼 위와 같이 나오는 걸 확인할 수 있어요.

http://localhost:3000/

개발자 도구로 graphql 요청을 확인해 보면 Reponse(응답) Value(값) 으로 받아온 데이터를 확인할 수 있어요.

src/components/roles.js

이 때, 위와 같이 응답 필드값을 roleId만 받겠다고 하여 쿼리를 만들고, 요청을 다시 보내면

http://localhost:3000/

위와 같이 roleId 필드만 반환된걸 확인할 수 있어요.

어차피 화면에는 roleId 값만 필요하기 때문에 아래와 같이 수정해 줄게요.

src/components/roles.js

 

http://localhost:3000/

src/components/roles.js

위 코드를 분석해 볼게요.

23 ~ 27번째 줄은 아이콘 표시를 위한 객체를 만들어 준거에요.

29번째 줄에 useQuery() 이 부분에 GraphQL Query 문을 넣어서 Loading과 Error 그리고, Data를 Server로부터 받아오게 돼요.

Loading은 Server로 부터 Data를 받아오는 짧은 순간에 Loading 표시를 만들어 주었는데, 주니의 맥북은 이 Loading을 볼 기회를 보여주지 않더라구요. 아주 빨라요!
이를 31번째 줄 분기문으로 확인을 해 주고 있고, Loading 중이라면 32번째 줄 P Tag 안의 문구가 보이게 될 거에요.

Error에 경우 Query를 잘 못 요청하는 등의 문제가 발생하였을 때, 문제를 띄우기 위한 부분이에요.
이를 35번째 줄에서 Error 값이 들어 있는지와 Server의 statusCode가 200이 아닌지를 확인해서 해당 조건에 부합하게 되면 Error가 발생했다고 화면에 표시되게 해놨어요.

data는 실제 Server가 반환한 Data를 담고 있는 부분이에요.

위의 응답값을 보면 data 객체 안에 getRoles 객체 안에 pagination 객체 안에 data 배열 객체 안에 실제 데이터 객체들이 담겨 있기 때문에 41번째 줄에서 해당 배열을 반복하여 돌린 뒤 roleId 값을 Parsing(파싱)하도록 해 준 부분이에요.

 

http://localhost:3000/

해당 roleId를 통해 Icon과 함께 이렇게 화면을 꾸며주도록 해 준거에요.

이번에는 회색 화면을 꾸며 보도록 할게요.

이제 roleId 값을 클릭했을 때, 상세 정보가 나타나게 만들어 볼거에요.

BackEnd - src/graphql/schema/schema.graphqls

호출 대상은 24번째 함수를 호출해 볼거에요.

FrontEnd - src/components/roles.js

FrontEnd - src/components/roles.js

반응형

FrontEnd - src/components/roles.js

http://localhost:3000/

최초 역할이 아무것도 선택이 안 되어 있다면 위와 같이 나올거에요.

Developer 순으로 하나하나 클릭해 볼게요.

http://localhost:3000/ Developer 클릭

http://localhost:3000/ Designer 클릭

http://localhost:3000/ Planner 클릭

 

 

위와 같이 정상 동작하는 걸 확인할 수 있어요.

 

FrontEnd - src/components/roles.js

최초 역할을 선택하게 되면 해당 역할의 문자열이 roleId이고,
이것이 useState() 함수에 저장되게 되고, 이 걸 분리한 contentId 변수에 저장하게 돼요.

 

 

 

FrontEnd - src/components/roles.js

코드를 분석해 보면 최초 이 곳에서 useQuery()를 이용하여 GraphQL에 요청을 보내는데, 선택된 roleId를 실어 보내서
받아온 데이터 정보를 이용하여 React로 화면을 구성해 준거에요.

 

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

 

 

🧐 참고 자료

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

 

 

Get started with Apollo Client

 

 

 

카카오페이 | 마음 놓고 금융하다