프로그래밍 공부하기

Tour Sight Search 우리나라 관광지 검색 서비스 깃허브: 프론트 엔드, 백엔드 프론트엔드: React-Hook, Apollo, GraphQL, styled-component 백엔드: GraphQL, REST API 사용 API: 한국 관광공사 Tour API 3.0 기능: 키워드 검색 관광지 좋아요 표시 GraphQL을 이용하여 간단한? 우리나라 관광지 검색 서비스를 만들어보았다. 처음 시작은 정말 간단히 끝날 것이라 생각했지만 GraphQL이 지난 년도에 바뀐 부분이 좀 있어서 공식문서 외의 구체적인 자료를 찾기가 상당히 어려웠다. 또한 리액트에 아직 익숙하지 않아서 고생했던 부분도 있었다. 하지만 계속 노력하니 내가 원하는대로 결국 만들어졌다! 물론 나중에 보면 내부코드나 디테일한 부분들..

이전에 만든 GraphQL 서버로의 요청은 ApolloClient를 통해 가능하다. apollo공식문서 와 강의를 참고하여 간단한 클라이언트를 구현해보자. 1. 세팅 npx create-react-app tour-client 먼저 React 프로젝트를 생성한다. npm install @apollo/client graphql @apollo/client와 graphql을 설치한다. 사실 몇 개월 전만 해도 apollo-boost를 사용했었는데 공식문서에 의하면 지원하지 않는 몇 가지 고급 기능이 있으므로 ApolloClient를 사용하라는 문구를 볼 수 있다. 또한 @apollo/react-hooks, react-apollo도 @apollo/client에 통합되었다고 한다. 2. Client 생성 impor..

기존 REST API를 GraphQL로 감싸는 방법은 다음과 같다. 이를 실습을 통해 직접 알아보자. 기존 REST API의 정보를 기반으로 스키마를 만든다. 기존 REST API에 정보를 요청하고 이를 반환하는 함수를 만든다. GraphQL의 리졸버에 2에서 만든 함수를 연결한다. 1. 스키마 작성 기존 API를 기반으로 스키마를 작성하여야한다. 나는 Tour API의 searchKeyword 에서 검색 부분을 GraphQL로 감싸보기로 하였다. searchKeyword의 응답메시지는 다음과 같다. Tour API의 응답 메시지는 위와 같다. 이 항목들을 모두 포함한 데이터가 GraphQL의 응답이 될 것이다. 원래라면 위 항목을 모두 스키마로 표현해야하지만 나의 경우 연습을 위한 것이므로 몇 가지 항..

1. API 다운로드 링크에서 Poke API를 찾아 Poke API의 Repo로 이동한 후 자신의 깃 저장소로 Pork 한다. 깃 저장소를 내 로컬로 클론한 후 Visual Code로 연다. npm install package.json이 있는 위치에서 npm install로 필요한 Dependency를 설치한다. "scripts": { ... "start": "node --experimental-json-modules src/index.js", }, "type": "module" package.json에서 scripts의 start 항목을 위와 같이 변경하고 type 항목을 추가하고 값을 "module" 로 준다. 이를 지정하지 않으면 자동으로 CommonJS로 실행되어 ES6 문법(import 등)을..

1. 공용 GraphQL API GraphQL 데이터 Query 요청을 실습하기 위해 공용 GraphQL API를 사용해보자. 공용 GraphQL API는 github.com/APIs-guru/graphql-apis에서 찾아볼 수 있다. 나의 경우 포켓몬고 정보를 기반으로 만든 PokeAPI를 사용하였다. GraphQL은 Playground나 GraphiQL 같은 내장 UI를 제공하며 우측 Docs 혹은 Schema 탭에서 API 문서처럼 데이터 형식에 대한 설명을 자동으로 제공한다. 따라서 처음 보는 API일지라도 Docs 탭의 설명을 보며 원하는 데이터를 요청할 수 있다. 2. Query 기본 PokeAPI의 Docs 탭을 보고 위와 같이 그림으로 나타낼 수 있다. 먼저 root 노드인 query는 ..

웹에서 데이터를 요청하고 처리하는 가장 대표적인 방식은 REST이다. RESTful 아키텍처란 데이터 처리를 크게 GET, PUT, POST, DELETE로 나누고(Method) 사용자가 어떤 데이터(URL)에 어떤 처리(Method)를 원하는지 요청하여 서버가 이를 제공하는 방식이다. 사용자가 요청할 때마다 필요한 정보를 제공하므로 쿠키, 세션에 정보를 저장할 필요가 없다. 최근 데이터 처리량이 증가하면서 REST 방식을 대체할 수 있는 Graph QL이라는 방식이 대두되고 있다. 1. REST와 GraphQL 최근 컴퓨터 뿐만 아니라 모바일, 모든 사물에서 웹에 접근 가능해 지면서 서버에는 점점 많은 데이터 요청이 들어오게 되었다. 이 때 REST 방식의 경우 데이터 요청방식과 응답방식이 정해져 있기..