Schema와 Resolver 만들어서 사용해보기 이전에 서버 기초적인 코드를 짰는데 실행시키니 Schema Not Defined라는 오류가 발생했습니다. Schema가 정의 되어 있지 않다는 뜻인데요. 이번에는 Schema를 등록시켜보고 그에 대응하는 Resolver를 등록하여 사용해보겠습니다. Schema에 명세 해놓은 것과 Resolver의 이름이 같아야합니다. 우선 Schema.graphql이라는 파일을 만들어서 typeDefs에 등록해줍니다. 그리고 schema.graphql을 켜봅니다, 그리고 쿼리 값 하나를 정의합니다. 오른쪽에 String은 이 쿼리의 반환타입이 String이라고 정의 해놓은 것입니다. 그 다음에는 Resolver.js(파일 이름은 상관없습니다.)를 만들어줍니다. 그리고 아..

Graphql을 왜해야 할까요? 필자는 과거에 Rest Api를 사용하여 웹서버를 개발했었는데 공부를 하다보니 Graphql이라는 API를 알게되었고 사용하면서 알게된 RestApi보다 좋은 점을 적어보려고한다. 1. UnderFetching RestApi는 일반적으로 url을 통해서 요청을 하고 결과값을 반환한다. 하지만 만약에 웹이 처음에 켜지고 너무 많은 요청들이 들어오면 서버가 과부화 될 수 있다. 하지만 GraphQL에서는 단 한번의 요청만으로 페이지에 필요한 모든 데이터를 가져올 수 있습니다. 2. OverFetching RestApi에서는 예를 들어 유저의 정보를 가져오는데 get /users를 쓸겁니다. 근데 클라이언트는 이름만 필요하는데 /getNames를 하나 새롭게 만드는 것도 불편하..

Graphql - node.js 시작하기 시작하기전 babel을 설정하여 es6문법을 사용할 수 있게해주세요. 그 후 https://github.com/prisma/graphql-yoga 이홈페이지에 접속하여 yarn add graphql-yoga 실행해주세요. 첫시작은 graphql-yoga에서 GraphQLServer를 호출하여 실행합니다. 이코드를 실행하면 Schema가 없다는 식으로 오류가 발생합니다. 다음시간에 Schema를 등록하여 코드를 실행시켜보겠습니다.

배열에 데이터가 보통 다수가 들어있다. 데이터에 반복문을 써서 하나하나 적용해주려면 귀찮은 상황이 발생한다. 이와 같은 상황에 적용하기 위해 map이 있는 것 같다. 배열 뒤에 map이라는 메소드를 붙인 뒤에 인자를 하나 전달 해줍니다 위 상황에서는 number가 됩니다. number는 배열의 데이터 한개한개입니다. number는 반복문 없이 자동으로 순서에 맞게 1, 2, 3, 4, 5가 됩니다. 이를 props를 통해 컴포넌트에 전달해죽고 return해주면 아래와 같이 됩니다.

나름 최근의 자바스크립트 문법을 씁니다. 그래서 function이나 reuqire 같은 것은 볼 수 없습니다. 클래스 형태의 컴포넌트 외부로 부터 Component와 React를 받아오고 있습니다. Component를 상속하여 render나 componentDidMount등의 라이프 사이클을 사용할 수 있고 setState 등을 호출 할 수 있습니다. 함수형 컴포넌트 사용하기 단순하게 props로 데이터를 받아서 보여주기만 할때 굳이 클래스를 만들 필요 없이 함수로 컴포넌트를 만들 수 있습니다. 그래서 State나 라이프 사이클을 사용하지 않을 때 사용하면 좋습니다. 그리고 props를 받아올 때 비구조화 할당을 사용하면 더 쉽게 받아올 수 있습니다. 그리고 이를 App클래스에서 호출 시켜보면 아래와 같..

PropTypes 사용하기 우선 yarn을 통해서 설치부터 해보자!! yarn add prop-types 설치가 완료됐으면 props를 받아오는 컴포넌트를 만들자 예를 들어서 이렇게 받아오는 props 데이터가 있다. import PropTypes from 'prop-types'; 이런식으로 불러온 후 아래와 같이 등록해주면 propTypes가 설정 된 것을 알 수 있다. 이렇게 사용해주는 이유는 첫번째 다른 타입이 들어왔을 때 오류를 방지해줄 수 있다. 두번째는 다른 사람들이 props의 정보와 타입을 쉽게 알아 볼 수 있어서 가독성이 올라가기 때문에 사용합니다.