TDD를 이용해서 만들 앱 소개
+, -, 그리고 on/off 버튼이 있다. 거기서 +를 누르면 숫자가 올라가고 -를 누르면 내려갑니다. 그리고 on/off 버튼(푸른색)을 누르면 +,- 버튼이 작동을 안하고 색깔이 변하는 간단한 앱을 만들어 보겠다.
앱 만들기 시작
테스트 주도 개발을 할 것이기 때문에 먼저 테스트 코드 부터 작성해보겠다.
*Counter 생성
-
테스트 작성
App.test.js
-
테스트에 대응하는 실제 코드 작성
App.js -
테스트 실행 npm run test -> fail
-
테스트 코드 수정
App.test.js
-
테스트 실행
플러스, 마이너스 버튼 생성
카운터를 올리고 내릴 수 있는 버튼을 생성해보겠다.
*버튼 생성
-element에 접근할 때 쿼리 종류는 다양해서 정답은 없다.
- 테스트 작성
App.test.js
- 테스트 실행 -> fail
- 테스트에 대응하는 실제 코드 작성
App.js
- 테스트 실행
플러스, 마이너스 버튼 기능 넣기(fire event)
카운터를 올리고 내릴 수 있는 버튼의 기능을 넣어서 카운터를 변화시켜주겠다.
*FireEvent API
유저가 발생시키는 액션(이벤트)에 대한 테스트를 해야 하는 경우 사용한다.
단, 지금까지 해왔던 것처럼 유저 이벤트를 사용하는 것이 더 좋다.
*버튼 생성
- 테스트 작성
App.test.js
- 테스트 실행 -> fail
- 테스트에 대응하는 실제 코드 작성
App.js
- 테스트 실행
on/off 버튼 만들기(toHaveStyle)
*on/off 버튼 생성
- 테스트 작성
App.test.js
- 테스트 실행 -> fail
- 테스트에 대응하는 실제 코드 작성
App.js
- 테스트 실행
on/off 버튼 클릭 시 버튼 disabled
on/off 버튼을 클릭 시 -,+ 버튼을 disabled 시켜보겠다.
- 테스트 작성
App.test.js
- 테스트 실행 -> fail
- 테스트에 대응하는 실제 코드 작성
App.js
- 테스트 실행
Github Action을 이용한 AWS S3로 앱 자동 배포하기
*앱을 배포하는 방법
*저장소 생성
*저장소 연결
*worrkflow 생성
Action 클릭
Node.js configure
현재는 14, 16, 18 버전
npm ci -> npm i (install)
앱 배포를 위한 AWS S3 버킷 생성하기
AWS S3 서비스를 이용해서 애플리케이션을 배포해주겠다.
AWS S3 버킷 설정 및 애플리케이션 배포하기
S3로 앱 자동 배포를 위한 yml 파일 완성하기
*IAM (Identity and Access Management)
AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다. IAM을 사용하여 리소스를 사용하도록 인증(로그인) 및 권한 부여(권한 있음)된 대상을 제어한다.
