[TIL-5]Flutter 마켓 앱 Part 03: REST API 실습 및 회원 기능 구현

 

📌 Flutter 마켓 앱 Part 03: REST API 실습 및 회원 기능 구현

✅ REST API 이해하기

REST API란? 서버 자원(데이터)을 HTTP 요청으로 CRUD 하는 방식

• GET - 조회
• POST - 생성
• PUT - 전체 수정
• PATCH - 일부 수정
• DELETE - 삭제

요청 시 URI + Method 로 요청 타입을 구분하고, Header와 Body로 추가 정보를 보냅니다.

GET /post HTTP/1.1
Host: www.111coding.com

🚀 Docker로 API 서버 실행

• docker pull 111coding/market-server
• docker run -p 8080:8080 ... 실행 후 Swagger 문서 확인

🧰 dio로 인증 자동화

로그인 후 JWT 토큰을 interceptor에 저장하고, 이후 모든 요청에 자동으로 넣어줍니다.

class AuthInterceptor extends Interceptor {
  String? bearerToken;

  @override
  void onRequest(...) {
    if (bearerToken != null) {
      options.headers['Authorization'] = bearerToken!;
    }
    ...
  }

  @override
  void onResponse(...) {
    if (response.realUri.path == '/login') {
      bearerToken = response.headers['Authorization']?.first;
    }
    ...
  }
}

🔐 로그인 기능

LoginPage는 ViewModel로 로직을 위임, 성공 시 홈으로 라우팅 처리.

final result = await ref.read(loginViewModel).login(...);
if (result) {
  Navigator.pushAndRemoveUntil(...);
}

📷 파일 업로드 (프로필 사진)

image_picker & mime 패키지를 활용해 Uint8List 로 바이트 가져오고 MIME 추출

final result = await ImagePickerHelper.pickImage();
if (result != null) {
  await fileRepo.upload(
    filename: result.filename,
    mimeType: result.mimeType,
    bytes: result.bytes,
  );
}

🧑 회원가입 기능 구현

JoinPage에서 입력값 + 프로필 이미지 업로드 완료 시 회원가입 API 호출

await userRepository.join(
  username: 'tester',
  nickname: '테스터',
  password: '1234',
  addressFullName: '서울특별시',
  profileImageId: uploadedFile.id,
);

🌐 전역 상태 관리로 사용자 정보 관리

userGlobalViewModel을 통해 앱 어디서든 사용자 정보 접근 가능하게 구성

final user = ref.watch(userGlobalViewModel);
if (user != null) {
  print(user.nickname);
}

📎 참고 사항

• Swagger로 API 테스트 → token 넣고 직접 요청
• 테스트 코드로 각 API 로직 검증 (e.g. expect 사용)
• ViewModel은 Riverpod 기반으로 관리