조금만 더 여쭙겠습니다.
이제 막 걸음마 뗀 수준이니께 일단vuex사용해보고, vuex문법을 pinia로사용해보려고합니다.
1. 제 생각이 괜찮을까요? ( 근데 귀찮으면 pinia까지 안갈수도있어요.. 리액트로취업하고싶고, vue는 자바스크립트를 더 이해하고싶고 뭔가 js사용하는것같은? 느낌이 좋아서 사용하는거라)
2. 라우터 문법중에,
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
// 경로 수준 코드 분할
// 이 경로에 대해 별도의 청크(About.[hash].js)가 생성됩니다.
// 경로를 방문할 때 지연 로드됩니다.
component: () => import('../views/AboutView.vue'),
},
],
});
export default router;
component: () => import('../views/AboutView.vue'), 이부분이 궁금한데요,
강의에서는 안나왔고, 위에 코드는 제가 보일러플레이트 검색해서 살펴보던중 나온건데, (만약 강의에서 설명하셨다면 죄송합니다 제가 시간압박에 1.5배로 들어서..)
이게 어떤 느낌인지는알겠는데, 주로 쓰이는 코드 구조일까요?
챗지피티에 물어봤을땐
1. 초기 로딩 시간 단축: 초기 로딩 시에 필요한 최소한의 자원만 로드하여 애플리케이션 초기화 속도를 높입니다.
2. 자원 효율성: 모든 페이지의 컴포넌트를 한 번에 불러오는 것이 아니라, 사용자가 페이지를 방문할 때마다 필요한 자원만 동적으로 로딩함으로써 자원을 효율적으로 관리합니다.
3. 모듈성 및 유지보수: 각 컴포넌트를 독립적인 모듈로 분리하고 로딩하면 코드의 모듈성이 높아지며, 개발 및 유지보수가 용이해집니다.
라고하는데요, 초기로딩시간단축! 이게 핵심인거같은데,그러면 초기'/'경로는 home 지금처럼 사용하고
이제부터 컴포넌트는 ()=>import 이렇게 사용해주면 되는걸까요?
