ProgrammingFrontendVue

Vue JS 기본 설명

, , ,

Vue 애플리케이션을 시작하려면 명령어을 사용 하세요.

1
npm create vue@latest

공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치하고 실행합니다. 설치 시 프로젝트 이름, TypeScript 설정, JSX 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다:

1
2
3
4
5
6
7
8
9
10
11
12
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

SPA(단일 페이지 애플리케이션)의 경우 Vue 라우터를 포함해야 합니다. SPA를 생성하라는 메시지가 표시되면 긍정적으로 응답합니다.

옵션에 대해 확신이 서지 않는다면 일단 엔터키를 눌러 No를 선택하면 됩니다.

프로젝트가 생성되면 지침에 따라 종속 패키지를 설치하고 개발 서버를 시작합니다.

1
2
3
cd <your-project-name>
npm install
npm run dev

Single-Page Application(SPA) 폴더 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
my-vue-app/
|-- public/
|   |-- index.html
|
|-- src/
|   |-- assets/
|   |   |-- logo.png
|
|   |-- components/
|   |   |-- HelloWorld.vue
|
|   |-- views/
|   |   |-- Home.vue
|   |   |-- About.vue
|
|   |-- App.vue
|   |-- main.js
|
|-- .gitignore
|-- babel.config.js
|-- package.json
|-- README.md
|-- vue.config.js

일반적인 Vue SPA 구조에는 다음이 포함됩니다.

  • public/: 웹 서버에서 직접 제공하는 index.html 및 기타 assets을 포함합니다.
  • src/: assets, components, views, router, App.vue 및 main.js를 포함하여 Vue 애플리케이션의 소스 코드를 보유합니다.
  • assets/: 이미지 및 글꼴과 같은 정적 리소스를 포함합니다.
  • components/: 재사용 가능한 Vue 컴포넌트를 포함합니다.
  • views/: 다양한 views 나 pages를 나타내는 다양한 컴포넌트가 포함되어 있습니다.
  • router/: Vue Router 관련 파일 및 경로 정의를 포함합니다.
  • store/: 상태 관리를 위해 Vuex를 사용하는 경우 이 폴더에는 Vuex 스토어 관련 파일이 저장됩니다.
  • App.vue: 전체 애플리케이션의 루트 Vue 컴포넌트 및 진입점 역할을 합니다.
  • main.js: Vue 앱을 초기화하고, 라우터를 구성하고, 앱을 DOM에 마운트 합니다.

main.js 파일은 애플리케이션을 설정합니다.

1
2
3
4
5
6
7
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

App.vue 파일

1
2
3
4
5
<template>
  <main>
    <h1></h1>
  </main>
</template>

Script

기본 포트를 변경하려면 package.json의 script 태그를 사용자 정의 스크립트로 수정하세요.

1
2
3
"scripts": {
  "dev-local": "vite --port 3000 --host 0.0.0.0"
}

업데이트된 포트에서 애플리케이션을 시작하려면 명령어를 실행하세요.

1
npm run dev-local

MPA(Multi-Page Application)와 SPA(Single Page Application)는 웹 애플리케이션 구축을 위한 두 가지 서로 다른 아키텍처 접근 방식입니다. 주요 차이점은 콘텐츠 탐색 및 렌더링을 처리하는 방법에 있습니다.

MPA

  • MPA에서 각 페이지는 일반적으로 별도의 HTML 파일에 해당합니다.
  • 각 링크나 상호 작용이 서버에 대한 요청을 트리거하고 전체 페이지가 대체되므로 페이지 간 탐색에는 전체 페이지 다시 로드가 포함됩니다.
  • 서버는 각 페이지의 HTML을 렌더링 하고 제공하는 일을 담당합니다.

SPA

  • SPA에는 애플리케이션의 진입점 역할을 하는 단일 HTML 파일이 있습니다.
  • 애플리케이션 내 탐색은 일반적으로 Vue Router와 같은 클라이언트 측 라우터를 사용하여 JavaScript로 처리됩니다.
  • 사용자가 애플리케이션과 상호 작용할 때 필요한 구성 요소만 DOM 안팎으로 동적으로 로드되고 교체됩니다.

Performance

MPA

  • 전체 페이지를 다시 로드하면 특히 콘텐츠가 많은 페이지에서 성능이 느려질 수 있습니다.
  • CSS 및 JavaScript와 같은 리소스는 각 페이지 요청마다 새로 로드됩니다.

SPA

  • SPA는 필요한 데이터만 서버에서 가져오고 전체 페이지를 다시 로드하지 않고도 페이지 전환이 더 원활해지기 때문에 더 빠르고 원활한 사용자 환경을 제공할 수 있습니다.
  • 초기 페이지와 자산이 로드되면 후속 상호 작용에 추가 서버 요청이 필요하지 않으므로 사용자 경험이 더 빨라질 수 있습니다.
Share