MVVM - mandol96/Navi GitHub Wiki

Repository

• UI와 직접적으로 관계없는 데이터 관련 로직을 분리하여 코드의 복잡성을 줄입니다.
• 데이터 소스를 추상화하여 데이터의 출처를 몰라도 사용 가능하게 합니다.
• 가져온 데이터를 조합하여 비즈니스 로직에 맞는 형태로 가공해줍니다.

MVVM 패턴 View

• UI그리기, 사용자 action 알리기 ViewModel
• View에 나타낼 데이터 관리, 입력 이벤트 상태 관리, UI를 그리는데 필요한 데이터 요청 Model
• 데이터 관리, 앱의 비즈니스 로직 Data 계층이 model에 역할을 한다

"NaviApp UI 흐름 홈 (지도) -> 지도 추가하기 -> 위치 선택 ->게시글 -> 게시글 등록 -> 공유 -

지도 화면에서는 Kako API를 활용하여 지도를 띄워줍니다. 플로팅 버튼(FAB)을 클릭 시 장소 등록으로 이동하게 됩니다. 장소 등록에서는 드랍다운메뉴와 텍스트필드가 다 입력이 되면 버튼이 활성화 되고, 완료 버튼을 누르면 토스트 메시지로 성공 실패 유/무를 알려줍니다. 위치 찾기를 누르면 자신의 현재 위치로 이동하여 보여줍니다. NaviService에서 카카오 Rest API를 이용하여 json 데이터를 직렬화/역직렬화 역할을 하여 주소 <-> 좌표를 구해줍니다. 게시글 화면에서는 리사이클러뷰로 리스트 형식으로 게시글들을 나타내주고 플로팅 버튼(FAB)을 클릭 시 장소 등록으로 이동하면 장소 등록과 같이 모든 값이 입력되어야 버튼이 활성화됩니다. 해당 화면은 MVVM 패턴을 적용하여 Data를 관리하는 코드는 Repository에서 해주고 ViewModel에서는 StateFlow로 UI에 상태에 따라 보여주는 Repository에 코드를 참조하여 성공/실패/로딩에 대한 상태를 나타내줍니다.