[GraphQL] GraphQL로 API만들기 (1) - 프로젝트 셋업

GraphQl로 API 만들기 (1) - 프로젝트 셋업

오픈 API를 제공하는 사이트에서 요청주소를 제공하고, 이를 활용하여 요청을 보내면 응답을 json 형태 등으로 받을 수 있습니다. 보통 REST 방식으로 제공하는 곳이 많습니다.

공공데이터 포털 - 오픈API 제공 : https://www.data.go.kr/

영화권입장권통합 오픈 API : http://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do

네이버 개발자 센터 : https://developers.naver.com/main/

카카오 developers : https://developers.kakao.com/

백엔드 단에서 이들을 받아오고, 받아온 데이터들을 잘 가공하여 프론트엔드에 보여준다면 하나의 완성된 어플리케이션을 만들 수 있을 것입니다.

👍 GraphQL + Apollo 가 REST API + Redux를 대체할 수 있다

Graphql을 사용하지 않고 오픈 API에 데이터를 요청하며 받아오기 위해서는, 프론트엔드에서 fetch로 API를 가져와야 합니다. 그리고 json 처리와 response 등의 추가 작업을 진행해야 합니다.

그러나 Graphql의 클라이언트 라이브러리 중 하나인 Apollo를 활용하면 위의 작업들을 모두 대신해 주기 때문에 더욱 편하게 개발할 수 있는 장점이 있습니다. API 서버에서 데이터를 가져오기 위한 HTTP 요청들을 신경쓰지 않아도 됩니다.

즉, GraphQL과 Apollo가 각각 REST API와 Redux를 대체할 수 있게 되었습니다.

😀 GraphQL을 사용하면…

REST API보다 간결한 코드 작성이 가능
React와의 호환성이 좋음, Fetch 등의 작업이 필요 없음
Graphql + Apollo 조합으로 Redux까지 대체 가능(Local state 조작 가능)

GraphQL의 장점 : https://chanhuiseok.github.io/posts/gql-1/

이번 포스팅부터는 백엔드로 Graphql 서버를 만들 것입니다. 즉 다양한 사이트에서 제공하는 오픈 API를 Graphql로 감싸고 프론트엔드가 Graphql 서버에 직접 쿼리를 요청해서, (오픈 API가 제공하는) 데이터의 읽기, 추가, 수정, 삭제 등을 할 수 있습니다.

즉, Graphql 서버를 만듬으로써 Graphql로 API를 만들고자 합니다.

그리고 이렇게 만든 Graphql 서버를 이용해서 오픈API를 활용한 웹 페이지까지 간단하게 만들어 보는 것이 목표입니다.

이제부터 작성할 내용은 노마드 코더의 강의 를 공부하면서 참고하였습니다.

✍ 1. 프로젝트 셋업하기

🚀 프로그램 설치하기

윈도우에서 개발하는 환경을 기준으로 말씀드리겠습니다.

추천하는 IDE(통합 개발 환경) : Visual Studio Code
- 다운로드 : https://code.visualstudio.com/
yarn 설치 : node.js 설치 시 패키지를 관리 툴인 npm이 설치되는데, yarn 은 npm을 대체할 수 있는 더 빠르고, 부가 기능을 제공합니다. 따라서 yarn을 설치해 두도록 하겠습니다.
- 다운로드 : https://classic.yarnpkg.com/en/docs/install#windows-stable
- 설치한 이후 cmd에 yarn -v 를 입력해서 버전이 정상적으로 뜨는지 확인한다.

🚀 graphql 프로젝트 설치하기

원하는 경로에 개발 폴더를 하나 만듭니다.
github에서 graphql 서버 코드를 저장할 레포지토리를 미리 하나 생성해 놓습니다.
- 레포지토리를 생성할 때, Add .gitignore 항목에서 Node 를 지정하면 추후에 설치될 파일들을 git 저장소에 모두 올리지 않도록 할 수 있습니다. 체크해 준 뒤 생성해 주세요!
Visual studio code에서 워크스페이스를 만든 폴더로 지정하고 엽니다. 그리고 vs code 내의 터미널에서 yarn init 명령어를 입력합니다.
이후 나오는 입력 항목들 중에서 공백으로 된 곳은 엔터로 넘기시고, description, repository url, author 등의 인적사항 부분은 자신의 것으로 채워서 입력합니다.

git repository 설정을 해줍니다. 터미널에 다음과 같이 입력합니다. 아래 YOUR_NAME 등은 예시이며, 깃허브 주소는 자신의 저장소 주소를 입력해야 합니다.

$ git init
$ git remote add origin https://github.com/{YOUR_NAME}/{YOUR_REPO.git}
$ git pull origin master

graphql 프로젝트를 쉽게 설치해 주는 graphql-yoga 를 설치합니다. 터미널에 다음과 같이 입력합니다.

$ yarn add graphql-yoga

설치가 완료되면 다음과 같은 파일 목록이 생성됩니다.

여기까지가 graphql 서버를 만들기 위한 기본적인 프로젝트 셋업입니다. 다음에는 본격적으로 서버를 구성해 보겠습니다.

[GraphQL] GraphQL로 API만들기 (1) - 프로젝트 셋업