서버 통신하기-4. 게시글 삭제

HootJem

Oct 14, 2024

Contents

1. postman 확인 2. 레파지토리 3. ViewModel

1. postman 확인

Delete 요청을 보내니 status 를 리턴하고 있습니다 body 가 null 인것을 보니 리턴 값을 만들지 않아도 될 것 처럼 보입니다.

2. 레파지토리

레파지토리에 메서드 만들었습니다. 포스트맨에서 확인한 것 처럼 우리가 리턴할 것은 없기 때문에 (상태 코드를 리턴해도 되지만..) await dio.delete(”api/post", data: {"id": id}, ); → 이건 안됨

await dio.delete("/api/post/$id"); → 이건 됨

Spring의 @DeleteMapping("/api/post/{id}") 설정이 ID를 URL 경로에 포함 시키고 있기 때문입니다.


 Future<void> delete(int id) async {
    await dio.delete("/api/post/$id");
  }

이 코드는 body 에 리턴할 데이터가 없기 때문에 파싱할 데이터도 없습니다.

하지만 status 코드의 200, 여부에 따라에 따라 분기를 나누거나, try~catch 로 묶어 주어야합니다. (이번엔 안할거예요)

3. ViewModel

그리고 나서 ListVM 로 갑니다. 왜 ListVM 이냐면 리스트 중 삭제된걸 날릴 것이기 때문입니다. 삭제된 id 를 매개변수로 전달하여 레파지토리의 deleteById 를 호출.


Future<void> notifyDelete(int id) async {
  await PostRepository().delete(id);

  List<_Post> newPosts = state!.posts.where((e) => e.id != id).toList();
  state = PostListModel(newPosts);

  Navigator.pop(mContext);
}

where 을 사용하여 필터링을 하겠습니다. 각 리스트의 id 값과 삭제된 id 를 비교하여 false 만 list에 넣어 주는 것입니다.

자세한 설명 ->https://inblog.ai/hj/dart-리스트-맵-30419

필터링이 마무리 되면 state 에 넣어주고, 이동을 시킵니다.

주요 로직은 마무리 되었기 때문에 삭제 동작을 만들 버튼에 넣어주면 됩니다.

버튼이 속해있는 클래스가 ConsumerWidget 을 상속하는지 확인하고,

빌더는 WidgetRef ref 를 매개변수로 갖습니다.


onPressed: () {
  ref.read(postListProvider.notifier).notifyDelete(id);
},

이렇게 이벤트에 등록시키면 됩니다.

📌유저 편의성

삭제가 바로 되었는지 확인 시켜주기 위해 ScaffoldMessenger 를 사용하여 시각적으로 표현해 줄 수 있습니다.


ScaffoldMessenger.of(mContext).showSnackBar(
      SnackBar(
        content: Text('게시글이 삭제되었습니다.'),
        duration: Duration(seconds: 2),
      ),
    );

💡

서버 통신 - jar 파일 만들기 / 설정 https://inblog.ai/hj/서버-통신하기1-설정-31514

서버 통신 - 상세 페이지 보기 https://inblog.ai/hj/서버-통신하기2-상세-페이지-보기-31515

서버 통신 - 글쓰기 https://inblog.ai/hj/서버-통신하기3-글쓰기-31518

서버 통신 - 게시글 삭제 https://inblog.ai/hj/서버-통신하기4-게시글-삭제-31519

Contents

1. postman 확인 2. 레파지토리 3. ViewModel

Future<void> notifyDelete(int id) async { await PostRepository().delete(id); List<_Post> newPosts = state!.posts.where((e) => e.id != id).toList(); state = PostListModel(newPosts); Navigator.pop(mContext); }