728x90
반응형

2024/10/16 2

[콜럼Vue스] 비동기 컴포넌트 (Async Component)

Vue에서 비동기 컴포넌트(Async Component)는 컴포넌트를 동적으로 로드하여, 필요한 시점에만 렌더링하는 기법임.이 방법은 대규모 애플리케이션에서 초기 로딩 시간을 줄이고, 라우팅 또는 사용자 상호작용에 따라 필요할 때만 컴포넌트를 불러올 수 있게 해줌.비동기 컴포넌트를 사용하는 이유초기 로딩 시간 최적화앱의 모든 컴포넌트를 한 번에 로드하는 대신, 사용자가 접근하는 순간에 로드함으로써 초기 로딩 시간을 줄일 수 있음.코드 스플리팅Webpack과 같은 번들러가 **비동기 컴포넌트를 분리된 청크(chunk)**로 만들어서, 필요한 파일만 네트워크로 로드하게 만듦.사용자 경험 개선대기 시간이 길어지는 부분에서는 로딩 스피너나 에러 핸들링을 통해 사용자 경험을 개선할 수 있음.defineAsyncC..

[콜럼Vue스] 텔레포트 (Teleport)

Vue에서 Teleport는 컴포넌트의 DOM 구조를 현재 컴포넌트 트리 외부의 특정 위치로 이동시키는 기능임.이를 통해 렌더링된 요소를 HTML의 다른 부분에 배치하면서도, Vue의 반응형 데이터 및 이벤트가 유지되도록 도움.보통 모달, 툴팁, 드롭다운 같은 UI 컴포넌트를 구현할 때 유용. Teleport의 사용법기본 사용 예시 메인 컴포넌트 이 모달은 body에 렌더링됨 위 코드에서는 teleport 태그를 통해 .modal 컴포넌트가 HTML의 태그로 이동하여 렌더링됨.to 속성: 텔레포트가 렌더링될 목적지를 지정하는 필수 속성. 예를 들어, 모달과 같은 요소를 페이지 어디서든 쉽게 제어하려면 body에 텔레포트하는 것이 일반적임.Tel..

728x90
반응형