풀스택 React 및 GraphQL : Couchbase

세 개의 글 중 첫 번째 글은 React를 사용한 풀스택 구축과 Express 및 CouchBase Server를 사용한 GraphQL 구축에 중점을 두었습니다.

• NoSQL 카우치베이스 서버 설정하기(1부)
• Express-GraphQL API 구축하기(2부)
• React에서 Apollo GraphQL 클라이언트 만들기 (3부)
• 최종 소스 코드

풀스택 React 및 GraphQL 애플리케이션

풀스택을 구축해 보겠습니다. React 애플리케이션을 사용하여 GraphQL. 이 튜토리얼은 접근하기 쉬운 튜토리얼이지만 JavaScript, React, GraphQL 개념 및 NoSQL에 어느 정도 익숙할 것으로 예상합니다. 또한 Docker를 사용하여 단일 노드 Couchbase Server를 프로비저닝합니다. Express-GraphQL을 통해 Couchbase에 연결할 것입니다. 노드 JS 그리고 Express JS 사용 express-graphql. 그런 다음 React에서 API를 쿼리할 것입니다. Apollo GraphQL 클라이언트.

GraphQL 하이레벨 개요

이 앱 구축을 시작하기 전에, 우리가 선택한 GraphQL API 전통적인 REST API를 클릭한 다음 데이터베이스 설정으로 이동합니다.

GraphQL은 강력한 타입의 API용 쿼리 언어입니다. 데이터를 가져오는 선언적 방식으로, JavaScript 커뮤니티와 다른 커뮤니티에서도 빠르게 채택되고 있습니다. 데이터 가져오기를 세밀하게 제어할 수 있고 추가 API 호출 시간을 절약할 수 있습니다. 모든 쿼리와 변경은 REST와 같은 여러 엔드포인트가 아닌 하나의 엔드포인트에서 이루어집니다. 이는 React에서 URL을 관리하기 위해 작성해야 하는 코드가 줄어든다는 것을 의미합니다. 또한 유선을 통한 설치 공간도 더 작습니다. GraphQL과 REST에 대한 더 많은 정보를 원하시면 Nate Barbettini의 강연을 참조하세요: API 쓰로다운: RPC vs REST vs GraphQL.

JSON에 익숙한 경우 다음을 찾을 수 있습니다. GraphQL의 쿼리 구문 사용이 간편하고 데이터를 쉽게 탐색할 수 있습니다. GraphiQL는 쿼리를 테스트하고 GraphQL API로 가능한 것을 발견하는 데 사용하는 브라우저 내 IDE입니다.

이 GraphiQL IDE는 나중에 자체 GraphQL 엔드포인트를 테스트해야 할 때 유용하게 사용할 수 있습니다. GraphiQL은 모든 GraphQL 서버에서 사용할 수 있습니다. 예를 들어, GitHub에는 가장 오래된 공개 GraphQL API 중 하나가 있습니다(얼리 어답터). 이를 통해 데이터 그래프를 탐색할 수 있습니다. GitHub GraphQL API v4 탐색기.

참고: GitHub는 개발자 커뮤니티에서 가장 널리 알려진 공개 RESTful API 중 하나로, 2016년에 GitHub API 버전 4에서 REST 대신 GraphQL 애플리케이션으로 전환했습니다. 이를 통해 개발자가 GitHub API를 사용하기 위해 거쳐야 하는 노력이 크게 줄어들고 개발자 환경이 개선되었습니다. 요청은 단순히 JSON과 JS 함수의 하이브리드처럼 보이는 구문으로 HTTP POST를 통해 전송되는 텍스트입니다. 응답은 GraphQL API의 경량(요청한 내용만) 응답입니다. 이는 GitHub에서 REST에서 GraphQL로 전환함으로써 개발자가 얻을 수 있는 이점 중 일부에 불과합니다.

카우치베이스 데이터스토어

프로젝트를 시작하려면 데이터가 필요합니다. 이 프로젝트는 이미 데이터베이스를 보유하고 있는 고객, 특히 다음과 같은 데이터베이스를 사용하고 있는 고객이 있는 것처럼 접근합니다. 카우치베이스 서버 를 문서 저장소로 사용하세요.

그리고 카우치베이스 서버 NodeJS SDK 는 Node JS와 Express를 통해 Couchbase 서버 및 해당 데이터에 연결하는 데 필요한 도구를 제공합니다.

참고로, 다음 외에도 다양한 SDK를 사용할 수 있습니다. 노드 JS 를 포함한 Couchbase 서버용 C, .NET, 이동, Java, PHP, Python및 Scala.

SQL 기술을 NoSQL에서 활용하기

카우치베이스 서버는 다음과 같은 방법으로 SQL 기술을 활용합니다. N1QL(JSON용 SQL) 데이터베이스 쿼리 언어 를 사용하면 SQL과 거의 동일한 구문으로 NoSQL 문서 데이터 저장소인 Couchbase를 쿼리할 수 있습니다.

Docker로 Couchbase 설치 및 실행하기

Couchbase를 로컬에 다운로드하여 설치하기로 선택하고 Docker를 사용하지 않으려는 경우, 간단히 수동 설치 지침으로 건너뛰기. Docker 자체에 대한 도움말은 다음을 참조하세요. docs.docker.com.

받기 카우치베이스 이미지:

기존 리포지토리를 복제하여 기존 리포지토리의 도커파일 그리고 configuration.sh 파일이 필요합니다:

다음에서 새 이미지 만들기 도커파일 공식 카우치베이스 도커 이미지를 기본으로 사용합니다:

새 이미지를 실행합니다:

마지막 명령을 실행하는 데 문제가 있는 경우 "bridge"라는 이름의 네트워크가 없는 것일 수 있습니다. 이 경우 다음 명령을 실행하세요. 도커 네트워크 ls 를 클릭하고 기본 네트워크 이름과 드라이버의 이름을 찾아서 대신 사용하세요.

이 시점에서 다음을 방문할 수 있습니다. localhost:8091 를 클릭하고 관리자 & 비밀번호.

로컬에 Couchbase 설치

Docker와 함께 설치한 경우 다음을 수행할 수 있습니다. 다음 섹션으로 건너뛰기.

설치 과정은 간단하며 다음과 같이 안내해 드립니다. Linux, Mac및 Windows.

설치가 완료되면 다음을 사용하여 Couchbase Server 웹 콘솔에 액세스할 수 있습니다. localhost:8091.

이 화면에서 "새 클러스터 설정“.

클러스터 이름은 사용자가 정할 수 있으며 모든 Couchbase 버킷을 나타냅니다. 관리자 사용자 및 비밀번호는 전체 서버의 대시보드에 로그인하기 위한 서버 관리자 계정이며, Express 애플리케이션 내에서 특정 버킷에 연결하기 위한 사용자 및 비밀번호가 아닙니다. 이에 대해서는 나중에 다루겠습니다.

기본 서비스 및 메모리 할당량으로 클러스터를 구성했습니다.

콘솔에서 버킷 살펴보기

Couchbase 서버 대시보드에 액세스하고 "서버"를 클릭하여 처음 생성한 서버를 확인해 보겠습니다.

다음으로 "버킷"을 클릭합니다. 카우치베이스 버킷 은 문서 컬렉션입니다. "버킷 추가"를 통해 나만의 문서 컬렉션을 만들거나 샘플 데이터를 추가할 수 있습니다. Docker 파일 지침을 따랐다면 여행 샘플 버킷이 이미 로드되어 이 화면에 표시되어 있어야 합니다.

이 샘플 데이터베이스를 사용하면 풀스택 React 및 GraphQL 애플리케이션을 바로 실행할 수 있으며, Express로 API를 구축하기 시작하면 이미 데이터와 인덱스가 설정되어 있으므로 작업이 쉬워집니다.

인덱스는 이 문서에서 자동으로 설정됩니다. 여행 샘플 버킷을 설치하는 데 사용되는 스크립트의 일부로 인덱스를 추가합니다. 이러한 인덱스는 N1QL 쿼리 언어(JSON용 SQL)를 사용하려면 필요합니다.

더 자세히 알아보고 나만의 버킷과 인덱스를 만들고 싶으신가요? 이 문서 확인!

버킷은 아래 이미지의 버킷과 비슷해야 합니다:

'문서' 버튼을 클릭하면 버킷에 있는 일부 데이터를 볼 수 있습니다:

'문서를 JSON으로 편집'을 클릭하면 특정 키 값에 대한 JSON을 볼 수 있으며 여기에서 데이터를 편집할 수도 있습니다. 해보세요!

계속 진행하기 전에 '보안' 탭을 클릭하고 이 버킷에 연결할 사용자를 설정하려고 합니다.

"보안" 페이지에서 "사용자 만들기"를 클릭합니다. Express 애플리케이션에서 버킷에 연결하기 위한 사용자 이름과 비밀번호를 추가합니다. 저는 제 이름을 사용했고 프로젝트의 소스 코드에 있는 정보와 일치합니다. 따라서 자신의 이름을 사용하고 필요에 따라 코드를 업데이트하는 것을 잊지 마세요.

'애플리케이션 액세스' 확인란을 선택해야 합니다. 여행 샘플 버킷. 이것만 있으면 됩니다. 연결하려면 사용자 아이디와 비밀번호가 필요하므로 기억해 두세요.

버킷 인덱스

이 데모에서는 인덱스가 자동으로 생성되었습니다. 인덱스를 추가하려면 '쿼리' 탭을 사용하여 인덱스를 추가하고 인덱스 생성에 필요한 SQL을 실행하면 됩니다. SQL에 익숙하다면 Couchbase의 인덱스 생성이 직관적으로 느껴질 것입니다!

Couchbase의 인덱스에 대해 자세히 알아보려면 다음을 참조하세요. 최근 기사 사용 방법을 보여주는 카우치베이스용 인덱스 어드바이저 서비스. 이 도구는 최신 Couchbase Server 6.5 릴리스와 함께 제공되는 새로운 도구입니다. 또 다른 관심 사항은 글로벌 보조 인덱스 문서.

색인은 다음과 같습니다. 여행 샘플 버킷을 설치합니다.

N1QL 쿼리에 대한 간략한 언급

Couchbase Server에 대해 언급해야 할 또 다른 사항은 문서를 쿼리하는 데 사용하는 언어입니다. 카우치베이스 서버는 N1QL. N1QL은 관계형 배경을 가진 사람이라면 누구나 사용할 수 있는 SQL과 유사한 구문입니다. 특히 문서 컬렉션을 쿼리할 때 유용합니다. 다음 글에서 GraphQL API를 구축할 때 몇 가지 기본 사항을 다루겠습니다.

자세한 정보는 다음에서 확인할 수 있습니다. N1QL 를 사용하는 방법에 대한 정보뿐만 아니라 문서에서 couchbase.get 모든 정보를 쿼리하는 메서드에 대한 자세한 내용은 카우치베이스 서버 NodeJS SDK 문서.

이제 카우치베이스 설정이 완료되었으므로 계속해서 풀스택 리액트 및 GraphQL 애플리케이션 구축의 자바스크립트 부분으로 넘어갈 수 있습니다. 이제 Express-GraphQL 서버 다음으로 React 클라이언트 빌드 마지막 세그먼트에서

Express-GraphQL API 구축하기(2부)