analogcoding

Toy 37번 문제. NumberToString() 숫자를 문자로 변환시켜 리턴하는 문제. ex) 19 -> nineteen / 101 -> one hundred one 구현 실패 . 해결되면 다시 업로드 예정. 라이브러리 설치 npx install --save apollo-boost react-apollo graphql-tag graphql react apollo 구조 정리 react 환경에서 apollo 를 사용해서 graphQL data 를 가져오려면 먼저 apollo client 에서 서버와 연결하고 apollo privider 로 사용할 react 의 최상단 component 를 감싸준다. data 의 스키마에서 필요한 부분을 따로 정의하고 가져올 수 있는 양식을 만든다. (ex. 스키마에 id..

import React from 'react'; import { render } from 'react-dom'; import './index.css'; import App from './App'; import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "https://api.github.com/graphql", request: operation => { operation.setContext({ headers: { authorization: `Bearer your-personal-access-token` }, }); } }); render(, document.getElementById('root')); uri : 데이터..

개발 환경 설정 apollo-client react-apollo graphql-tag Apollo 클라이언트 만들기 import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { HttpLink } from 'apollo-link-http'; const cache = new InMemoryCache(); const link = new HttpLink({ uri: 'http://localhost:4000/' }) const client = new ApolloClient({ cache, link }) uri : 데이터를 가져 오기 위해 사용하는 graphql 끝점. 요청 : ..

1. graphql-yoga 설치 yarn add graphql-yoga 터미널 창에 위의 명령어를 실행시켜 graphql-yoga를 설치한다. 2. nodemon, babel 설치 yarn add nodemon yarn add babel-cli nodemon은 파일이 수정될 때마다 서버를 자동으로 재시작시켜준다. .babelrc 파일을 만들어 환경 설정을 해준다. package.json에 명령어를 추가한다. { "presets": ["env", "stage-3"] } nodemon을 실행 시키는데 babel을 통해 변환을 거치고 index.js를 실행시켜 서버를 실행시킨다 3.index.js 파일 생성 및 실행 //index.js import { GraphQLServer } from "graphql-y..

GraphQL이란 GraphQL은 페이스북에서 만든 API를 위한 쿼리 언어로 기존에 API를 구현할 때에는 REST API가 사용되고 있는데 REST API는 두 가지 단점이 있다. 바로 Over-Fetching 과 Under-Fetching이 발생하는데 이 두 가지 문제를 해결해 주는 것이 GraphQL이다. Over-Fetching이란 Over-Fetching 이란 필요한 정보만 받는 게 아닌 불필요한 정보까지도 서버로부터 받게 되는 것이다. User의 userName만 필요하지만 서버에 요청하게 되면 그 외에 정보까지도 전달받게 된다. ex) { "Users": [ { "id": "1", "userName": "test123", "email": "test123@gmail.com" } ] } use..

Toy 36번 문제. Tree 구조에서 모든 node 에 value 값을 변경한다. React router 라우터에 exact 가 없으면 한 페이지에 같이 나온다! exact={true} 가 없으면 중복되는 경우가 밑으로 싸인다. / 이거나 /xxx 나 / 가 들어가서 중복된 페이지가 렌더된다. React-Apollo란? Apollo는 REDUX를 대체 할 수 있는 GraphQL-Client의 하나이다. GraphQL을 기반으로 한 상태관리 플랫폼이며 클라이언트에서 GraphQL을 사용하여 데이터를 가져오는 UI를 만들 때 사용하기 좋다. fetch 형식이 아닌 query문을 정의하고 GraphQL 서버로 보내면 원하는 데이터 혹은 한 번에 많은 양의 데이터를 받아 올 수 있다. 캐싱을 자동으로 관리해줘..

Toy 35번 문제. 배열 내에서 연속된 숫자의 값이 가장 큰 경우를 리턴. Redux 미들웨어로 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리. 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 가능. 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 돕는다. 글로벌 상태 관리를 하게 될 때 굉장히 효과적이다. graphQL , apollo 이후 계속! graphQL 프로젝트에서 apollo 와 graphQL 을 사용하기에 앞서 graphQL 정리에 들어갔다. graphQL 은 데이터를 요청하는 방법에 일부로 정보를 얻기 위해 보내는 질의문(Query)을 만들기 위해 사용되는 언어이다. RESTful API 로는 ..