Frontend is for Everyone (Korean)

실습 개요

스크립팅 경험과 새로운 아이디어가 있는 기술 전문가로서 개념 증명 또는 최소 기능 제품을 위한 프런트엔드를 구축하는 것이 어려워 보일 수 있습니다. 이 시나리오에서 여러분의 팀은 사용할 Linux 인스턴스를 프로비저닝하는 것을 여러분에게 의존합니다. 여러분은 이미 적절한 태깅으로 Elastic Compute Cloud(EC2) 인스턴스를 시작하는 AWS Lambda 함수를 작성하여 이 프로세스를 개선했습니다. AWS 콘솔에 로그인할 필요가 없는 웹 기반 셀프 서비스 도구가 있다면 어떨까요? 이 실습에서는 사용자가 EC2 인스턴스를 시작 및 종료할 수 있도록 허용하는 인증 기능이 있는 서버리스 전체 스택 단일 페이지 앱을 빌드합니다.

사용자 인터페이스를 구축하기 위한 React 라이브러리의 기능에 대해 알아봅니다. 그런 다음, AWS Amplify를 사용하여 몇 가지 AWS 서비스를 추가하고 프런트엔드와 통합합니다. 여기에는 Amazon Cognito를 통한 인증 추가, Amazon API Gateway로 구동되는 보안 REST API 생성이 포함됩니다. 또한 Amazon EC2 서비스와 상호 작용할 AWS Lambda를 통해 서버리스 함수로 백엔드를 추가로 확장합니다.

마지막으로 AWS Amplify를 사용하여 앱 호스팅을 추가하고 Amazon CloudFront를 사용하여 앱이 AWS 콘텐츠 전송 네트워크를 통해 최종 사용자에게 제공되도록 합니다. 모든 애플리케이션 개발은 AWS Cloud9 IDE 내에서 이루어집니다.

목표

이 실습을 마치면 다음을 수행할 수 있습니다.

• AWS에서 전체 스택 웹 앱을 생성 및 호스팅
• 상태, 효과, 속성과 같은 React 개념을 구현
• AWS Amplify를 사용하여 AWS에서 인증, API, 함수 및 호스팅 리소스를 생성
• 프런트엔드 서비스를 백엔드 서비스와 통합

소요 시간

이 실습을 완료하려면 약 60분이 소요됩니다.

아이콘 설명

이 실습에서는 다양한 유형의 지침 및 참고 사항에 대한 주의를 환기하기 위해 다양한 아이콘이 사용됩니다. 다음은 각 아이콘의 용도에 대한 설명입니다.

• 명령: 실행해야 하는 명령입니다.
• 예상 출력: 명령 또는 편집된 파일의 출력을 확인하는 데 사용할 수 있는 샘플 출력입니다.
• 참고: 힌트, 팁 또는 중요한 지침입니다.
• 주의: 특별한 관심이 필요한 중요한 정보입니다(놓쳤다고 해도 장비 또는 데이터에 문제가 발생할 정도로 중요하지는 않지만 특정 단계를 반복해야 할 수 있음).
• 고려 사항: 자신의 환경에 개념을 적용하는 방법을 고려하거나 당면한 주제에 대한 대화를 시작하기 위해 일시 중지할 시점입니다.
• 지식 확인: 이해도를 확인하고 학습한 내용을 테스트할 기회입니다.
• 새로 고침: 웹 브라우저 페이지 또는 목록을 새로 고침하여 새 정보를 표시해야 하는 경우입니다.
• 과제 완료: 실습의 결론 또는 요점입니다.