analogcoding

프로젝트에 앞서 설정 맞추기에 들어갔다. ESlint 는 에어비엔비룰을 사용했고 프리티어로 문법 교정을 통일했다. node modules 같은 파일/폴더는 gitignore 에서 제공하는 양식을 사용했다. 1.eslint config airbnb , eslint , plugin-import 설치 $ yarn add eslint-config-airbnb-base eslint eslint-plugin-import 2.프로젝트 폴더 내부에 .eslintrc.js 파일 생성 3. 코드작성 module.exports = { env: { browser: true, es6: true, node: true }, extends: "airbnb-base", globals: { Atomics: "readonly", Shar..

라이브러리 설치 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,nickname,password,email 등 많은 정보가 있어도 직접 정의해서 id , nickname 등 필요한 정보만 가져와서 overfetching 을 방지할 수 있다.) react 에서 필요한 부분에서 ..

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..

RDS Amazon relational database service 관계형 데이터 베이스 서비스 클라우드에서 관계형 데이터 베이스를 간편하게 설정, 운영, 확장하는 서비스. Amarzon Rds는 여러 데이터베이스 인스턴스 유형(메모리, 성능 또는 I/O 최적화) 제공 Amazoon Aurora, PostgreSQL, MySQL, Oracle Detabase 및 SQL Server를 비롯한 6개의 익숙한 데이터베이스 엔진 중에서 선택하여 사용할 수 있음 데이터베이스의 크기는 기본(m4), 메모리 최적화(r3), 마이크로(t2), 총 3가지 카테고리로 나뉨 데이터베이스 대신에 RDS를 사용하게 되면, OS 및 데이터베이스의 설치 및 관리 그리고 업데이트를 따로 할 필요가 없어짐 게다가, AWS 콘솔이나 ..

클라이언트와 정보 유지를 하기 위해 사용하는 것 서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않는다. 그때마다 서버는 클라이언트에 대한 인증을 해주어야 한다. 이러한 일은 웹페이지의 로딩을 느리게 만드는 요인이다. 이것을 해결하는 방법이 바로 쿠키와 세션이다. 쿠키(Cookie) 하이퍼 텍스트의 기록서(HTTP)의 일종으로 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일이다. - 서버에 접속 시 접속한 클라이언트 정보를 자신의 하드 디스크에 저장했다가 필요할 때 참조나 재사용한다. - 일정 시간동안 데이터를 저장할 수 있어 로그인 상태를 유지할 수 있다. - 4KB 이하 저장 가능 - 이름, 값, ..