전체 글29 5. Schema 확장시키기(2) 잘따라오고 계신가요 ㅎㅎ 그럼 이제 조오금 더 복잡한 쿼리를 만들어 보도록 하겠습니다 :) type Person { id: Int! name: String! age: Int! gender: String! } type Query{ people: [Person]! person(id: Int!): Person } 쿼리에서 people을 요청하면 Person의 배열을 받게 될껍니다. 그리고 특정한 id를 주면서 person을 요청하면 Person을 주게 됩니다. 이때는 !를 붙이지 않았는데 해당 id를 못찾을 수도 있기 때문에 필수요소에서 제거해주었습니다! Person의 배열을 받아야 하므로 저장될 데이터가 많아지게 되겠죠. 데이터를 효율적으로 관리하기 위해 db.js 의 파일에 데이터들을 분리시켜 줍니다. e.. 2019. 7. 31. 4. Schema 확장시키기(1) 저번 시간에는 서버의 작동을 보기 위해 간단한 Query와 Resolvers를 정의해서 테스트해 보았습니다. 이제부터는 조금 더 응용된 스키마들을 작성해봅시다~ Query요청을 name이 아닌 person으로 바꿔볼까요! person을 요청했을때 알려주어야 하는 student 데이터 타입이 정의가 안되어 있기 때문에 student라는 데이터 타입도 정의해줍니다. type Student { name: String! age: Int! gender: String! } type Query{ person: Student! } resolvers.js 에서 person요청을 하면 Sso를 리턴해주도록 만들어 줍니다. 이때 Sso가 무엇인지 모를테니 Sso에 대한 정보도 위에 정의해주도록 합시다 ㅎㅎ const Sso.. 2019. 7. 31. 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. 이전 1 2 3 4 5 다음
