MVVM 아키텍처를 이용하여 앱을 만들어보자.
MVVM 아키텍처
오늘은 MVVM 아키텍처 를 이용해서 앱 개발을 해보자.
MVVM 아키텍처란?
지난 시간에 배웠듯이 MVVM 아키텍처는 뷰, 모델, 뷰모델의 세 가지 계층으로 상태를 관리하는 개발 구조를 말한다.
서버에서 가져오는 데이터인 Model, 화면을 구성하는 View, 그 둘 사이에서 상태를 전달하고 관리하는 ViewModel 이 서로 분리되어있어 관리하기에 편하다.
디렉토리는?
사실 지금 소개하는 디렉토리 구조는 책에 나오거나 공식으로 정해진 것은 아니고 다른 방식으로 폴더 이름을 정해도 괜찮다. 하지만 협업하는 데 있어 많은 사람들이 사용하는 방법을 따르면 조금 더 편리해질 것이다.
이번에 실습하며 배운 파일 구조를 기억해두면 좋을 것 같아서 tree로 만들어보았다.
파일 트리
📦lib
┣ 📂core
┣ 📂data
┃ ┣ 📂model
┃ ┗ 📂repository
┣ 📂ui
┃ ┣ 📂pages
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┣ 📜home_page.dart
┃ ┃ ┃ ┗ 📜home_view_model.dart
┃ ┗ 📂widgets
┗ 📜main.dart
가장 큰 분류는 core , data , ui 이다.
이 중 ui 에는 화면 구성하는 파일을, core 에는 전역으로 쓰는 유틸 함수 등을, data 에는 말 그대로 앱에서 사용하는 데이터와 관련된 파일을 담아둔다.
그럼 data 폴더 하위의 두 폴더는 어떤 차이가 있을까?
repository
쉽게 말해서 DB에 쿼리 명령어를 전달해주는 역할을 한다.
일종의 저장소처럼 기능하는 파일이 들어 있는 폴더이다.
서버에서 제공하는 데이터를 받아오고 싶을 때 클라이언트 아이디나 주소 같은 정보를 저장하고 이를 바탕으로 원하는 데이터를 가져오는 함수를 직접 정의한다.
model
MVVM의 그 Model이다. 서버로부터 받아온 데이터를 View로 전달할 때 사용한다.
JSON을 공부할 때 데이터 형태를 지정하는 방법, 데이터 읽는 함수 쓰는 방법을 배웠는데 그 내용은 이 폴더 하위에 작성한다. fromJson이나 toJson 등등...
실제로 사용해보자
1. Model
먼저 데이터 모델을 정의하고 직렬화된 파일을 읽을 함수를 준비해야 한다. 이 경우에는 JSON 형식을 예시로 들었다.
이 파일은 위에 적어둔 것처럼 data/model/ 에 작성한다.
책의 정보를 받아오기 위해 필요한 정보와 데이터를 저장할 객체를 생성하고, 변환 함수(fromJson, toJson 등)를 선언했다.
2. DB
다음으로 데이터를 가져올 서버가 있어야 한다.
이번에는 네이버 API를 사용해보았다.
네이버 개발자센터 https://developers.naver.com/main/
네이버 개발자센터에 접속해서 애플리케이션을 등록하면 클라이언트 키를 발급받을 수 있다.
이 값을 저장해둔다.
3. repository
마지막으로 레포지토리를 연결해주면 된다.
데이터베이스를 읽어와야 하므로 Future 타입 함수를 선언한다.
client를 정의한 다음 get 함수 안에 데이터 저장소의 URL과 헤더를 입력해야 한다.
아래처럼 입력한다.
그 다음으로 get 함수가 요청에 성공했는지 그렇지 않은지 판별해야 한다.
요청을 성공하면 statusCode가 200이 되므로 이런 경우 jsonDecode를 활용해서 앱에서 쓸 수 있는 형태로 데이터를 가공하면 된다.
하지만 요청에 실패했을 경우 받아온 데이터가 없으므로 빈 배열을 반환한다.
