Vue - 진입점

디렉토리 구조

.
└── component
    ├── README.md
    ├── babel.config.js
    ├── jsconfig.json
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── ArticleList.vue
    │   │   ├── ChildComponent.vue
    │   │   ├── DataService.vue
    │   │   ├── HelloWorld.vue
    │   │   ├── ParentComponent.vue
    │   │   └── layout
    │   │       ├── Footer.vue
    │   │       └── Header.vue
    │   ├── main.js
    │   ├── router
    │   │   └── index.js
    │   ├── store
    │   │   └── index.js
    │   └── views
    │       ├── AboutView.vue
    │       ├── ComponentEx.vue
    │       └── HomeView.vue
    └── vue.config.js

• component
  • 프로젝트 root
  • src
    • router
      • 라우터 설정
    • store
      • vuex 상태 관리 설정
    • views
      • 라우터를 통해 이동하는 페이지
      • https://www.search2.com/about > AboytView.vue
      • https://www.search2.com/component> ComponentEx.vue
      • https://www.search2.com/ > HomeView.vue
    • components
      • 컴포넌트 파일
    • main.js
      • vue 프로젝트 실행 진입점
      • main.js를 통해 createApp
      • createApp에 App.vue 컴포넌트를 적용
      • mount('#app')를 통해 id가 app인 element에 적용
    • App.vue
      • 루트 컴포넌트
  • public/index.html
    • SPA(Single Page Application)에서 말하는 Single Page
    • main.js를 통해 mount 하는 app이 존재하는 곳

SPA

• SPA는 말 그대로 하나의 페이지로 구성된 웹 애플리케이션
• 첫 요청시 딱 한 페이지만 요청하고, 화면이 변경될 때는 기존 페이지를 수정해서 보여주는 방식
  • 즉, 최초 페이지 로딩 후 필요한 부분만 서버에 요청 후 응답을 받고 화면을 갱신해서 사용자에게 보여준다.