이번 테마

Amplify Framework라는 것을 사용하면 개발에서 배포까지 굉장히 편리하다는 것을 전하고 싶다고 그 방법에 대해 가볍게 통과하면서 설명 할 수 있다고 생각합니다.

대략은 다음과 같은 느낌입니다.

Vue.js에서 프런트 엔드 개발이 가능합니다

Amplify를 사용하여 개발할 수 있습니다

설계에서 배포까지의 흐름 이해

별로 세세하게는 돌진하지 않는다(예정)이므로 거기는 양해 바랍니다.

이번에 만드는 것

instagram의 기능을 최대한까지 깎아낸 것 같은 심플한 이미지 공유 앱(PWA)입니다.
간편하게 만들 수 있게 되도록 간단하게 했습니다.
그래서 다양한 기술적 요소를 요구할 수 있으므로 정확히 좋을까.



사양으로서는 이하를 상정하고 있습니다.

사용자 등록 및 로그인이 가능합니다

이미지를 게시하거나 삭제할 수 있습니다

게시물에 좋아요

타임 라인에 최신 10 건이 표시된다

내 페이지에 내 게시물 목록이 표시됩니다

구성도

키워드

Vue.js

클라이언트측 JavaScript 프레임워크
Vue.js

PWA

Progressive Web Application의 약어
모바일 유저의 UX 향상을 목적으로 한, WEB 페이지/WEB 어플리케이션과 네이티브 앱의 이점을 겸비하고 있다
Qiita: PWA에 흥미를 가지고 있는 사람을 위해서 개요나 동향등을 정리했다

Amplify Framework

애플리케이션과 통합하기 위한 라이브러리, UI 컴포넌트 및 명령줄 인터페이스 세트를 제공합니다.
Amplify Console을 사용하여 CI/CD에서 CDN까지 사용 가능
Amplify 프레임워크(스케일하는 앱을 가장 빠르게 구축하는 방법 제공

Amazon Cognito

AWS에서 제공하는 인증 및 인증 기반
사용자 인증 및 API 실행 관리
Amazon Cognito(웹/모바일 앱 사용자 관리) | AWS

DynamoDB

완전 관리형 NoSQL, 스키마리스 데이터베이스 서비스
Amazon DynamoDB(관리형 NoSQL 데이터베이스) | AWS

S3

Simple Storage Service의 약칭, 클라우드형 스토리지
Amazon S3(확장성과 내구성을 겸비한 클라우드 스토리지) | AWS

GraphQL

RESTful API 문제를 해결하기 위해 개발된 쿼리 언어
단일 엔드포인트 및 유형 지정과 같은 특징이 있습니다.
Introduction to GraphQL

AppSync

완전 관리 GraphQL 서비스
이것과 GraphQL로 BFF와 같은 것을 할 수 있다
AWS AppSync(앱 데이터를 실시간으로 저장, 동기화) |

스케치

UI 디자인 툴
이것을 사용하여 프로토 타이핑을 할 수 있습니다.
The best products start with Sketch

끝에

기사의 페이스는 주 2 정도가 된다고 생각됩니다.
너무 기대하지 않고 기다려 주시면 기쁩니다.

다음 → Vue + AWS Amplify로 간단한 이미지 공유 앱 만들기 (만들기 ~ 배포) #2