163 고민 - 로딩 컴포넌트 제어 방법, 컴포넌트는 어떤 구조로 정리하면 좋을까 (링크드인)

source: categories/study/vue-experiance/vue-experiance_9-99_64.md

163 로딩 컴포넌트 제어 방법, 컴포넌트는 어떤 구조로 정리하면 좋을까 (링크드인)

로딩 컴포넌트 제어 방법

• 링크드인

• 로딩 컴포넌트 쉽게 제어하는 방법?
• 고민되는 부분
  • api 호출시 로딩 컴포넌트 띄우고 응답이 오면 끄는 코드를 axios interceptors 부분에 작성
  • 여러 api가 동시에 호출되는 경우 로딩 컴포넌트가 생성되었다 없어졌다를 반복하는 현상 발생
  • 이를 제어하기 위해 debounce 개념 적용 0.04초 안에 또 다른 응답이 들어오면 로딩 컴포넌트를 안 끄도록 제어
  • 어느정도 현상은 완화되었지만 이 방법의 장/단점이 있음

장점

• 이미 프로젝트가 꽤 진행된 상황에서 모든 api 호출에 대한 로딩 컴포넌트를 일괄적으로 적용할 수 있음
• axios interceptors에서 제어하므로 로딩 컴포넌트 제어가 쉬움

단점

• api 응답이 0.04초 간격 안에 안오게되면 로딩 컴포넌트가 꺼졌다가 다시 생성되는 현상 발생
• 최종 응답이 오고 0.04초 이후에 로딩 컴포넌트가 꺼짐 (0.04초라 체감상 크게 안느껴지더라도 어쨌든 딜레이가 생김)

보다 더 쉽게 로딩 컴포넌트를 제어하는 방법은 없을까?
요즘 제일 많이하는 고민

컴포넌트는 어떤 구조로 정리하면 좋을까?

1. 레이어드 아키텍처
2. 모듈러 아키텍처 ㄴ 현재 관심가는 컴포넌트 정리 기법 ㄴ 아직 주니어 프론트엔드 개발자로써 어떤 기법이 더 효율적일지는 모르겠으나 일단 도입해서 사용해볼 예정 ㄴ 추가적으로 관심가는 분야는 함수형 프로그래밍

누가 보더라도 알아보기 쉽고 깔끔한 코드 작성하고싶다