내용 정리 Part. 2

24년 7월을 기준으로 작성되었습니다.

 

 

 

1. 모바일 앱 클린 아키텍처

 

 

---

2. Testing (테스트)

모바일 앱 개발에서, 꼼꼼한 테스트는 고품질 앱을 만드는 필수적인 과정이다. 다행히 Flutter, React Native, Swift UI 등 최신 모바일 개발 프레임워크들은 테스트 코드 작성을 위한 다양한 도구와 기능을 제공한다.

 

Testing은 크게 3종류로 분류할 수 있다. Unit Test, Widget Test, Integration Test의 개념을 간단히 알아보자.

---

1. Unit Test : 가장 작은 단위의 코드를 검증

애플리케이션에서 가장 작은 단위인 함수, 메서드, 클래스 등의 코드 조각이 예상대로 동작하는지 검증하는 테스트이다.

외부 시스템이나 의존성과는 철저히 분리된 상태에서 로직 자체의 정확성을 확인하는 데 집중한다.

 

👍 장점 3가지

1. 빠른 실행 속도로 개발 단계에서 잦은 코드 변경에도 부담 없이 테스트를 실행할 수 있다.
2. 코드의 특정 부분만 테스트하기 때문에 버그 발생 시 원인 파악이 용이하다.
3. 코드 품질 향상과 설계 개선에 도움을 주어 유지보수를 용이하게 한다.

 

▶️ 3가지 예시

1. 입력 값에 대한 함수의 반환 값 검증
2. 클래스 메서드의 예외 처리 로직 검증
3. 특정 조건에 따라 데이터를 필터링하는 로직 검증

 

모바일 환경에서는 네트워크 상태, 배터리 상태, 다양한 화면 크기 등 고려해야 할 요소가 많다.

Unit Test 단계에서는 이러한 외부 요소들을 Mocking(더미 객체) 하여 순수한 로직만 테스트하는 것이 중요하다!

-> Flutter에서는 "mockito" 패키지 사용

https://pub.dev/packages/mockito

mockito | Dart package

 

 

※ 테스트 input 값은 어떻게 정하는 게 좋을까?

1. Edge Cases : 경계 값 (최댓값/최솟값)

2. Corner Cases : Edge Case는 모두 통과하지만, 외부 요인 또는 특정 조건에서 문제가 발생할 경우

 

---

2. Widget Test : UI 요소의 동작과 속성을 검증

UI 구성 요소인 위젯이 예상대로 표시되고 동작하는지 검증하는 테스트이다.

버튼 클릭, 텍스트 입력, 애니메이션 효과 등 사용자 인터페이스와 관련된 기능들을 테스트한다.

 

👍 장점 3가지

1. 실제 기기나 에뮬레이터에서 UI를 시각적으로 확인하면서 테스트할 수 있다다.
2. 사용자 인터랙션에 대한 테스트를 통해 앱의 사용성을 높일 수 있다.
3. UI 수정 후 발생할 수 있는 버그를 사전에 예방할 수 있다.

 

▶️ 3가지 예시

1. 버튼 클릭 시 특정 위젯이 화면에 표시되는지 검증
2. 텍스트 필드에 입력된 값이 다른 위젯에 반영되는지 검증
3. 리스트뷰 아이템 스크롤 및 로딩 동작 검증

 

모바일 환경에서, Widget Test는 다양한 화면 크기와 해상도에 대한 테스트가 중요하다.

또한, 플랫폼별 UI 차이점을 고려하여 Android와 iOS 환경 모두에서 테스트를 진행해야 한다.

 

Flutter에서는 "flutter_test" 패키지를 사용해서 테스트한다.

WidgetTester 를 활용하여 테스트 환경에서 위젯들 간의 상호작용을 검증한다.

Unit Test : test() 

Widget Test : testWidgets()

Finder 클래스 활용하여 위젯을 search한다. Matcher를 활용하여 검증한다.

---

3. Integration Test : 여러 컴포넌트 간의 상호 작용을 검증

여러 모듈이나 컴포넌트가 통합된 상태에서 전체적인 애플리케이션 동작을 검증하는 테스트이다.

데이터베이스 연동, 네트워크 통신, 외부 API 호출 등 실제 서비스와 유사한 환경에서 테스트를 수행한다.

 

👍 장점 3가지

1. 실제 사용자 환경과 유사한 환경에서 테스트를 수행하여 앱의 안정성을 높일 수 있다.
2. 여러 컴포넌트 간의 예상치 못한 문제를 사전에 발견하고 해결할 수 있다.
3. Unit Test와 Widget Test로는 커버할 수 없는 복잡한 시나리오를 테스트할 수 있다.

 

▶️ 3가지 예시

1. 로그인 기능 테스트 (로그인 입력, 서버 통신, 응답 처리, UI 업데이트)
2. 데이터베이스 연동 테스트 (데이터 저장, 조회, 수정, 삭제)
3. 결제 기능 테스트 (결제 요청, 승인, 취소, UI 업데이트)

 

모바일 환경에서, 외부 시스템과의 연동을 포함하기 때문에 네트워크 상태, 서버 가용성 등 다양한 요소를 고려해야 한다.

테스트 환경을 최대한 실제 환경과 유사하게 구성하고, 예외 상황에 대한 처리 로직을 검증하는 것이 중요하다.

 

Flutter에서는 "integration test" 패키지를 사용해서 테스트한다.

---

✅ 정리

Unit Test는 핵심 로직의 안정성을 확보하는 기반을 마련한다.
Widget Test는 사용자 인터페이스의 정확성과 사용성을 보장한다.
Integration Test는 복잡한 앱의 안정적인 동작을 검증한다.

 

테스트 자동화 도구와 CI/CD 파이프라인을 활용하면 더욱 효율적이고 지속적인 테스트 환경을 구축할 수 있다!

 

※ Golden test는 특정 실제 위젯과 image 파일을 비교하는 테스트를 의미한다.

더 나아가서, 특정 실제 위젯과 snapshot(screenshot) test는 하나의 화면까지 확장해나간다.

golden_toolkit | Flutter package (pub.dev)

golden_toolkit | Flutter package

 

---

3. Debugging (디버깅)

3-1. logger 패키지

👍 장점 2가지

1. stack trace가 기본으로 제공되며, 아주 잘된다.

 

2. 세세한 디테일들이 옵션으로 제공되어, 래핑해서 사용하면 유용하다.

 

https://pub.dev/packages/logger

logger | Dart package

 

---

3-2. Network Log를 위한 "Alice" 패키지

다른 log 패키지도 많지만, Alice가 다양한 Dart http client plugin들을 지원하기 때문에 추천한다고 한다.

 

https://pub.dev/packages/alice

alice | Flutter package

 

---

4. DevTools

현업 개발자는 성능 개선 목적(Performance View)으로 Frames 체크, 메모리 이슈 체크 등에 주로 사용한다고 한다.

그리고 위젯 트리, UI 디버깅을 위해 Flutter Inspector를 사용한 것 제외하고는 자주 사용해 본 적은 없다고 한다.

하지만, 다른 개발자들은 네트워크 확인용으로도 많이 쓴다고 한다.

 

▶️ 개발하면서 자주 사용 하지 않는 이유?

Hot Reload, Hot Restart, Logging 기능들이 꽤나 강력하다.

Flutter Inspector(브라우저에도 제공하는 기능)가 복잡한 화면에서는 느리다는 단점이 있다.

프로젝트가 무거워질수록 DevTools도 무거워진다.

Flutter 개발 경력이 쌓일수록, UI 위젯 및 레이아웃도 익숙해진다.

 

https://docs.flutter.dev/tools/devtools

Flutter and Dart DevTools

 

---

5. Firebase

5-1. Firebase Local Emulator Suite

Firebase의 다양한 서비스를 구글 클라우드에서 돌리는 것이 아니라, 사용자의 로컬 컴퓨터 자체에서 돌리는 것을 말한다.

 

▶️ 해당되는 서비스

 

 

👍 사용하는 이유

 

 

▶️ 포트 구성

 

 

※ 데이터를 저장하고 & 읽어오는 방법

 

 

---

6. injectable 패키지

"Get It" 패키지의 의존성 등록 기능을 Annotation 기반 Code Generation을 통해 자동화 시켜주는 패키지이다.

 

https://pub.dev/packages/injectable

injectable | Dart package