전체 글
-
graphQL 설치 및 깃허브 푸쉬GraphQL 2019. 12. 9. 21:17
npx 리액트 설치후, 그 파일의 폴더로 이동후,(cd 폴더명) 깃허브에서 레포지터리 생성후 (README.md 생성 안했음) cmd에 다음과 같이 입력 git init git remote add origin [깃허브주소] git pull origin git add . git commit -m "Initiail commit" git push origin master code . 이후 add 할것들 yarn add react-router-dom yarn add react-router-dom apollo-boost @apollo/react-hooks graphql yarn add react-apollo@2.5 (예전버전으로 사용) Apollo Boost : GraphQL을 위한 클라이언트
-
191207~1212_TILTIL(Today I learned) 2019. 12. 7. 20:22
12월07일(토) GraphQL 기초강의 학습 완료 이번 강의에서 GraphQL를 활용하는 간단한 예제를 보며 그래프큐엘이 어떤것인지 살펴볼 수 있었다. 아직 이렇다할 확실한 개념이 잡히는건 아니지만.. 다음 강의인 GraphQL을 활용한 프론트단 강의를 보면 개념이 잡히지않을까.. 생각한다. 12월08일(일) GraphQL과 아폴로 강의 학습 12월09일(월) GraphQL과 아폴로 강의 학습완료 토이프로젝트 'Youflix' 다시 시작.. 너무 거창한거를 만드려고하다보니 쉽게지쳤다. 그래서 지우기를 반복한게 세번정도.. 이번엔 거창한거보단 조잡하더라도 토이프로젝트 완성을 목표로 하겠다. 12월10일~12월12일(목) 리액트훅 강의 학습완료 리액트훅의 탄생 배경을 알게되었고, 여러 기능들의 활용법을 알..
-
GraphQL로 REST API 감싸는 법카테고리 없음 2019. 12. 7. 20:12
REST API란? Representational State Transfer의 약자로.. 자세한건 클릭 yarn add node-fetch - Node.js에서 fetch를 할 때 필요 참조 GraphQL로 REST API 감싸기 세번째 사진인 db.js를 눈여겨 봐야한다. fetch를 활용해서 url를 이용해서 GraphQL로 REST API를 감싸주었다. 오래된 서버를 갖고있거나,GraphQL을 넣을 수 없다면 이런식으로 하면 된다. GraphQL로 REST API 감싸기(limt,rating 추가하는법) db.js코드 import fetch from "node-fetch"; const API_URL = "https://yts.am/api/v2/list_movies.json?"; export cons..
-
스키마 활용 예시(Mutation)GraphQL 2019. 12. 7. 18:53
playground란? graphql-yogo에 따라오는건데, 내 데이터베이스를 테스트하게 해주는것 yarn start후에 localhost:4000로 접속하면 볼수있는 화면이고 여기서 api를 테스트 해볼수있다. GraphQL Resolvers GraphQL Resolvers는 GraphQL 서버에서 요청을 받음 GraphQL 서버가 Query나 Mutation(설명)의 정의를 발견하면 resolvers.js를 찾을것이고, 해당 함수를 실행함 여기선 db.js파일을 따로 생성해,데이터를 따로 빼놓음 db.js 코드 구조 let movies = [ { id: "0", name: "Star Wars - The new one", score: 1 }, { id: "1", name: "Avengers - The..
-
GraphQL 특징,서버만들기,스키마..GraphQL 2019. 12. 5. 22:14
GraphQL로 해결 할 수 있는 문제 Over-fetching - 내가 요청한 영역의 정보보다, 많은 정보를 서버에서 받는 경우를 뜻함 Under-fetching - REST에서 하나를 완성하려고 많은 소스를 요청하는거 - 예) 인스타그램 클론 앱에선 알림,유저정보,피드 정보들을 3번씩 주고받야아 실행됨 GraphQL 특징 URL이 존재하지 않음 /feed , /notifications/, /user/1/ -> 이 모든 경로를 하나의 쿼리로 만들 수 있음 GrapQL로 서버 만들기 yarn add graphql-yoga yarn global add nodemon nodemon. 내가 파일을 수정할 때마다 서버를 재시작해줌 yarn add babel-cli --ignore-engines import { ..
-
191201~1205_TILTIL(Today I learned) 2019. 12. 3. 00:18
12월01일(일) Typescript강의를 들었다. Typescript와 리액트를 같이쓰는 강의 학습 완료 TypeScript를 활용한 간단한 블록체인 만드는 강의 학습 12월02일(월) TypeScript를 활용한 블록체인 강의 학습 완료 리액트 네이티브 (날씨 앱) 강의 학습 시작 리액트 복습겸 유튜브api와 리액트를 활용해서 토이프로젝트를 하려고했으나 유튜브api 사용이 번거롭게 변경이 된듯해서 안하고 빠른 진도를 택했다. 노마드코더 로드맵중에 리액트 로드맵과, 인스타클론 로드맵이있는데 인스타클론 로드맵으로 택하고 진행 중.. 많이 고민했었는데,어차피 먼저 배우고 늦게 배우냐뿐이지 전부 다 해야해서 크게 신경쓰지않기로했다.ghk 12월03일(화) 리액트 네이티브 강의 학습중.. 리액트 네이티브와 e..
-
타입스크립트 설정TypeScript 2019. 12. 1. 18:07
yarn global add typescript // 모든 결과물에 타입스크립트가 필요해서 글로벌로 설치해줬음 tsconfig.json 파일 생성 타입스크립트에게 어떻게 자바스크립트로 변환하는지 알려주고, 몇몇 옵션을 설정해주기위한 파일임 { "compilerOptions": { "module": "commonjs", // node.js를 평범하게 사용하고 다양한 걸 import하거나 export할 수 있게 만드는거임 "target": "ES2015", // 어떤 버전의 javascript로 컴파일 되고 싶은지적는것 "sourceMap": true }, // 다음으로 어떤 파일들이 컴파일 과정에 포함되는지 TypeSCript에게 알려줌 // 컴파일 과정에서 포함할 파일의 배열을 적으면 됨 "include..
-
TypeScript란 무엇인가?TypeScript 2019. 12. 1. 17:31
TypeScript란..? TypeScript란 자바스크립트 superset언어인데, 자바스크립트 처럼 생겼고 컴파일하면 자바스크립트로 컴파일됨 즉 자바스크립트 위에있고, 타입스크립트에 작성하는건 모두 자바스크립트로 변한다. 왜 사용할까? 타입스크립트를 왜 사용하는지 배우기에 앞서 자바스크립트의 장점부터 살펴보자 자바스크립트는 엄격한 규칙이 없어 사용하기 쉽고 사용자가 원하는 방향으로 수정하기 편하다. 그러나 이러한 장점이 때론 단점이 된다. ( 큰 프로젝트나, 팀으로 일을할때 버그발생이 쉬움) 그래서 typescript가 탄생함 TypeScript 의 장점 예측가능한 언어 읽기쉬운 코드 (니콜라스는 타입스크립트는 자바스크립트의 업그레이버전이라고 생각한다고함)