대체 뭔데 👿 하수라 👿

당신은 프로그래밍 여정을 시작했고 유명한 "Hello World"를 등장시켰고 당신이 세상을 정복한 것처럼 느꼈습니다! 당신은 조금 배웠고HTML, 약간의 Javascript에 들어갔고, 해야 할 일 목록을 만들었습니다.

그러나 당신은 새로 고침하고 휙! 모든 것이 사라졌습니다!


데이터를 유지하려면 백엔드 서버가 필요하다는 것을 깨닫고 갑자기 Django, NodeJS, Server, Nginx, Apache, Postgres, SQL과 같은 단어가 어지러워집니다.

하지만 걱정하지 마세요. 더 쉬운 방법이 있습니다.

이 오픈 소스 경이로움을 사용할 수 있습니다.

시작하기 전에 이미 알아야 할 사항

1. API가 어떻게 작동하는지 알아야 합니다.

2.Graphql 작동 방식

3.Apollo 클라이언트의 기본 사항(그대로 진행)Nice Video on basic setup for apollo client

Hasura가 단순화하는 것

Hasura가 단순화하는 것은 데이터베이스 관리 또는 생성(sql, mongo, postgres), 자체 서버 설정(nginx, apache), 해당 서버 호스팅(aws, gcp, azure)입니다.

하수라가 부족한 것

서버 자체가 데이터에 대해 복잡한 작업을 수행하도록 비즈니스 로직을 생성하는 것은 문제가 되지 않습니다. 서버 자체가 존재하지 않기 때문입니다! 여기서 탈출구는 AWS Lambda 또는 다른 서버리스 기술을 사용하여 이러한 요구 사항을 처리하는 것입니다.

간단한 예를 살펴보겠습니다.

내 게임을 위해 Hasura에서 간단한 LeaderBoard를 만든 방법:

간단한 게임을 만들었습니다. game link
React로 만든 간단한 카드 플리퍼 메모리 게임입니다. 여기 GITHUB repository이 있습니다.

이제 Hasura에서 내 heroku 계정을 연결하는 postgres 데이터베이스를 만들고 LeaderBoard라는 테이블을 만들었습니다.

이러한 것들은 낯설게 들릴 수 있지만 프로그램을 설치하기 위해 수행하는 다음>다음>다음>설치와 같이 간단합니다.

테이블에는 문자열인 Name , 숫자인 score , UUID 인 ID 의 3개 열이 있습니다. is (hasura의 끝에서 자동 생성됨)

이제 Leaderboard API를 호출할 때 React에 대해 apollo client을 사용하여 자동 생성된 Graphql 쿼리 조각을 호출하고 짜잔! 우리는 모든 지도자를 얻습니다.

내가 실행한 특정 쿼리는 다음과 같습니다.

query getLeaderBoard {
    Leaders {
      Name
      Score
    }
  }

그러면 이름과 점수가 포함된 리더보드가 반환됩니다.

Hasura 대시보드에서 이러한 쿼리를 다음과 같이 수정할 수 있습니다.


이제 누군가가 게임에서 이기면 useEffect가 또 다른 쿼리를 실행하여 이번에는 순위표에 플레이어를 추가합니다.

mutation AddScore($Name: String!, $Score: Int!) {
    insert_Leaders_one(object: { Name: $Name, Score: $Score }) {
      id
    }
  }

하나는 플레이어의 이름(로컬 상태의 사용자로부터 가져옴)과 하나의 점수(useContext의 상태로 유지됨)입니다.

이 API는 리더보드에 플레이어를 추가합니다.

이제 초보 초심자에게 이것은 많은 것일 수 있습니다. 그러나 백엔드 설정, 배포 및 기타 많은 작업을 몇 주 동안 절약할 수 있습니다.

이제 나는 초보자가 된 내 자신을 생각하고 Hasura가 너무 좋은 제품이라고 말하고 더 많이 사용하기를 기대합니다!

제 말을 들어주셔서 감사합니다. 언제든지 제게 연락하셔서 제 github을 보실 수 있습니다.
다음 시간까지...