역할 별로 진행하기

김인범

Jan 13, 2025

Contents

View에서 해야 할 것 GVM 에서는

📌

View(그림그리기)

ViewModel ( 상태관리, 비즈니스 로직, 파씽)

Repository (통신)

View에서 해야 할 것

회원가입 버튼을 눌리면 따로 처리할 것 없이 GlobalViewModel에게 위임한다. (사용자 입력값만 넘겨주자..)

GVM 에서는

📌

GlobalViewModel은

페이지에 데이터가 안들어가는 View들에 사용된다.

ex) 로그인, 회원가입 등


Future<void> join(String username, String email, String password) async {
    // 파싱
    final body = {
      "username": username,
      "email": email,
      "password": password,
    };

    Map<String, dynamic> responseBody = await userRepo.save(body);
    if (!responseBody["success"]) {
      ScaffoldMessenger.of(mContext!).showSnackBar(
        SnackBar(content: Text("회원가입 실패 : ${responseBody["errorMessage"]}")),
      );
      return;
    }
    // 응답 정상일 경우
    Navigator.pushNamed(mContext, "/login");
  }

회원가입이 실행된다.

VM에서 Map으로 파싱을 하고,

Repository에 통신을 위임한다.

Repo에서

Repository에서는 통신을 통해

서버에 데이터를 JSON으로 보내고 그에 대한 응답을 받는다.

dio 설정해주기

이때 dio는 응답상태: 200 이 아닌 것들은 무조건 그냥 터트리기 때문에

dio에서 따로 설정으로

벨리데이션스테이터스 true로 설정해야 한다.

돌아와서

응답으로 받은 respones 바디 데이터를 VM에 return 해준다. VM 에서는 받은 응답 데이터를 가지고 유효성이나 그 외 처리 작업을 한 뒤

다음 페이지로 넘어갈 수 있도록 Context를 이용해야 한다.

이때, View에서 VM으로 넘길 때마다, context를 달아주면 번거롭다.

context 해결책

main에서 글로벌 키로 navigatorState를 달아주면

이것이 Stack 가장 위에 있는 context를 인지하고 있고,

VM에서 네비게이터키를 사용해 컨텍스트로 페이지를 그려낼 수 있게 된다.


// 응답 정상일 경우
    Navigator.pushNamed(mContext, "/login");

회원가입이 정상으로 진행되었을 경우

mContext를 통해서 [로그인 페이지]로 갈 수 있게 됩니다.

Future<void> join(String username, String email, String password) async { // 파싱 final body = { "username": username, "email": email, "password": password, }; Map<String, dynamic> responseBody = await userRepo.save(body); if (!responseBody["success"]) { ScaffoldMessenger.of(mContext!).showSnackBar( SnackBar(content: Text("회원가입 실패 : ${responseBody["errorMessage"]}")), ); return; } // 응답 정상일 경우 Navigator.pushNamed(mContext, "/login"); }