회원가입 Provider적용 후 서버와 통신

아키텍처 

- View : 클라이언트에게 보여지는 화면

- ViewModel : 화면이 가지고 있어야할 데이터들 

- Controller : 비즈니스 로직을 담당

- Service : 서버와 통신, 파싱을 담당

- HttpConnector : 실질적인 서버와 통신을 하고 Response 를 돌려준다.

 

1. Controller 작성

- Service는 ref를 가지면 이후 ref때문에 모두 생성자로 넘겨주는 일이 발생 할 수 있다고 해서, 싱글톤 디자인 패턴을 사용했다.

- 회원가입 페이지로 이동할 때 role값을 넘겨주어야하는데, 원래는 rout에 설계를 했었지만, 값을 넘겨주기위해서 MaterialPageRoute를 사용해서 argument로 넘겨주었다.

- join메서드에서는 응답받은 ResponseDto의 Http상태 코드를 통해서 400미만이면 성공하게 했다.

final userController = Provider<UserController>((ref) {
  return UserController(ref);
});

class UserController {
  final gContext = navigatorKey.currentContext!;
  final Ref _ref;
  UserController(this._ref);
  final UserService userService = UserService();
  
  // 회원가입 분기 페이지 -> 회원가입 페이지로 넘어갈때 일반회원, 전문가 회원 구분 값 넘겨줌.
    Future<void> moveJoinPage(String role) async {
    if (role == "USER") {
      await Navigator.push(gContext, MaterialPageRoute(builder: (context) => JoinPage(role: role)));
    }
    if (role == "EXPERT") {
      await Navigator.push(gContext, MaterialPageRoute(builder: (context) => JoinPage(role: role)));
    }
  }
  
    Future<void> joinUser({required JoinReqDto joinReqDto}) async {
    // Service 호출
    ResponseDto responseDto = await userService.fetchJoin(joinReqDto);
    if (responseDto.statusCode < 400) {
      Navigator.popAndPushNamed(gContext, "/login");
    } else {
      ScaffoldMessenger.of(gContext).showSnackBar(
        SnackBar(content: Text("회원가입 실패")),
      );
    }
  }
  }

2. Service

- Provider를 사용하지 않았기 때문에 무분별하게 Service 생성을 막기 위해서 싱글톤으로 만들어서 사용했다.

- 서버는 SpringBoot의 java를 사용중이다. 통신을 하기 위해서 body값을 json으로 바꿔서 전달해줄 필요가 있다.

- 마지막으로 응답 받을땐 http의 Response가 응답 되기 때문에 내가 알아볼 수 있는 ResponseDto로 바꾸어서 Controller에 return을 해주었다.

class UserService {
  final HttpConnector httpConnector = HttpConnector();

  //싱글톤 관리
  static final UserService _instance = UserService._single();
  UserService._single();
  // factory는 java = ioc컨테이너와 비슷한 역할을함.
  factory UserService() {
    return _instance;
  }

  Future<ResponseDto> fetchJoin(JoinReqDto joinReqDto) async {
    // 1. json변환
    String requestBody = jsonEncode(joinReqDto.toJson());
    Logger().d("회원가입 데이터 확인 : ${requestBody}");
    // 2. 통신 시작
    Response response = await httpConnector.post(path: "/api/join", body: requestBody);

    return toResponseDto(response); // ResponseDto 응답
  }
  }

 

결과 화면