14탄-AWS Amplify를 사용하여 React
AWS Amplify를 사용하여 React Native 기반 모바일 앱 개발하기
<1> 개발자의 요구
<2> AWS Amplify
<3> React Native기반 ToDo 앱 만들기
<1> 개발자의 요구
1
개발자의 요구
사용자에게 적시에 가치를 제공하는 것
2
트렌드
2022년 5월 기준 안드로이드 71% , IOS 28%
<2> AWS Amplify
확장 가능한 풀 스택 앱과 모바일 앱을 구축하는 가장 빠른 방법을 제시하는 AWS의 서비스
4가지 서비스로 이루어져 있다.
1
Amplify CLI
웹/모바일 앱의 백엔드를 인터랙티브 하게 생성 및 관리하기 위한 CLI
개발자는 로컬 환경에서 Amplify CLI 명령어를 통해 간단히 클라우드로 백엔드 환경을 생성할 수 있다.
개발 환경에 Amplify CLI 설치한다.
클라우드에 리소스 배포를 위해서 AWS 사용자 계정이 필요하다.
2
Amplify Library
웹/모바일 앱과 AWS를 통합하기 위한 오픈 소스 라이브러리
Amplify로 만든 백엔드에 쉽게 액세스 할 수 있는 클라이언트 라이브러리
Amplify는 인증이나 스토리지뿐만 아니라 일련의 기능들을 오픈 소스 라이브러리로 제공하고 있다.
개발자는 각각의 기능을 위한 UI 구성요소를 백엔드와 연결하기 위해서 https://docs.amplify.aws/ 라이브러리를 사용 활수 있다.
Amplify에서 지원하는 모바일 및 웹 프레임워크
안드로이드, IOS , 리액트 네이티브, 아이오닉, 플러터 등 지원한다.
https://docs.amplify.aws/start/
3
Amplify Hosting
풀 스택 서버리스 웹 앱을 빌드, 테스트 , 배포 및 호스팅 하기 위한 AWS 서비스
웹 앱의 경우, Amplify 콘솔에서 소스 코드 리포지토리를 선택하고 빌드 설정을 구성하는 것만으로
프런트 앤드 및 백엔드에 변경사항이 Amazon CloudFront를 사용해서 호스팅 됩니다.
4
Amplify Studio
웹/ 모바일 앱의 백엔드 및 콘텐츠를 관리하기 위한 GUI 도구
개발자가 앱의 백엔드를 구성하고 유지 관리할 수 있도록 웹 기반의 시각적 인터페이스를 제공하고 있다.
웹 앱의 경우 프런트 엔트 UI를 피그마(Figma)에서 시각적으로 편집하고 리액트 기반의 코드로 자동으로 변환되도록로-코드 기반의 프런트 엔드 UI 개발도 지원하고 있습니다.
Amplify Studio에서는 팀 구성원을 이메일로 초대해서 AWS콘솔 외부에서 프로젝트를 관리할 수 있다.
<3> React Native기반 ToDo 앱 만들기
1
기본 인증과 데이터 스토어가 연동된 간단한 ToDo 앱을 만들어보자.
2
개발환경과 도구?
패키지 관리자 yarn
리액트 네이티브 기반으로 빠르게 테스트해 볼 수 있는 expo CLI 사용
Amplify CLI를 통해 AWs 클라우드와 연결한다.
Amplify Studio에서 시각적으로 백엔드 환경을 구성해보자,
3
앱 아키텍처?
앱 화면 ---------- AWS Amplify --------AWS AppSync----Amazon DynamoDB
인증은 Amazon Cognito 사용
4
작업 순서
환경설정
인증 기능
ToDo 기능
https://brunch.co.kr/@topasvga/2617
감사합니다.
