Phot_o_matic Programming

이전 글의 코드로 인하여, Home 페이지 접속 시 필요한 정보들을 불러오게 되었다. Home에서 렌더된 각 영화를 클릭하면, 해당하는 영화의 id로써 세부 정보를 볼 수 있게 Detail로 이동시킬 것이다. Detail로 이동하였다 뒤로가기를 하여도 Home 페이지가 새롭게 정보를 요청하진 않는다. Apollo가 처음에 응답받은 데이터를 cache로 저장하고 있기 때문이다. 저장 중인 데이터는 Apollo Dev Tool의 cache 항목으로 가면 볼 수 있다. Detail.js params와 함께 routing import React from 'react'; import { Query } from 'react-apollo'; //render prop을 사용하여 컴포넌트를 만드는 경우에 //컴포넌트가 ..

Programming/GraphQL 2019. 10. 2. 23:53

이제까지 만들어놓은 GraphQL API를 사용하는 Apollo 클라이언를 만들어본다. react를 사용하도록 한다. 프로젝트를 시작하기에 앞서,필요한 모듈을 설치해준다. yarn add react-router-dom apollo-boost react-apollo graphql-tag graphql react-helmㄷt --save Apollo 이 중 Apollo Boost는 GraphQL 클라이언트를 가지기 위한 모든 것을 세팅해준다. GraphQL-Apollo 클라이언트의 cli 정도로 생각해주자. redux처럼 Apollo도 Provider를 가지고 있다. (container, present 등) client 생성/선언 Apollo Boost를 이용하여 client를 쉽게 형성하는 파일의 코드를 ..

Programming/GraphQL 2019. 10. 2. 21:06

지난 글에서 작성한 YTS API 사용에 이어, 좀 더 세분화된 기능을 추가해본다. db.js 기존에 사용하던 fetch는 사용하기 불편하여 axios를 사용해본다. axios는 request 시 endpoint 지정을 params라는 명칭으로 정의하여 요청할 수 있다. import axios from "axios"; const BASE_URL = "https://yts.lt/api/v2/"; const LIST_MOVIES_URL = `${BASE_URL}list_movies.json`; const MOVIE_DETAILS_URL = `${BASE_URL}movie_details.json`; const MOVIE_SUGGESTIONS_URL = `${BASE_URL}movie_suggestions.js..

Programming/GraphQL 2019. 10. 1. 21:38

GraphQL과 REST API를 함께 사용하는 경우, 어떻게 REST API를 wrapping 할지를 간단히 알아본다. GraphQL 서버에서 다른 서버로 데이터 요청을 한 뒤, 해당 정보에 대하여 처리하는 것이다. 여기선 node-fetch를 사용하여 YTS API에 요청을 보낸다. database를 구축하기 위하여 YTS API로 요청하기 기존의 db.js에 작성한 임의의 값이 아닌, API 요청 응답값을 기준으로 database를 구축한다. // API를 요청하는 URL const API\_URL = 'https://yts.lt/api/v2/list\_movies.json'; // URL endpoint인 limit과 rating을 인자로 받는 함수 // limit은 불러올 데이터의 개수, rat..

Programming/GraphQL 2019. 9. 30. 17:51

본격적으로 영화별 점수 매기기 관리를 위한 작업을 해 보자. Mutation의 사용법도 알아본다. 먼저 몇몇의 영화에 대한 정보를 입력해주자. 추가로 데이터베이스를 다루는 메소드도 추가해본다. db.js export let movies = [ { id: 0, name: "해바라기", score: "4" }, { id: 1, name: "바람", score: "5" }, { id: 2, name: "타짜", score: "4" } ]; export const getMovies = () => movies; export const getById = id => { const filteredMovies = movies.filter(movie => movie.id === id); return filteredMovi..

Programming/GraphQL 2019. 9. 30. 17:16

지난 시간에, graphql을 사용하여 간단한 스키마와 쿼리를 작성하였다. 작성한 것들에 조금 더 수정 보완하며 API를 만들어가보자. resolvers.js 이전보다 조금 더 복잡한 내용을 반환하게 한다. // 객체 형태로 반환하게 만들어보자 const Swoo = { name: 'swoo', age: 29, gender: 'male' } // person이라는 query에 대하여 Swoo 객체를 반환한다 const resolvers = { Query: { person: () => Swoo! } } export default resolvers schema.graphql resolver에서 반환할 데이터들의 타입 지정도 추가해준다. Swoo라는 객체 내에서 각각의 데이터 타입을 지정해주었다. person..

Programming/GraphQL 2019. 9. 30. 02:09

GraphQL-yoga를 통하여 빠르게 실습을 해 보았다. 먼저 설치부터 하자. npm install graphql-yoga --dev GraphQL 서버 오픈 스키마 설계에 앞서 서버를 여는 단계는 아주 간단하다. index.js import { GraphQLServer } from "graphql-yoga"; const server = new GraphQLServer({}); server.start(() => console.log("GraphQL Server Running")) 만약 import를 사용할 수 없는 상태라면 babel을 이용해본다. npm install babel-node babel-cli babel-preset-env babel-preset-stage-3 --dev 필요한 모듈 설치 ..

카테고리 없음 2019. 9. 28. 22:50

Schema Definition Language ex) 스키마 내에서 간단한 타입의 정의 // 1. Person type Person { name: String! age: Int! } // 2. Post type Post { title: String! } 관계를 추가하는 경우 => Person은 다수의 post를 가지고, Post는 각각 Person 하나의 author를 가진다. // 1. Person type Person { name: String! age: Int! posts: [Post!]! } // 2. Post type Post { title: String! author: Person! } Query로 데이터 fetching하기 (GET) GraphQL의 장점으로, 필요한 부분만 특정지어 불러올..

Programming/GraphQL 2019. 9. 27. 18:51