graphql

graphql

    [데동여지도] 프로젝트 소개 Part 1. Web Frontend

    데동여지도(dedongyeo) 프로젝트에 대해 설명하는 글을 파트 별로 작성해 보고자 한다. 데동여지도는 2021년 넥스터즈 18기에 만들어진 팀(팀이름: Oh!When?, 우리 언제 만나? 라는 의미)에서 시작했으며, 커플들의 데이트 코스를 기록하고 저장하는 웹/앱 어플리케이션이다. 주요 기능으로는 지도에서 커플들이 방문한 스팟 조회 및 커스텀 스팟 생성, 스티커 찍기, 코스 만들기, 코스 저장하기 등이 있다. 첫 번째 포스팅에서는 웹 프론트엔드 파트의 기술 스택 및 아키텍처를 설명하려고 한다. 기술 스택 웹 프론트엔드에서는 다음과 같은 언어 및 라이브러리, 프레임워크를 사용하였다. TypeScript 4.1 Next 10.x React 17.x Apollo Client GraphQL MapboxGL ..

    [GraphQL #5] GraphQL 클라이언트

    해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 이번 포스팅에서는 클라이언트에서 GraphQL을 사용하는 방법에 대한 내용을 포스팅 해보려고 한다. 예를 들어 cURL을 사용한다고 했을 때 다음과 같은 값들을 요청 보낼 때 사용할 수 있다. 쿼리 : {totalPhotos, totalUsers} GraphQL 엔드포인트 : http://localhost:4000/graphql 콘텐츠 타입 : Content-Type: application/json 이렇게 요청을 보내면 JSON 형태로 다음과 같은 형태의 결과를 받을 수 있다. cURL이 아닌 다른 HTTP 요청 수단도 물론 사용할 수 있다. 브라우저에서 동작하는 간단한 클라이언트를 ..

    [GraphQL #4] GraphQL API 만들기

    해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL 서비스를 만들 때는 여러가지 언어로 개발을 할 수가 있다. 그 중에서 아무래도 가장 많이 쓰이는 언어 중 하나는 자바스크립트이며 아폴로팀에서 만든 오픈 소스 apollo-server를 현업에서는 많이 사용하는 편이다. 아폴로 서버는 설정하기가 간편하고 프로덕션 레벨에서 사용할 수 있는 여러 가지 기능들을 제공한다. 여기에는 서브스크립션, 파일 업로드, 데이터 소스 API 등등이 포함된다. 그래서 이번 포스팅에서는 아폴로 서버를 가지고 코드를 짜 보려고 한다. 프로젝트 세팅은 다음과 같이 할 수 있다. apollo-server와 graphql을 설치해야 아폴로 서버 인스턴..

    [GraphQL #2] GraphQL 쿼리어

    해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 우리가 익숙하게 쓰던 SQL이라는 구조화된 영문 쿼리 언어가 있다. 이 언어는 오랜 시간 많이 사용되어오면서 REST와 궁합이 좋았고 나름대로의 장점을 가지고 있었지만, 한계도 분명히 존재헀다. 이를 보완하기 위해 만들어진 GraphQL은 쿼리 데이터베이스 용으로 만들어진 개념을 가져다가 인터넷에 적용해 만들어진 것이다. GraphQL 쿼리 하나로 여기저기 흩어져 있는 데이터를 한데 모아서 받는다. SQL과 GraphQL은 모두 쿼리 언어(Query Language)라는 공통점을 가지고 있다. 차이점은 SQL 쿼리는 데이터베이스로 보내는 반면, GraphQL 쿼리는 API로 보낸다. ..

    [GraphQL #1] GraphQL의 배경, 장단점 및 그래프 이론

    해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL이란? 클라이언트의 종류가 다양해지고 복잡해지면서 서버로부터 데이터를 받아와서 빠르고 손실없이 클라이언트에 전송하는 기술은 끊임없이 발전해 왔고 현재도 진행 중에 있다. GraphQL은 이 과정에서 만들어진 쿼리 언어이다. GraphQL 쿼리는 실제로 필요한 데이터만 받도록 작성할 수 있다. 응답은 JSON 형태로 주어진다. 쿼리문을 중첩하여 실행하면 연관된 객체를 응답 데이터로 같이 받을 수도 있다. GraphQL 서버에서는 쿼리가 실행될 때마다 타입 시스템에 기초해 쿼리가 유효한지 검사한다. GraphQL 서비스를 만드려면 GraphQL 스키마에서 사용할 타입을 정의해..