섹션 6 React TDD 기본
테스트 주도 개발(TDD)란 무엇인가?


React Testing Library란?



Jest란?




Jest 파일 구조 및 사용법







React Testing Library 주요 API



쿼리 함수에 대해





Create react app으로 리액트 설치 및 Prettier 설정하기


ESLint 설치 및 설정하



섹션 7 React TDD 를 이용한 간단한 앱 생성 및 배포
TDD를 이용해서 만들 앱 소개


앱만들기 시작



플러스, 마이너스 버튼 생성


플러스 마이너스 버튼 시능 넣기(fire event)



on/off 버튼 만들기(to HaveStyle)


on/off 버튼 클릭 시 버튼 disabled


github Action을 이용한 AWS S3로 앱 자동 배포하기





앱 배포를 위한 AWS S3 버킷 생성하기

AWS S3 버킷 설정 및 애플리케이션 배포하기


S3로 앱 자동 배포를 위한 yml 파일 완성하기







다음 태그 -> 사용자 만들기


우선 저장후 깃허 레포지토리로가면

이후 환경 변수들은 settings에서 넣어준다.





이후 re-run jobs를 눌러서 새로 시작하면 아래와 같이 위에서 명령한 workflow대로 작업을 시작한다.


그리로 버킷을 보면 잘 올라 와있는걸 확인할 수 있다.
'모카 스터디 > React' 카테고리의 다른 글
따라하며 배우는 리액트 A-Z -리액트 Version 18 - [John Ahn] (0) | 2023.07.23 |
---|---|
따라하며 배우는 리액트 A-Z -Next.js와 TypeScipt - [John Ahn] (0) | 2023.07.22 |
따라하며 배우는 리액트 A-Z - Netfilx 앱 완성하기 - [John Ahn] (0) | 2023.07.22 |
따라하며 배우는 리액트 A-Z - Netflix 앱 - [John Ahn] (0) | 2023.07.22 |
따라하며 배우는 리액트 A-Z - To-do 앱 최적화하기 - [John Ahn] (0) | 2023.07.22 |