API

API

    [GraphQL #5] GraphQL 클라이언트

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

    [GraphQL #3] 스키마 설계

    해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL API에서 사용하는 데이터 타입의 집합을 스키마(Schema)라고 한다. 백엔드 팀은 스키마를 보고 어떤 데이터를 저장하고 전달해야 하는지 이해할 수 있으며, 프론트엔드 팀은 사용자 인터페이스 작업을 할 때 필요한 데이터를 정의할 수 있다. GraphQL은 스키마 정의를 위해 SDL(Schema Definition Language, 스키마 정의 언어)을 지원한다. 이번 포스팅에서는 GraphQL SDL에 대해서 알아보고자 한다. 이를 위해 간단한 사진 공유 어플리케이션 스키마를 만들어 보려고 한다. 타입 정의 사진 공유 어플리케이션의 주요 타입은 User와 Photo이다..

    [GraphQL #2] GraphQL 쿼리어

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

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

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

    [React] Context API

    이번 포스팅에서는 리액트의 Context API의 개념과 Use Cases에 대해서 정리해 본다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 예를 들면 프로젝트 내의 환경 설정, 사용자 정보와 같은 것들이 있을 수가 있다. 과거에는 이러한 데이터를 최상위 컴포넌트의 state에 담아서 props로 전달했었다. 하지만 이렇게 하는 경우 컴포넌트의 깊이가 깊어질 수록 거쳐야 하는 컴포넌트가 많아서 번거로움이 있었다. 이를 해결하기 위해서 Redux나 MobX와 같은 별도의 라이브러리를 사용하기도 하지만, 별도의 라이브러리가 없어도 Context API를 통해 전역 상태를 관리할 수가 있다. 지금부터 리액트 공식 문서에서 제공하는 Context API를 하..

    [TroubleShooting] Content-type: x-www-form-urlencoded에서 POST 데이터 보내기

    오늘은 최근에 내가 개발을 하면서 몇 시간동안 고민한 이슈에 대한 정리를 해 보려고 한다. 이 이슈는 내가 어떤 회사에 입사하기 위해 치뤘던 코딩 과제를 하는 도중에 발생하였다. 다행히도 이 과제 기한을 48시간을 주어서, 몇 시간 삽질을 해도 완성 후 제출할 수 있었으나, 만약에 짧은 시간에 해결을 해야 하는 경우였다면 문제를 해결하지 못했을 것이다. 내가 했던 삽질을 앞으로 나를 포함한 누구도 하지 않고 시간을 아끼기 위한 마음에 내용을 정리해 보고자 한다. 먼저 나는 REST API가 구현된 서버 코드를 이미 받은 상태였고, 이미 잘 구현된 API를 그래도 가져다 쓰기만 하면 되는 것이었다. README에 명세된 API는 다음과 같은 조건을 가지고 있었다. POST 메서드로 Content-Type은..