GraphQL과 Apollo 네번째 이야기 - Apollo란?

 

 

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

 

 

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

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

 

🗂 목차

✅ 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 네번째 이야기

    🔽 Apollo란?

        📦 개요

이 전까지 GraphQL이 무엇이고, 어떤식으로 사용되는지 알아보았어요.
하지만, GraphQL은 단지 명세이고, 형식일 뿐이에요.
즉, 클라이언트에서 GraphQL 명세대로 요청과 데이터를 보내고, 받을 수 있도록 무언가가 만들어지는 게 아니라는 거에요.
그렇기 때문에 어떤 서비스를 만들고자 한다면 그것을 처리해 줄 무언가가 필요해요.

GraphQL을 구현할 솔루션 즉, Libray(라이브러리)가 필요해요.
그 솔루션은 아래의 역할을 해주고 있고, 여러 종류가 있어요.

∙ 백엔드에서 정보를 제공 및 처리
   - 서버단에 요청이 들어오면 GraphQL 요청을 해석하여 Database(데이터베이스)로 부터 정보를 가져와 가공 및 처리하여
      프론트엔드에게 전송.
∙ 프론트엔드에서 요청 전송
∙ GraphQL.js(Backend Library), GraphQL Yoga(Backend Library), AWS Amplify(Frontend Library),
   Relay(Frontend Library), 등등..

그렇다면 이렇게나 많은 라이브러리가 존재하는데, 왜?! Apolllo를 사용할까요?
Apollo는 백엔드와 프론트엔드 모두에게 해당 기능을 제공하고 있다는 게 너무 큰 이유에요.
그리고, 사용하기 매우 간편하고 쉬운 설정을 할 수 있고, 많은 기능들을 제공한다는 점이 큰 장점이에요.

 

728x90

 

 

 

 

 

    🔽 Apollo Server 구축 및 구성

        📦 JavaScript + Node.js

그럼 본격적으로 Apollo를 이용한 백엔드 서버 구축을 실습해 보려고 해요.
현재 얄코님의 강의에서는 위와 같이 진행하기 때문에 개념을 익히기 위해 JavaScript와 Node.js로 실습을 해보고,
주니는 추가적으로 Java와 Spring Boot를 이용한 실습을 한번 더 진행해 보려고 해요.
그리고, TypeScript와 Node.js 그리고 Nesj.js를 이용해서 또 한번 실습을 진행해 보도록 할게요.

npm init

반응형

최초 Project(프로젝트)를 만들어 주기 위해 위와 같이 원하는 Directory(디렉터리)에서 명령어를 입력해 주었어요.

주니는 위와 같이 author를 빼고는 기본값으로 하기 위해 엔터를 눌러 주었어요.

위와 같이 Is this OK?가 나오면 yes라고 입력해 주면 돼요.

그럼 위와 같이 package.json이 만들어진걸 확인할 수 있어요.

이 프로젝트를 InteliJ로 열어줄게요.

이렇게 InteliJ로 열어주었어요.

 

그리고 위와 같이 index.js를 만들어 보도록 할거에요.

index.js

그리고 위와 같이 입력해 주었어요.

node index.js

InteliJ Terminal(터미널)에서 위와 같이 명령어를 입력하니 문자열이 정상적으로 출력되는 걸 확인할 수 있어요.

nodemon index.js

node 명령어 말고, 위와 같이 nodemon 명령어를 사용하게 되면 코드 변경 뒤
저장하면 바뀐 코드대로 재 실행 되게 할 수 있어요.

변경 전 package.json

 

변경 뒤 package.json

8번째 줄처럼 "start": "nodemon index.js"를 추가해주면 npm start 명령어로 실행되었을 때,
nodemon index.js 명령어가 인식되서 작동하게 할 수 있어요.

 

 

 

        📦 Insert Mock Database Module

이번에는 테스트용 데이터베이스인 Mock 데이터베이스를 구축해 볼게요.
실제 서비스를 만들기 위해서 코딩할 때는 RDBMS나, NoSQL DBMS를 사용하겠지만, 이번엔 실습이기 때문이에요.

위와 같이 디렉터리와 파일을 만들어 주어야 해요.

해당 파일은 이 곳에 준비 되어 있어요.

이 파일을 프로젝트 최상위 디렉터리에 넣어주면 된답니다.

참고로 CSV Editor라는 Plugin(플러그인)을 설치하면

이렇게 예쁜 색깔로 나뉘어 지는 것을 확인할 수 있고,

Table 형태로도 확인 및 작업할 수 있어요.

index.js

 

const database = require('./database');
console.log(database);

Index.js를 위와 같이 수정해 주었어요.

아직 database.js의 Module(모듈)이 설치 되어 있지 않기 때문에 아래 명령어를 입력해 주어야 해요.

npm i convert-csv-to-json

위 명령어를 convert csv to json 라이브러리를 설치하는 명령어에요.

npm start

그런 뒤 위 명령어를 입력하여 기동 시켜 주면 각각의 CSV Data가 json 형식으로 출력되는 걸 확인할 수 있을거에요.

console.log(database.people);

위와 같이 index.js 2번째 줄을 수정하게 되면 nodemon이 기동중이기 때문에 

위와 같이 알아서 node Deamon(데몬)이 다시 기동 되면서 people.csv(사람들 정보)만
출력하는 걸 확인할 수 있을거에요.

 

 

 

        📦 Apollo Server Install

본격적으로 Apollo 설치를 진행해 볼게요.

npm i apollo-server

위 명령어를 통해 Apollo Module를 설치해 줄 수 있어요.

만약 npm i(install) 뒤에 -g를 붙이게 되면 전역적으로 설치가 되고, 위와 같이 -g를 붙히지 않으면 해당 프로젝트에만
설치되는 것이에요.

index.js

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`
const resolvers = {
    Query: {
        teams: () => database.teams
    }
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
    console.log(`🚀 주니의 Apollo 실습 Server 준비 완료! ${url}`)
})

기존에 index.js에 있던 모든 내용을 지우고, 위의 내용으로 변경해 주었어요.

npm start

그런 뒤 다시 서버를 기동해 주고, http://localhost:4000/ 을 브라우저에 입력해 주면

위와 같은 화면을 만날 수 있는데, Query your server를 클릭해 주면 된답니다.

그럼 위와 같이 playgroud가 나오게 된답니다

query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

위 내용을 복사하여 테스트 해 볼게요.

이렇게 정상적으로 데이터를 받아 오는 걸 확인할 수 있어요.

index.js

위 코드를 분석해 보면 22번째 줄에 new 연산자로 ApolloServer 객체를 만드는데, 이 객체는 typedef와 resolovers를 매개 변수로 받아 서버를 생성하게 되고, 23번째 줄에 해당 서버 객체의 listen()을 호출하여 url을 매개 변수로 넣어준 뒤 실행하게 해주는 부분이에요. 

typeDefs는 3 ~ 16번째 줄에서 만들어 주었고, resolvers는 17 ~ 21번째 줄을 통해 만들어 준걸 확인할 수 있어요.

그렇다면?! typeDef는 뭘까요?
이 친구는 GraphQL에서 사용할 데이터들의 구조와 타입을 지정한 것이에요.

위 index.js의 7 ~ 15번째 줄 Team이라는 객체를 보면 어떤 항목들로 구성되어 있는지 그리고, 이를 요청할 쿼리(4 ~ 6번째 줄)에도 어떤 형식으로 요청이 들어가는지 이런 데이터 구조가 선언된 것이라고 볼 수 있어요.

resolver는 서버에서 데이터를 반환하거나 입력, 수정, 삭제하는
CRUD에 대한 처리를 함수 형태로 지정되어 있는 것이에요.

typeDef

∙ GraphQL 명세에서 사용될 Data, Request(요청)의 Type(타입) 지정.
∙ gql(templat literal tag)로 생성.

resolver

∙ 서비스의 액션들을 함수로 지정.
∙ 요청에 따라 데이터 반환, 입력, 수정, 삭제 처리.

GraphQL Plygroud

∙ 작성한 GraphQL type, resolver 명세 확인
∙ 데이터 요청 및 전송 테스트 (REST API Test Tool Postman이라고 생각하면 쉬움.)

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

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

 

 

 

🧐 참고 자료

해당 내용은 아래 강의를 공부하면서 정리한 내용임을 알려 드립니다.

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

 

 

 

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