React AWS Amplify DataStore Tutorial

목차

📌 DataStore with Amplify

Amplify DataStore는 오프라인 및 온라인 시나리오에 대한 추가 코드를 작성하지 않고 공유 및 분산 데이터를 활용할 수 있는 프로그래밍 모델을 제공하므로 분산형 교차 사용자 데이터를 로컬 전용 데이터로 작업하는 것만큼 간단하다.

📌 AWS 계정*

• 회사로부터 지급 받은 AWS 계정 사용
  • two factor 설정
  • https://www.notion.so/source-tree-2FA-0b00df2002794e5eb4a349855fa98397
• 역할 전환 하기
• https://www.notion.so/AWS-5a41e697e30f4c53801d1b37ae633f82

📌 Amplify CLI 설치 및 구성*

Amplify CLI는 앱용 AWS 클라우드 서비스를 만들기 위한 통합 툴체인이다.

하단의 방법은 가이드 영상을 보고 직접 설명서를 작성했다.

글로벌로 이것을 설치한다.

경로 : 상관 없음

만약 설치가 안되면 앞에 ‘sudo’를 붙인다.

npm install -g @aws-amplify/cli

sudo npm install -g @aws-amplify/cli

📌 Amplify 환경설정

한번만 하면되기 때문에.. 만약 이전에 한적이 있다면 넘어간다.

경로 : 상관 없음

amplify configure

1. 입력하면 aws console창이 웹 브라우저에 로드되는데 로그인을 하고 역할을 전환한다.

(회사 계정이 아니라면 역할 전환할 필요가 없다)

2. 로그인을 하고 터미널창으로 다시 돌아와서 Enter를 눌러 이어간다.

3. 지역을 선택하라고 나온다. 

- AWS 웹 브라우저에서 지역을 확인한다.

- 선택한다

4. user name을 입력하는 메세지가 출력되는데 이름을 입력한다.

- 입력하게되면 브라우저에 사용자를 추가하는 페이지가 열리게된다.

 

# example
dave

 

5. 열린 페이지에서 ‘다음:권한’ 버튼을 클릭한다.

6. ‘다음:태그’ 버튼을 클릭한다.

7. ‘다음:검토’ 버튼을 클릭한다.

8. ‘사용자 만들기’ 버튼을 클릭한다.

9. 액세스 키 ID를 복사한다.

10. 터미널 창으로 돌아온다.

- Enter키를 눌러 진행한다.

11. accessKeyId를 입력하라고 한다 

- 복사한 ID를 붙여넣고 Enter를 누른다.

12. secretAccessKey를 입력하라고 나온다.

- 다시 브라우저로 돌아가서 복사해서 돌아온다.

- 표시를 누르면 비밀번호가 표시된다.

13. 붙여넣기를 하고 Enter를 누른다.

14. profile Name를 입력하고 enter를 누르면 완료

# example
dave

📌 로컬 개발 환경 설정

1. Amplify 이니셜라이즈를 한다.

amplify init

? Enter a name for the project
The following configuration will be applied:

?Project information
| Name:  OJTFrontend
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

...

? Please choose the profile you want to use default

2. Amplify 앱을 생성한다.

- 경로 : 프로젝트 디렉토리

- 에러가 발생한다면 하단 글을 참고 한다.

https://conqueror-g.tistory.com/238

npx amplify-app

3. 해당 패키지들을 설치한다.

npm i aws-amplify @aws-amplify/core @aws-amplify/datastore

4. api 를 추가해야한다.

- 최초 1번만 지정하면 이후에 할 필요가 없다.

amplify add api

? Please select from one of the below mentioned services:
    `GraphQL`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Name`
? Provide API name:
    `BlogAppApi`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Authorization modes: API key (default, expiration time: 7 days from now)`
? Choose the default authorization type for the API
    `API key`
? Enter a description for the API key:
    `BlogAPIKey`
? After how many days from now the API key should expire (1-365):
    `365`
? Configure additional auth types?
    `No`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Conflict detection (required for DataStore): Disabled`
? Enable conflict detection?
    `Yes`
? Select the default resolution strategy
    `Auto Merge`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Continue`
? Choose a schema template
    `Single object with fields (e.g., “Todo” with ID, name, description)`
? Do you want to edit the schema now? (Y/n)
    'Y'

5. 해당 경로의 파일에서 인스턴스로 생성할 (타입 ? 형태?)를 작성한다. 

- 경로 : /amplify/backend/api/schema.graphql

type DiaryPost @model {
  id: ID!
  title: String!
  content: String!
}

! : 항상 값을 제공한다는 의미

6. 백엔드를 배포한다.

amplify push

? Are you sure you want to continue? (Y/n)
$ Y

? Do you want to generate code for your newly created GraphQL API (Y/n)
(새로 만든 GraphQL API에 대한 코드를 생성하시겠습니까?)
$ n

7. 하기 코드를 터미널에 입력한다.

- graphQL schma.grapql 내용을 수정하면 다시 해주어야한다.

amplify codegen model

8. 클라이언트에서 Amplify를 구성하여 백엔드 서비스와 상호 작용할 수 있도록 해야 한다.

- 경로 : src/index.js

import Amplify from '@aws-amplify/core'
import config from './aws-exports'
Amplify.configure(config)

9. 하기 예제 코드를 작성해서 결과를 확인한다.

- 자세한 설명은 예제 코드 하단에 덧 붙인다.

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

import { DataStore } from '@aws-amplify/datastore/lib-esm/datastore/datastore';
import { DiaryPost } from './models';

function App() {
  const [messages, updateMessages] = useState([]);

  useEffect(() => {
    fetchMessages();
    const subscription = DataStore.observe(DiaryPost).subscribe(() => {
      fetchMessages();
    });

    return () => subscription.unsubscribe();
  }, []);

  const fetchMessages = async () => {
    const messages = await DataStore.query(DiaryPost);
    updateMessages(messages);
  };

  const createMessage = async () => {
    await DataStore.save(
      new DiaryPost({
        ...{
          title: 'hi there~',
          content: 'nothing',
        },
      })
    );
  };

  const updateMessage = async () => {
    // 임시로 0번쨰 인덱스의 데이터를 수정하도록 해뒀습니다.
    const original = await DataStore.query(DiaryPost, messages[0].id);
    await DataStore.save(
      DiaryPost.copyOf(original, updated => {
        // eslint-disable-next-line no-unused-expressions
        (updated.title = 'good'), (updated.content = 'content');
      })
    );
  };

  const deleteMessage = async () => {
    // 임시로 0번쨰 인덱스의 데이터를 삭제하도록 해뒀습니다.
    const deleteMessage = await DataStore.query(DiaryPost, messages[0].id);
    await DataStore.delete(deleteMessage);
  };

  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <div>
          <input type='button' value='NEW' onClick={createMessage} />
          <input type='button' value='UPDATE' onClick={updateMessage} />
          <input type='button' value='DELETE' onClick={deleteMessage} />
        </div>
        {messages.map(data => {
          return (
            <div key={data.id}>
              <div>{data.title}</div>
              <div>{data.content}</div>
            </div>
          );
        })}
      </header>
    </div>
  );
}

export default App;

추가 설명

- 데이터스토어의 데이터를 렌더링 해주는 코드 중요한지 몰랐으나,
이 코드가 없으면 데이터스토어의 데이터를 항상 반영하지 않는다.
리액트의 렌더링과는 별개라고 보면 된다.
데이터스토어의 데이터가 변경되거나 삭제될때마다 fetch를 한다.
useEffect의 의존성 배열이 빈칸인 것과는 관계가 없다.

useEffect(() => {
    fetchMessages();
		// fetchMessages는 데이터를 가져오는 query이다.
    const subscription = DataStore.observe(DiaryPost).subscribe(() => {
      fetchMessages();
    });

    return () => subscription.unsubscribe();
  }, []);

const fetchMessages = async () => {
    const messages = await DataStore.query(DiaryPost);
    updateMessages(messages);
  };

- 데이터스토어에 데이터를 저장하는 코드이다.
이것에 대해서는 크게 설명할 필요가 없다고 생각한다.
’DiaryPost’는 graphql 모델 이름이다.

const createMessage = async () => {
    await DataStore.save(
      new DiaryPost({
        ...{
          title: 'hi there~',
          content: 'nothing',
        },
      })
    );
  };

- 데이터스토어의 데이터를 업데이트 한다.
모델과 바꾸고자하는 데이터의 id를 original이라는 변수에 담고, 바꾸고자 하는 내용을 전송한다.

const updateMessage = async () => {
    // 임시로 0번쨰 인덱스의 데이터를 수정하도록 해뒀다.
    const original = await DataStore.query(DiaryPost, messages[0].id);
    await DataStore.save(
      DiaryPost.copyOf(original, updated => {
        // eslint-disable-next-line no-unused-expressions
        (updated.title = 'good'), (updated.content = 'content');
      })
    );
  };

- 데이터스토어의 데이터를 삭제한다. 삭제하고자 하는 id를 보내면 삭제가 완료된다.

const deleteMessage = async () => {
    // 임시로 0번쨰 인덱스의 데이터를 삭제하도록 해뒀습니다.
    const deleteMessage = await DataStore.query(DiaryPost, messages[0].id);
    await DataStore.delete(deleteMessage);
  };ㅁ

 

 

 

 

 

이렇게 백앤드 개발자라는 동료 없이 CRUD에 대한 기능을 수행할 수 있는 서비스를 연결시켜보았다.

Amplify DataStore 넌.. 정말 강적이었어.. 3일을 해맸다