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에 넣어 주는 것입니다.
필터링이 마무리 되면 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
Share article
