본문 바로가기

1st life_Programmer13

3. Query와 Resolver를 이용해 간단한 서버 실행시키기 스키마를 마저 정의해주고 서버를 실행시켜줍시다. 스키마란? 주고 받을 정보에 대한 설명을 적은 것입니다. 사전지식 우리가 GraphQL로 할 수 있는 것은 세 가지가 있습니다. Query : 질문 어떤 데이터를 받을지 요청 Mutation : 변형 서버나 디비에서 정보를 바꾸는 작업 Resolver : 해결 쿼리가 질문한 것을 어떻게 해결할 것인지에 대한 해결방법 schema.graphql에 첫 번째 쿼리를 선언해보겠습니다. type Query{ name : String! } 디비에 name을 물어보면 String으로 대답을 받겠다는 설명입니다. (!는 필수요소라는 것을 뜻합니다.) 이렇게 쿼리로 데이터베이스에 어떤 정보를 원하는지 문제를 내주었습니다. 그렇다면 해결하는 방법또한 알고 있어야 겠죠?? 이.. 2019. 7. 31.
2. GraphQL Yoga로 GraphQL서버 생성하기 graphql yoga는 GraphQL 서버를 쉽게 만들어준다고 했었죠. 그렇다면 실제로 graphql yoga를 사용해서 서버를 만들어 보겠습니다! 우선 하나의 폴더를 만들고 그 안에서 yarn init을 해줍니다. 그 다음 필요한 모듈을 설치해줍니다. yarn add graphql-yoga : GraphQL 프로젝트 생성 yarn global add nodemon : 파일이 수정될 때마다 서버를 재시작 해줌 yarn add @babel/node @babel/core --dev : 간단하게 말하면 구식코드와 최신코드의 충돌을 막아줌 yarn ad babel-cli babel-preset-env babel-preset-stage-3 --dev : 바벨 환경설정 저는 github에 연동하기 위해서 .git.. 2019. 7. 31.
1. 혁신적인 Query언어 GraphQL (feat.graphql-yoga) GraphQL을 사용하는 이유와 쉽게 사용하는 방법에 대해 알아보도록 합시다. :3 graphql-yoga : 쉽게 설치하는데 중점을 둔 완전한 GraphQL 서버 말그대로 GraphQL을 쉽게 시작할 수 있게 만들어 줍니다. 프론트에서 예를 들자면 React의 create-react-app 명령어와 비슷합니다. create-react-app이 리액트 프로젝트를 쉽고 빠르게 시작할 수 있게 해주는 것처럼 graphql-yoga는 graphql 프로젝트를 쉽고 빠르게 시작할 수 있게 해줍니다! yarn add graphql-yoga GraphQL로 해결할 수 있는 문제 Over-fetching 예를들어 모든 유저들 이름을 웹사이트에 보여주고 싶을 때 URL이 /users/ GET라고 합시다. users에서.. 2019. 7. 31.
[React] Binding 바인딩 우선, 리액트에서의 바인딩을 알아보기 전에 자바스크립트에서 "this"에 대한 이해가 되어있어야 리액트에서의 바인딩을 알 수 있습니다. 자바스크립트 바인딩 객체안의 메서드에서 this는 그 메서드가 포함된 object를 가리키게 됩니다. var obj = { prop: 'Hello', sayHello: function() { console.log( this.prop ); } }; // 1. obj.sayHello(); //"Hello" // 2. var reference = obj.sayHello; reference(); // undefined sayHello 메서드안의 this는 obj객체가 되어 obj.prop인 Hello를 전달받아 콘솔 로그를 출력합니다. 변수 reference에 담길 때 obj와.. 2019. 7. 26.