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

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

GraphQL이란? 페이스북에 의해서 만들어진 오픈소스 & 새로운 API 기준 선언형 데이터 fetching이 가능 GraphQL 서버는 단일 엔드포인드로 노출되어 쿼리에 응답 REST의 효율적인 대안? 증가하는 모바일 사용은 효율적인 데이터 로딩 필요 클라이언트 측의 다양한 프론트엔드 프레임워크와 플랫폼 대두 신속한 기능 개발 React 개발자만을 위한 것이 아니다! 어떤 프로그래밍 언어나 프레임워크와도 사용 가능 GraphQL VS REST REST REST의 강점 : stateless 서버, 자원으로의 구조화된 접근 엄격한 특징 : 하지만 개념이 거칠게 번역됨 클라이언트 측의 급변하는 요구가 REST의 정적인 환경과는 잘 안 맞다 GraphQL 클라이언트-서버 간 소통의 유연성과 효율성에 대한 요구..

Programming/GraphQL 2019. 9. 27. 17:29