Vue.js가 무엇일까

SPA(Single Page Application)란?

Vue를 알아보기에 앞서 SPA가 무엇인지 부터 알아보자

단일 페이지 어플리케이션. static file을 한번에 모두 다운로드받아, 이후에 필요한 데이터만 서버에 요청하여 동적으로 받게해주는 웹어플리케이션

SPA가 왜 좋은지도 알아봐야지?

SPA 장점

• 클라이언트가 모든 페이지를 갖고있어서 앱과 같은 자연스러운 효과를 느낄수있다.
• 페이지 이동시에도 필요한 부분만 교체하면되서 효율성이 조음
• 컴포넌트 별로 개발이 편함
• 앱과 웹이 동일한 서버를 사용가능함

그럼 SPA 개좋은거??? 라는 생각이 들었음

당연히 단점도 있다

SPA 단점

• 첫 접속시 사이트의 모든 리소스를 받기 때문에 초기 구동속도가 느릴수 있음
• 보안문제로 비즈니스 로직이 들킬수있음!

첫 접속시 사이트의 모든 리소스를 받기 때문에 초기 구동속도가 느릴수 있음

여기서 이 단점을 고칠수있는 방법이라고 해야하나?

맨땅에 개발하기 - Vue Router | VueJS 3 | Learning the Basics -2
제로초님의 강의를 듣다보니 라우트 파일에서 컴포넌트를 불러올때마다 그 컴포넌트를 받아오면 되는듯??

const About = () => import('./views/About.vue')
const Users = () => import('./views/Users.vue')
const UsersDetail = () => import('./views/UsersDetail.vue')
const UsersEdit = () => import('./views/UsersEdit.vue')
routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/users',
      name: 'users',
      component: Users,
      children:[
        {
          path: ":id",
          name: "users-detail",
          component: UsersDetail,
        },
        {
          path: ":id/edit",
          name: "users-edit",
          component: UsersEdit,
        }
      ]
    }
  ]

Vue.js가 무엇인지

Vue 공식문서에는 아래와 같이 나온다

Vue는 컴포넌트 단위로 동작하며 지원하는 라이브러리가 많고 Vue커뮤니티도 활성화되어 있어서 개발속도 및 유지보수에 좋다고 한다

다음 포스팅으로...