fetchPosts 함수 동작 순서 관련 질문입니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요.

딜레이 되는 동안 AppLoading 컴포넌트가 보여지고,

Error가 없다면 게시글 목록이 보이는 상태입니다.

에러가 발생하지 않았다면,

로딩화면 보임-> 로딩화면 사라짐 -> 게시글 목록 데이터 표출

으로 화면이 보여지는데요

제 의문은, 두 번째 이미지에 보이는 코드에서

로딩화면 사라짐 -> 게시글 목록 데이터 표출

은 정의된 적이 없는 것 같은데 이렇게 작동하는 것에 있습니다.

try문에서 loading.value = true가 되어 로딩화면이 보이게 되고,

그 상황에서 getPosts로 데이터를 뿌리게 됩니다.

그리고나서 정상적으로 가져오고 나면

finally문에서 loading.value = false가 되면서 로딩화면이 사라지게 되는거 아닌가요?

즉, fetchPosts 함수는

로딩화면 보임 -> 로딩화면과 동시에 게시글 목록 데이터 표출 -> 로딩화면 사라짐

을 명령하고 있는 상황 아닌가요?

const fetchPosts = async () => {
	try {
		loading.value = true; // 로딩 화면 표시
		const { data, headers } = await getPosts(params.value);
		posts.value = data; // 값 저장 (화면에 목록 표시)
		totalCount.value = headers['x-total-count'];
	} catch (err) {
		error.value = err;
	} finally {
		loading.value = false; // 로딩 화면 제거
	}
};