본문 바로가기

개발바닥

 (27)
[개발] GraphQL - Interface와 Union에 대한 이해 안녕하세요 devport 입니다. 이번 포스팅에서는 graphql의 interface와 union 타입에 대해서 알아보도록 하겠습니다. interface Type interface type은 지정된 타입에서 특정 필드를 구현할 것을 약속하는 추상형식의 타입입니다. 그렇기 때문에 인터페이스에서 선언된 필드들은 정확히 유사하게 구현되어야 합니다. interface Human { id: ID! name: String guildId: ID } Type Knight implements Human { id: ID! name: String guildId: ID energy: Int } Type Wizard implements Human { id: ID! name: String guildId: ID mana: Int ..
[개발] GraphQL - DataLoader로 최적화 하기 안녕하세요 devport 입니다. 이번 포스팅에서는 GraphQL을 운영할 시에 필연적으로 발생하는 N+1문제를 해결 할 수 있는 DataLoader에 대해서 알아보도록 하겠습니다. GraphQL을 사용하고 어느정도 규모의 서비스를 운영하실 계획이라면 DataLoader 기법을 적용하는 것은 필수라고 생각합니다. GraphQL의 구조적인 문제로 인한 "N+1 문제" GraphQL은 데이터베이스로 데이터를 처리할때에 편리한 기능들을 제공하고 있습니다. 하지만 대량의 데이터를 가져오는데에 연쇄 리졸버로 연관된 데이터를 쿼리를 하게된다면 어떻게 될까요? 쿼리에 대한 데이터가 N개이고 또 내부의 리졸버가 N번 만큼 발생하여 데이터베이스에 쿼리를 하게되면 발생하는 쿼리의 수는 N번 만큼 발생하게 될겁니다. 이러한..
[개발] GraphQL - 관련 Tools 안녕하세요 devport 입니다. 이번 포스팅에서는 GraphQL에서 사용하는 Tools에 대해서 알아보도록 하겠습니다. Apollo extension for VS Code Visual Studio Code 에디터를 사용하시는 분들은 Apollo GraphQL Extension을 설치 할 수 있습니다. 확장모듈을 설치하게 된다면 다음과 같은 기능들을 제공하여 줍니다. js파일 내부의 gql 템플릿에 대한 Syntax-highlight표시 필드, 인자, 유형, 변수 입력시에 intelligent autocomplete가 피드백 쿼리 정의와 성능 정보 필드 및 인자 사용시 유효성 검사 점프 및 미리보기 기능 지원 등의 다양한 기능을 지원 해주기 때문에 VScode 사용자는 사용해보는 것도 나쁘지 않을 것 같..
[개발] GraphQL - Apollo Link 제어 안녕하세요 devport 입니다. 오늘은 Apollo Link 라이브러리를 이용해서 GraphQL로 CRUD시에 매칭되는 로딩 및 완료 팝업 문구를 띄울수 있는 방법에 대해서 알아보도록 하겠습니다. Apollo Link? Apollo Link 라이브러리는 Apollo Client와 GraphQL 서버 사이의 데이터 흐름을 사용자가 정의 할 수 있습니다. GraphQL의 Query 또는 Mutation을 수행할때에 사용자가 정의한 Link가 순차적으로 실행되며 Link를 통해 해당 데이터를 제어할 수 있도록 구현도 할 수 있습니다. Apollo Client는 기본적으로 사용되는 Apollo Link 중 HttpLink를 통해서 원격서버에 요청 작업을 전달합니다. HttpLink 뿐만 아니라 다양한 Link..
[개발] GraphQL - Apollo Client Cache 안녕하세요. devport 입니다. Apollo Client에서는 다양한 방법의 Cache 전략을 가지고 있습니다. 이번 포스팅에서 알아보도록 하겠습니다. Cache? 캐쉬는 임시로 데이터를 보관하는 장소입니다. 브라우저에서 같은 데이터 및 파일을 매번 네트워크를 거쳐서 요청한다는 것은 불필요할 수도 있습니다. 이럴때 매번 요청을 할 필요가 없는 경우에 한번 요청한 정보를 Cache에 저장하고 이곳에서 가져온다면 불필요한 네트워크 요청을 줄일 수 있게 됩니다. Apollo client cache Apollo Client는 쿼리를 하였을때에 결과물을 정규화하여 InMemoryCache에 저장을 하게 됩니다. 정규화 된 캐시를 통해서 GraphQL의 쿼리 성능을 크게 높일수 있게 됩니다. 이렇게 될 경우 G..
[개발] GraphQL - Vue + Apollo + GraphQL 안녕하세요 devport 입니다. 이번 포스팅에서는 지난 포스팅에서 작성한 Apollo 서버와 통신하는 클라이언트 웹페이지를 만들어 보려고 합니다. github 프로젝트로 등록되어 있는 vue-apollo-graphql-boilerplate 기반으로하여 저자와 책의 목록을 추가, 삭제, 검색할 수 있는 프로젝트를 구현해 보겠습니다. vue-apollo-graphql-boilerplate 설치 기본적으로 git이 설치가 되어 있어야 보일러플레이트를 가져올 수 있습니다. 쉘에서 아래 명령어를 실행합니다. git clone https://github.com/guillaumeduhan/vue-apollo-graphql-boilerplate.git vue-apollo-graphql-boilerplate의 폴더가 ..
[개발] GraphQL - Apollo 웹 서버 구축하기 안녕하세요. devport 입니다. 이번 포스팅에서는 NodeJS로 간단한 Apollo 서버를 구축하고 GraphQL Playground로 Query 및 Mutation이 어떻게 동작되는지 자세하게 훑어보려고합니다. 예제는 처음 공식 홈페이지의 서버 구축 예제로 시작하도록 하겠습니다. Npm 설치 npm install --save apollo-server-express express Apollo 라이브러리를 웹서버에 올려 사용할 수있는 환경을 구축하기 위해서 관련 라이브러리를 프로젝트에 설치합니다. server.js 프로젝트 하위에 server.js파일을 생성하여 아래 코드를 삽입하여 줍니다. const express = require('express'); const { ApolloServer, gql ..
[개발] GraphQL - Schema & Type 안녕하세요. devport 입니다. 이번 포스팅에서는 GraphQL의 스키마가 어떻게 구성되고 있는지 알아보도록 하겠습니다. 스키마? GraphQL은 강력한 형식의 스키마를 제공하고 있습니다. 스키마는 클라이언트와 서버간 알아 볼 수 있는 데이터의 계층 구조를 정의하고 있으며 이를 실행할 수 있는 Query 및 Mutation을 정의 할 수 있습니다. 스키마의 장점 스키마는 클라이언트와 서버간의 데이터 및 전송방식을 정의합니다. - 명확하게 정의된 스키마를 사용하면 클라이언트와 서버간의 상호작용에 대한 이해가 더 쉬워집니다. API를 사용하는 동안 클라이언트 / 서버간의 상호 작용에서 발생할 수 있는 잘못된 부분들을 사전에 알 수 있게됩니다. 에러를 사전에 확인 가능합니다. - 정의된 유형에 위배되는 형..

티스토리툴바