728x90
반응형
Vue.js 애플리케이션의 기본 구조는 package.json, index.html, main.js, App.vue 파일들로 구성되어 있으며, 이 파일들은 서로 유기적으로 연관되어 애플리케이션을 구동하는 중요한 역할을 합니다. 각 파일을 자세하게 설명하고, 이들이 어떻게 연결되어 있는지 설명하겠습니다.
package.json
- 뷰 애플리케이션에서 가장 중심이 되는 파일은 package.json입니다.
- package.json 파일은 뷰 애플리케이션에서 사용하는 기본 정보, 의존성 모듈 정보, 스크립트 명령어 정보 등을 담고 있습니다.
{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"vite": "^5.4.8"
}
}
- name : 뷰 애플리케이션의 이름을 나타내는 문자열입니다. 해당 애플리케이션을 명확히 구분할 수 있도록 직관적인 이름으로 작성하는 것이 좋습니다.
- version : 뷰 애플리케이션의 버전을 나타내는 문자열입니다. 여기서 "....."은 [major].[minor].[patch] 버전을 의미합니다. major는 하위 호환성이 없는 변경 사항이 있을 때 증가합니다. minor는 하위 호환성이 있는 기능을 추가하거나 변경 사항이 있을 때 증가합니다. patch는 버그나 작은 수정 사항이 있을 때 증가합니다.
- private : 뷰 애플리케이션의 공개 여부를 의미하는 논리형 값입니다. true면 비공개라는 의미로, 해당 애플리케이션은 외부에 공개되지 않습니다. 여기서 외부에 공개되지 않는다는 것은 npm 레지스트리와 같은 공개 저장소에 배포하지 않는다는 뜻입니다. 공익 목적의 프로젝트가 아니라면 대부분 true로 지정합니다.
- scripts : 뷰 애플리케이션을 빌드하거나 실행할 수 있는 명령어를 등록하는 부분입니다. 값은 객체 형태로 작성하며, 예를 들어, npm run serve는 개발 서버를 실행하는 명령어입니다.
- dependencies : 뷰 애플리케이션을 실행할 때 필요한 의존성 모듈을 정의하는 부분입니다. 여기에 정의한 모듈은 프로덕션(production, 애플리케이션을 배포하고 서비스하는 단계) 환경에서도 사용됩니다. 여기에는 Vue.js, Vue Router, Vuex 같은 Vue 관련 라이브러리가 포함됩니다.
- devDependencies : 뷰 애플리케이션을 개발할 때 필요한 의존성 모듈을 정의하는 부분입니다. 여기에 등록한 모듈은 개발(development, 애플리케이션을 개발하는 단계) 환경에서만 필요합니다.
index.html
- npm run dev 명령어를 입력하면 개발 서버가 구동됩니다.
- 개발 서버가 구동되면 가장 먼저 index.html 파일을 서버에 로드(load)합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- <html lang="en">
- 뷰 애플리케이션에서 HTML 파일의 기본 언어 설정은 영어(en)입니다. 한글을 사용하는 우리 입장에서는 "en" 대신에 "ko"로 변경하는 것이 좋습니다.
- <div id="app"></div>
- 뷰 애플리케이션은 id 속성의 값이 "app"인 HTML 요소를 루트(root) 요소로 지정합니다. 이 부분의 id 속성 값을 "app"으로 지정하는 것이 관례이긴 하나 다른 값으로 지정해도 상관없습니다.
- 또한, Vue 인스턴스가 이곳에 마운트되며, Vue 컴포넌트들이 렌더링됩니다. main.js 파일에서 Vue 애플리케이션을 이 요소에 연결합니다.
- <script type="module" src="/src/main.js"></script>
- 뷰 애플리케이션의 핵심인 main.js 모듈을 불러오는 부분입니다. 이 부분에서 main.js 파일에 작성된 코드를 불러오고 이때부터 뷰 애플리케이션에서 사용할 패키지와 코드가 실행됩니다.
main.js
- index.html 파일에서 main.js 파일을 불러오면 뷰 애플리케이션의 코드가 실행됩니다.
- main.js 파일은 뷰 애플리케이션을 초기화하고 구성하는 역할을 하는 파일입니다.
import '.assets/main.css'
import {createApp} from 'vue'
import App from '.App.vue'
createApp(App).mount('#app')
- import '.assets/main.css'
- main.css 파일을 불러와서 컴포넌트에 스타일을 적용합니다.
- import {createApp} from 'vue'
- vue 패키지에서 함수를 가져옵니다. 모든 뷰 애플리케이션은 하나의 인스턴스를 가지는데, createApp() 함수가 뷰 애플리케이션의 인스턴스를 생성하는 역할을 합니다.
- import App from '.App.vue'
- App.vue 파일을 불러옵니다. 이 파일이 루트(root) 컴포넌트가 됩니다.
- createApp(App).mount('#app')
- createApp() 함수로 뷰 애플리케이션의 인스턴스를 생성합니다. 이때 매개변수로 App.vue 파일을 전달하는데, 전달한 파일이 초기 루트 컴포넌트가 됩니다. 루트 컴포넌트는 mount() 함수에 의해 id 속성의 값이 app인 요소에 추가됩니다.
App.vue
- App.vue 파일처럼 확장자가 vue인 파일을 뷰에서는 SFC(Single File Component), 다른 말로는 컴포넌트(component)라고 합니다.
- 뷰 애플리케이션은 이런 컴포넌트를 여러 개 생성하면서 애플리케이션을 만듭니다.
- App.vue 파일은 뷰 애플리케이션에서 루트 컴포넌트의 역할을 합니다. 루트 컴포넌트란 컴포넌트 중에서도 뷰 애플리케이션이 최초로 진입하는, 가장 상위에 있는 컴포넌트입니다.
- 뷰는 루트 컴포넌트를 기준으로 트리 구조처럼 하위 컴포넌트가 뻗어나가는 형태로 구현됩니다.
<template>
<div id="app">
<h1>Welcome to Vue.js</h1>
<HelloWorld msg="Hello from Vue!"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
</style>
- <template>
- HTML 마크업을 정의하는 부분입니다. 이곳에 다른 컴포넌트를 배치하거나 Vue 템플릿 문법을 사용해 UI를 구성할 수 있습니다.
- <script>
- 컴포넌트의 로직을 정의하는 부분입니다. 데이터, 메서드, 라이프사이클 훅 등을 설정합니다.
- <style>
- 컴포넌트의 스타일을 정의하는 부분입니다. 로컬 컴포넌트 스타일을 적용할 수 있으며, scoped 속성을 통해 해당 컴포넌트에만 국한된 스타일을 적용할 수 있습니다.
728x90
반응형
'Front' 카테고리의 다른 글
| Vue 이벤트 다루기 (4) | 2024.10.15 |
|---|---|
| 뷰 애플리케이션의 실행 과정 (2) | 2024.10.14 |
| CDN vs NPM (1) | 2024.10.14 |
| Vue란?? (1) | 2024.10.14 |
| Content, Padding, Border, Margin (0) | 2024.08.24 |