Phot_o_matic Programming

버전 관리란? : 버전 관리 시스템은 파일의 변화를 시간에 따라 기록하고, 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. Git이란? Git의 핵심 데이터를 다루는 방법에 특징이 있다. 데이터를 파일 시스템 스냅샷으로 취급하고, 크기가 아주 작다. Git은 커밋을 하거나 프로젝트의 상태를 저장할 때마다 파일이 존재하는 그 순간을 중요하게 여긴다. 파일이 달라지지 않았다면 성능을 위하여 파일을 새로 저장하지 않는다. 이전 상태의 파일에 대한 링크만 저장한다. (React가 가상 DOM을 이용하여 달라진 곳만 비교하여 재렌더하는 것과 비슷한 느낌이랄까) Git은 각 파일의 변화를 시간순으로 관리하지 않는다. 데이터를 스냅샷의 스트림처럼 취급한다. 대부분의 명령이 로컬에서 실행 거의 모든 명령이..

Programming/Git 2019. 10. 14. 15:08

어떤 정렬된 array가 주어졌을 때, array는 오른쪽 혹은 왼쪽으로 rotate 될 수 있다. ex) sorted array [0, 1, 2, 3, 4, 5, 6, 7] => rotated array [4, 5, 6, 7, 0, 1, 2, 3] rotated array 내에서 target이 되는 숫자를 찾으려면 어떻게 해야 효율적으로 할 수 있을까? 주어진 array의 길이를 n이라고 하였을 때, O(n)이 아닌 O(log n)의 복잡도로 해당하는 숫자와 일치하는 자리의 index를 반환하여라. 해당하는 숫자가 array 내에 없을 경우는 null을 반환하여라. For instance: rotatedArraySearch([4, 5, 6, 0, 1, 2, 3], 2) === 5 rotatedArray..

Programming/Algorithm 2019. 10. 7. 15:43

이전 글의 코드로 인하여, 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