인프런 커뮤니티 질문&답변
작성한 질문수
fetchPosts 함수 동작 순서 관련 질문입니다.
작성
·
394
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요.
딜레이 되는 동안 AppLoading 컴포넌트가 보여지고,
Error가 없다면 게시글 목록이 보이는 상태입니다.
에러가 발생하지 않았다면,
로딩화면 보임-> 로딩화면 사라짐 -> 게시글 목록 데이터 표출
으로 화면이 보여지는데요
제 의문은, 두 번째 이미지에 보이는 코드에서
로딩화면 사라짐 -> 게시글 목록 데이터 표출
은 정의된 적이 없는 것 같은데 이렇게 작동하는 것에 있습니다.
try문에서 loading.value = true가 되어 로딩화면이 보이게 되고,
그 상황에서 getPosts로 데이터를 뿌리게 됩니다.
그리고나서 정상적으로 가져오고 나면
finally문에서 loading.value = false가 되면서 로딩화면이 사라지게 되는거 아닌가요?
즉, fetchPosts 함수는
로딩화면 보임 -> 로딩화면과 동시에 게시글 목록 데이터 표출 -> 로딩화면 사라짐
을 명령하고 있는 상황 아닌가요?
답변 1
0
안녕하세요 :)
제가 지금 질문을 정확히 이해할 수 없어서요 🥲
말씀 하신 것 중
제 의문은, 두 번째 이미지에 보이는 코드에서
로딩화면 사라짐 -> 게시글 목록 데이터 표출
은 정의된 적이 없는 것 같은데 이렇게 작동하는 것에 있습니다.
이 부분은 두 번째 이미지 코드에 정의가 되어 있어서 동작이 되는데요.
로딩 화면 표시
값 저장 (화면에 목록 표시)
로딩 화면 제거
이러한 로직으로 잘 동작하고 있는데요.
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; // 로딩 화면 제거
}
};어떤 질문이신지 조금 더 자세히 설명해주시겠어요?
처음 질문 하신 부분에서
로딩화면 보임 -> 로딩화면과 동시에 게시글 목록 데이터 표출 -> 로딩화면 사라짐
로딩화면과 게시글 목록을 동시에 표시할 순 없어요. 왜냐하면
<template> 에서 v-if 조건문으로 분기하고 있기 때문입니다.
따라서 로직이 로딩화면 표시 -> 목록 값 저장 -> 로딩화면 제거 라는 로직으로 하셨어도.
<template> 로직 내 v-if 분기로 인하여 로딩화면 표시 -> 로딩화면 사라짐 -> 목록 보여짐
으로 보여지는게 맞습니다. 만약 UX를 다르게 가져가고 싶다면 분기문(v-if, else-if)을 수정하면 되겠죠?
음.. 답변에 사용하신 이미지에 담긴 코드에서,
try문에서 값 저장 (화면에 목록 표시)를 한 후에, finally문에서 로딩 화면을 제거한다고 생각하고 있습니다.
즉,
로딩 화면 표시
로딩 화면 표시 & 값 저장 (화면에 목록 표시)
로딩 화면 제거
로 동작해야하는 거 아닌가요?