[Flutter 9기 창업반] 앱 개발 창업 부트캠프 36일차

[TIL] Flutter Book Search 앱 만들기 - API 연동과 MVVM 설계

오늘은 네이버 책 검색 API를 연동하여 데이터를 받아오는

Repository 로직을 구현하고, 앱의 구조를 잡기 위해 MVVM 패턴 도입을 준비했다.

특히 Future 반환 타입 문제와 JSON 파싱 과정을 중점적으로 학습했다.

 

1. API 데이터 통신과 JSON 파싱 (Repository)

서버에서 책 목록 데이터를 받아오는 

BookRepository 클래스를 구현

 

주요 학습 내용

• http 패키지 사용: http.get을 사용하여 GET 요청을 보내고,
  헤더(X-Naver-Client-Id, X-Naver-Client-Secret)에 인증 정보를 담아 전송하는 법을 익혔다.
• 비동기 처리 (Future, async/await): 네트워크 요청은 시간이 걸리는 작업이므로 async 메서드로 만들고,
  반환 타입을 Future<List<Book>>으로 지정했다.
• JSON Parsing:
• map() 함수와 Iterable:

코드 예시 (BookRepository)

dart

Future<List<Book>> searchBooks(String query) async {
  final client = Client();
  final response = await client.get(
    Uri.parse('api_url...'),
    headers: { ... },
  );

  // 응답 코드가 200(성공)일 때
  if (response.statusCode == 200) {
    Map<String, dynamic> map = jsonDecode(response.body);
    final items = List.from(map['items']);

    // items를 순회하며 Book 객체로 변환
    final iterable = items.map((e) => Book.fromJson(e));
    return iterable.toList();
  }
  
  // 실패 시 빈 리스트 반환
  return [];
}

 

2. Null Safety와 Return 타입 에러 해결

• 문제 발생: Future<List<Book>> 타입을 반환한다고 선언했으나,
  코드 내 조건문(if)에 걸리지 않는 경우(else)에 대한 반환 처리가 없어서
  "body might complete normally causing 'null' to be returned" 에러가 발생했다.
• 해결: 함수가 끝날 때 return []; (빈 리스트)를 추가하여, 예외 상황에서도
  항상 Non-nullable한 List<Book>이 반환되도록 보장했다.

3. MVVM 패턴 설계 시작

UI와 비즈니스 로직을 분리하기 위해 MVVM(Model-View-ViewModel) 패턴 도입을 실습했다.

home_view_model.dart 파일을 생성하고 앞으로 구현할 3가지 핵심 단계를 정리

1. 상태 클래스 만들기 (State): 화면에 보여줄 데이터들의 상태를 정의.
2. 뷰모델 만들기 (ViewModel): Notifier 등을 상속받아 비즈니스 로직을 담당.
3. 뷰모델 관리자 만들기 (Provider): NotifierProvider 객체를 생성하여 UI에서 접근 가능하게 설정.

 

📝 회고

API에서 데이터를 받아와 파싱하는 과정이 처음엔 복잡해 보였지만, 

Decode -> List 추출 -> map으로 객체 변환 -> toList의 흐름을 이해하니 명확해졌다.
MVVM 구조에 맞춰 ViewModel을 완성하고 실제 데이터를 화면에 뿌려보는 작업을 진행 할 예정이다.
- 오늘 내 마무리 예정