가슴이 웅장해지는 라이벌 REST-API vs Graphql-API
API란 무엇일까?
API란 Application Programming Interface의 줄인말로 애플리케이션 이나 디바이스가 서로 간 연결하여 통신할 수 있는 방법을 정의하는 규칙! 이라고 하는데 이게 도대체 뭔 뜻이야...? 라고 생각할 수 있는 분들을 위해 내가 이해한 내용을 토대로 쉽게 설명을 해보도록 하겠다. 종종 API를 자판기에 비유하곤 한다. 자판기로 부터 내가 원하는 음료수를 뽑아 먹는 방식은 자판기에 돈을 넣고 버튼을 누르면 마시고 싶은 음료수가 나온다. 사실 이것이 API 그 자체라고 보면 쉽다. 이 자판기 과정을 좀더 세분화 하여 API와 비교해도록 해보겠다. 우선 원하는 음료수 만큼 돈을 넣는 것은 client가 요청하는 어떤 데이터를 요청하는 것과 같다. 돈을 넣고 원하는 음료가 있는 버튼을 누르는 단계는 API를 실행 시킨다고 보면 된다. 우리는 알 수 없지만, 자판기 내부적으로 버튼을 누르는 순간 어떠한 일련의 동작들이 이루어지며 내가 원하는 음료를 반환한다. 즉 API는 client의 요청에 따라 정해진 일련의 프로그래밍이 실행되어 client가 원하는 데이터를 반환 하는 작업 이라고 보면 된다.
REST-API, Graphql-API
API에 대해 이제 좀 알겠는데 그럼 REST-API랑 Graphql-API는 뭘까? 사실 API의 뜻만 알면 REST-API와 Graphql-API가 무엇인지 알기 쉽다. 자판기의 예시를 가져와 설명을 해보자면 어떻게 버튼을 누를것인가에 대한 방법이 REST-API와 Grapheql-API이다. 정해진 API에 대해 어떻게 어떻게 요청할것이고 어떻게 응답 받을 것인가에 대한 서로 다른 방법이 REST-API와 Graphql-API에 차이점이 오늘의 메인 주제가 될것이다. 그럼 먼저 REST-API를 설명해 보겠다.
REST-API
REST-API를 설명하기전 약간 다른 이야기를 먼저 조금 해보도록 하겠다. 과거 javascript에서는 XML(eXtensible Markup Language)문서로 데이터를 작성하여 주고 받았었다. 하지만 이러한 방법보다 최근에는 JSON(JavaScript Object Notation)방식으로 데이터를 주고 받는다. 자 그럼 사용자 입장에서의 REST-API를 소개해 보겠다. 사용자는 우리가 흔히들 사용하는 URI 형식으로 원하는 데이터를 받아 볼수 있다. 이게 무슨 뜻이냐? 간단하게 예시를 들어보겠다. 철수는 네이버 카페에 가고싶어서 컴퓨터를 켰다. 그럼 철수는 어떻게 네이버 까페에 갈수있을까? 여기서 우리가 흔히 아는 www.naver.com/cafe를 입력하면 cafe에 대한 정보를 받을 수 있을것이다. 여기서 감이좀 잡힐것이다. URI는 인터넷 주소 같은것이다. 내가 원하는 주소로 가면 원하는 데이터를 받을 수 있다. 이것이 REST-API 방식인 것이다. 그렇다면 개발자 입장에서 REST-API방식으로 API를 어떻게 다룰수 있을까? 기본적으로 개발자는 REST-API는 CRUD를 제공한다. CRUD(create, read, update, delete)를 사용하여 API를 다루는데 정확하게는 path(주소)를 지정하고 그곳에 create API를 만들고자 할때는 post방식 read API를 만들고자 할때는 get, update는 put 그리고 delete는 delete로 API를 만들어 사용자에게 제공한다.
REST-API의 postman,swagger
좀더 개발자적인 시야로 REST-API를 설명해 보겠다. API는 보통 백엔드 개발자들이 만든다. 본인들이 API를 만들면 제대로 만들었는지 테스트를 해봐야 한다. 테스트를 할때 사용되는 툴이 postman이다. postman은 내가 정한 path에 지정한 방식으로 URI를 작성하면 그것이 내가 원하는데 작성되었는지 확인해볼수 있게 해준다.
현재는 배포를 하지않아 localhost에서 보여지지만 /users라는 url에 get방식으로 접근하면 JSON형식으로 작성한 데이터들을 볼수있게해준다.
이렇게 테스트를 해보고 원하는데로 작동한다고 판단되면 백엔드 개발자는 프론트엔드 개발자에게 어떤 API가 작성되었는지에 대한 설명이 담긴 명세서를 전달하여야 한다. 이때 말로 하는것보다 더욱 확실한 커뮤니케이션 방법이 있으니, 그것은 swagger를 사용하는것이다. swagger는 백엔드 개발자가 API가 어떤 URL에 어떤 방식으로 데이터를 처리할수 있게 해놓았는지 알수있게 해준다.
이것은 내가 부트캠프에서 숙제로 한 내용인데 swagger는 /users에 가면 user에 GET방식으로 접근하면 어떠한 데이터를 받아볼수있는지 한눈에 확인이 가능하게 해주어 프론트 개발자와의 커뮤니케이션이 용이 해지게 해준다.
하지만 REST-API도 아쉬운점은 존재한다. 사용자는 JSON중에서도 특별하게 원하는 정보만 받고 싶을수도 있을것이다. 하지만 REST-API는 그것이 불가능 하다. 일단 JSON안에 담겨 있는 정보는 다 받고 그 다음 필요한 정보를 가져간다. 이것을 over-fetching이라고 하는데 필요 이상의 데이터를 받는것을 뜻한다. 하지만 원하는 정보만 받아보지 못하는 불편함보다 더 큰 문제는 over-fetching이 일어나면 불필요한 네트워크 트래픽이 일어난다는 것이고 즉 이말은 돈이 많이 든다는 것이다. 돈이 많이 드는것은 비지니스 모델의 효율성이 떨어진다는 것이고 비지니스 모델을 만드는 개발자에겐 아쉬운점이 아닐수 없다. 그래서 최근엔 REST-API에서 Graphql-API로 넘어가는 추세이다. 그렇다면 Graphql은 무엇이고 어떻게 REST-API와 다른것일까?
Graphql
글의 길이가 살짝 길어지는거 같아 걱정이긴 하지만 내 기준 백엔드 개발자를 목표로 한다면 반드시 알아야 되는것이고 같은 글에 써야 REST-API와의 차이점도 보기 용이 할거같아서 좀더 써보도록 하겠다.
위에서 언급하길, REST-API의 문제점은 over-fetching이라고 하였다. 그렇다면 당연 REST-API의 문제점을 수정하고자 나온 Graphql은 트래픽이 과도하게 일어나는 REST-API방식을 고쳐야 할것이다. Graphql은 사용자가 원하는 데이터만 받아올수 있는 기능이 기본적으로 탑재되어있다.
Graphql을 사용하기 위해서는 패키지를 받아야 한다. yarn을 사용해도 되고 npm을 사용해도 도지만 어쨋든 둘 중 하나는 선택해서 npm i apollo-server graphql로 동시에 apollo server와 graphql을 다운받던지 yarn add apllo-server graphql을 하던지 해서 패키지를 받고, 서버가 구동되는 파일에서 apollo-server와 graphql을 import 해와준다.
서버 파일(모듈)로 import를 해왔다면 graphql의 두가지 기능에 대해서 소개하고자 한다. 첫번째는 typeDefs와 resolver이다. REST-API는 API를 export를 해줄 파일(모듈)에서 API를 작성하고 프론트앤드 개발자와의 소통을 위해 swagger를 이용하여 API 명세서를 만들어 주었다면 Graphql은 한 모듈에서 두가지를 다 수행한다. Resolver는 API를 선언한다. API를 선언하고 어떤 값을 return 할지 정할수 있다. 여기서의 return은 REST-API의 res.send() 기능과 유사하여 어떤 값을 보내준다. resolver에서 선언하였다면 typeDefs에서 resolver에서 선언한 API가 어떤 인자를 갖을지 그리고 그 인자의 type으로는 어떤값이 들어올지 선언한다.
=> resolver에서 api선언
-> createBoard라는 API는 어떤 인자를 갖고 어떤 type의 데이터가 각 인자마다 들어갈지 선언 하는데 createBoardInput: CreateBoardInput! 이라고만 적혀있다. 이건 createBoard의 인자이름이 createBoardInput이고 그인자의 값으로 CreateBoardInput 이라는 input이 들어온다는 뜻이다.
*input이라 함은 createBoard 인자에 들어갈 키워드와 각인자의 타입을 정리하여 어떠한 변수에 넣고 그변수를 인자에 넣는것이다.
** 정리 해보자면 resolver를 먼저하던 typeDefs를 먼저 하건 순서는 상관 없지만 둘다 해줘야 제대로된 선언이 이루어지며 typeDefs에서는 createBoard가 갖는 인자값을 지정해줄수 있는데 input 기능을 이용하면 키워드를 주저리 주저리 쓰는게 아니라 어떤 변수에 키워드와 그 키워드에 어떤 타입의 데이터가 들어갈지 설정해주어 대입할수있다.
이런식으로 createBoard를 사용할때 소괄호 안에 들어갈 인자를 넣고 typeDefs에서 input을 이용하여 키워드(writer, title, contents)와 각 키워드마다 String 타입의 데이터를 받는다고 정의한대로 string type을 넣어 주었더니
return으로 지정된 값을 리턴받았다.
긴 글 읽어주서 감사하다! 정리가 잘 되었길 바라며 이만 글을 마치겠다
