개인적으로 제가 고등학교를 가기 전에 제가 직접 만든 블로그를 운영해보고 싶었습니다.
그러기에는 구현해야 될 것이 너무 많았죠. API 서버, DB 모델 구현, DB 연동,
로그인 / 로그아웃 구현, 프론트엔드 디자인 등 혼자 하기에는 많이 벅찼습니다.
그로 인해 한참 미루고 미루던 도중, GraphQL 이란 것을 알게 되었습니다.
GraphQL 이란?
GraphQL은 간단히 말해서 기존 SQL 언어 등과 유사한 Query Language 입니다.
기존 API를 불러오는 방식은 API 서버에 요청을 보내고, Fetch를 통해 그 응답을 긁어오고,
그를 통해 불러온 Body를 json화해서 하나하나 할당하는게 기존 방식이었습니다.
물론 이건 제가 썼던 방식입니다. 아직 부족한 개발자라 더 좋은 어떤 방식이 있을 지는 모르겠지만, 다들 비슷할 거라 생각합니다.
이로써 생기는 문제점이 여러가지 있었습니다.
제일 먼저, 어디서 오류가 발생하는지 몰랐습니다.
블로그 포스팅을 예로 들어 봅시다. 블로그 포스팅은 제목, 작성자, 생성 된 날짜, 내용, 이미지
또 그에 대한 댓글 등을 불러오죠. 여기서 이미지에 대해 오류가 났다고 칩시다.
서버에서 클라이언트쪽으로 이미지를 불러오는 과정에 DB쪽에서 오류가 난 겁니다.
서버 쪽에서는 에러가 나자 바로 에러를 catch 하고 클라이언트 쪽에는 오류를 발송합니다.
그로 인해 클라이언트 쪽에서는 파싱 과정에서도 에러가 나고, 화면에 띄우는 과정에서도
에러가 납니다. 그걸 디버깅하는 개발자 쪽에서는 난감할 따름이죠.
두 번째로는 얼마나 복잡하냐에 따라 서버 쪽에서 처리 과정이 오래 걸릴 수 있습니다.
간단히 데이터를 주고받는 과정이라면 모르겠지만, 거대한 SNS 를 운영한다면요?
제가 제일 자주 쓰는 페이스북을 예로 들어보겠습니다. 누군가의 글에 들어가면,
제일 먼저 맨 위에 작성자의 정보가 뜹니다. 이름, 쓴 날짜, 그 사람이 올린 스토리 등이 표시되고,
내용, 이미지, 영상, 링크가 그 뒤로, 맨 마지막으로는 댓글이 있습니다.
이렇게 많은 정보를 주고받을 경우에는 여러 번 요청을 보내거나, 한 번 요청을 보낼 때 오래 걸릴 수 있습니다.
세 번째로는 너무 많은 데이터가 주고받습니다.
블로그 포스팅을 예로 들면, 한 블로거의 프로필을 쭉 봅니다.
그 블로거에 대한 정보, 올린 게시글 등이 표시가 될 것입니다.
여기서 올린 게시글에 집중을 해 보면, 썸네일 방식으로 표시가 되겠죠?
제목과 그에 대한 썸네일 사진, 그리고 포스팅 내용의 일부 등이 요약되어 나올 것 입니다.
하지만 여기서 블로그 미리보기 기능을 구현하기 위해 블로그의 정보를 API 서버로부터
불러온다고 칩시다. 블로그의 제목, 썸네일, 내용이 필요하겠죠?
하지만 여기서 문제점이 발생합니다. 필요하지 않은 블로그 내에 사진, 영상, 링크,
댓글 등이 뒤로 딸려온다는 것 입니다.
이렇게 기존 REST API의 문제점을 간단히 요약해봤습니다.
이를 극복하기 위해, 페이스북은 GraphQL 이라는 새로운 것을 도입했습니다.
이에 제일 큰 특징은 두가지,
Overfetching : 많은 정보를 불러오는 과정에서 리소스 낭비 발생을 방지
Underfetching : 정보를 불러오는 과정에서 서버에 여러 번 요청을 보내거나, 보내는 과정이 오래 걸리는 것을 방지
이 두 가지 특징을 위의 문제점과 일치시켜 보면, Overfetching은 3번째 문제점,
Underfetching은 2번째 문제점과 일치시킬 수 있습니다.
페이스북은 거대한 SNS 커뮤니티 사이트를 운영하는 만큼 그에 최적화된 새로운 시스템을
도입함으로 더 편리하고, 빠른 페이스북을 만들게 되었습니다.
저 두 가지 특징으로 인해 기존 RESTful API를 버리고 GraphQL 기반 API를 도입하는
개발자들이 많아지고 있습니다.
저 또한 그렇습니다. 기존 복잡하게 DB 모델링을 하지 않고, 그저 Schema를 편집하고,
Prisma 데이터베이스를 사용하면 간단하게 CRUD 기능을 완성할 수 있기 때문입니다.
그래서 배우는 과정은?
저는 이 분의 번역된 강의 를 참고해 배웠습니다. GraphQL의 공식 튜토리얼 문서를 번역한 시리즈인데, 이해도 잘 되고 번역도 정말 잘 해주셨습니다. 감사드립니다.
클라이언트를 만드는 시리즈에서는 약간 끊겨 있지만, 저는 이 문서 를 통해 Apollo JS를 사용하고 Query 전송과 Mutation을 사용하는 법을 익혔습니다.
아쉽게도 영어로 적혀 있고 번역된 곳이 별로 없긴 하지만, 고등학교 수준의 영어 실력을 가지고 계신다면 충분히 이해하실 수 있을 겁니다. 저 또한 그랬습니다.
마치며
GraphQL은 기존 RESTful API 방식을 버리고 새로운 방식을 채택함으로써
저는 혁신적인 기술이라고 평가합니다. 얼마 되지 않아, GraphQL은 상용화 될 것이라고 확신합니다. 웹 개발 트렌드는 금방금방 바뀔 뿐더러, 실제로 사용하고 있는 기업들이
증가하고 있기 때문입니다. 또한 사이드 프로젝트에도 반영하기 쉬운 편입니다.
개인적으로 배움을 추천드립니다. 이로써 글을 마치겠습니다.
