![[Flutter] 27. 모두의 블로그 앱 만들기 (5) - 게시글 목록 페이지](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A25%3A53.888Z-9c6820cc-60de-4b16-8d16-29c18c138685&w=2048&q=75)
Post 객체
api 문서
api 문서 참고해서 Post 객체 만들기
통신
api 문서
post_repository
이전에 만들었던 user_repository의 코드를 참고해서 만들면 된다.
getList() 즉 게시글 목록보기를 위한 통신에서는 GET 방식, uri는 “/api/post”이고 queryString으로 page가 붙고 0이 default이다.
queryParameters 속성
queryParameters 속성은 Map<String, dynamic>? 타입이므로 page를 받을때 사진과 같이 map 타입으로 받아준다.
통신 테스트
디렉토리 구조
실제 post_repository 또한 lib 디렉토리 안의 data 디렉토리 안의 repository 디렉토리 아래에 위치하기 때문에 test 디렉토리 안에 똑같은 디렉토리 구조로 만든다.
post_repository_test
비동기 vs 동기
아래와 같이 코드를 작성할 경우 코드가 제대로 실행되지 않는다. 그 이유는 무엇일까?
PostRepository에서 작성한 getList 함수가 비동기 함수이기 때문에 main 스레드는 getList 상관없이 종료된다. 따라서 getList의 내부 작업이 완료된 뒤 종료되려면 await 와 async 처리가 필요하다.
accessToken
비동기 함수 처리 후 로그를 보면 ACCESS_TOKEN_INVALID라고 뜬다. 게시글 목록의 경우 로그인을 한 뒤에 볼 수 있는 페이지이므로 accessToken을 넣어주어야 한다.
PostVM
파일 위치
컨벤션) ViewModel은 Page 옆에 만들기
FM과는 약간 다르기 때문에 GVM을 참고해서 만드는 것이 낫다!
창고 데이터 타입
창고
JSON 배열 데이터를 Dart 객체 리스트(List<Post>)로 변환
(data["posts"] as List).map((e) => Post.fromMap(e)).toList()
fromMap 만들기 전
fromMap 만든 후
PostListModel?
PostListModel()는 통신을 통해 가져오기 때문에 초기화가 불가능하다. 뿐만 아니라 빈 객체 만드는 것이 더 어렵기 때문에 null을 반환한다. 그리고 init 함수가 비동기 함수로서 동작하도록 return 전에 init 함수를 호출한다.
창고 관리자
PostListBody
PostListItem
데이터 바인딩
이미지
CachedNetworkImage 라이브러리
한 번 휴대폰에 다운받은 이미지는 캐싱된다. 웹에서는 안되고 앱에서는 캐싱 가능하다.
의존성 추가
사용 예1
사용 예2 : Content-Length를 통해서 진행 바를 만든다.
imgUrl
imgeUrl을 보면 호스트 주소가 없기 때문에 직접 작성해줘야 한다.
서버 jar 파일의 이미지 디렉토리
서버 jar 파일에는 이미지가 들어갈 수 없기 때문에 jar 파일 위치에 images 폴더와 그 안에 이미지를 추가해야 한다.
Share article
![[Flutter] 29. 모두의 블로그 앱 만들기 (7) - 게시글 삭제](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A27%3A07.081Z-49837f62-e66b-4cd0-a032-f1aeebd2a7f7&w=750&q=75)
![[Flutter] 28. 모두의 블로그 앱 만들기 (6) - 게시글 상세 페이지](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A26%3A34.911Z-d4aabea1-3c87-4cc7-afa8-96fefca5398e&w=750&q=75)
![[Flutter] 26. 모두의 블로그 앱 만들기 (4) - 로그아웃](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A31%3A12.622Z-0938cf11-7ec7-4041-b204-46f7ca8c4002&w=750&q=75)
![[Flutter] 25. 모두의 블로그 앱 만들기 (3) - 로그인 페이지](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A26%3A05.436Z-468b97b7-2318-4f6d-9511-5ac23380da40&w=750&q=75)