[Vue 3] 간단한 Vue App 시작하기

Vue 프로젝트 폴더 살펴보기

create-vue를 통해 프로젝트를 생성하면 다음과 같이 파일들이 나타납니다.

.vscode : Visual Studio에서 이 프로젝트에서만 적용하고자 하는 설정들이 들어있습니다.

public: vite가 관리하지 않는 정적 리소스가 들어있습니다.

components: 컴포넌트 파일이 모여있는 폴더

App.vue: 최상위 컴포넌트

main.js: 가장 먼저 실행되는 javascript 파일

.gitignore: 깃에서 제외되길 바라는 파일들을 설정하는 파일

index.html: 앱이 실행될 때 나타나는 html입니다. 여기서 main.js를 불러옵니다.

package.json: 필요한 패키지, 디펜던시, 프로젝트 이름, 버전 등에 대한 정보가 들어있습니다.

README.md: 프로젝트에 대한 정보를 기록하는, 메모장 같은 마크다운 파일입니다

vite.config.js: vite에 대한 설정이 들어있습니다.

이번 글의 목적은 Vue 앱이 어떻게 만들어지는 지 알기 위함이니 관련된 것들 위주로 먼저 보겠습니다.

index.html

index.html 파일을 보면 이 파일 id가 app인 태그와 그 밑에 main.js를 불러오는 script가 있는 것을 보실 수 있습니다. 이 두 줄로 Vue app을 만들어집니다.

html

index.html

      <!-- ... -->
<body>
	<div id="app"></div>
	<script type="module" src="/src/main.js"></script>
</body>

main.js

그렇다면 main.js는 어떻게 들어있는지 볼까요?

javascript

main.js

      import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

여기서 주목할 것들은 createApp과 App입니다.

createApp

Vue app을 생성합니다.

최상단의 컴포넌트인 App과 id가 app인 태그를 연결(마운트)합니다.

App

.vue 확장자를 가진 파일에서 불러온 컴포넌트

최상단 컴포넌트

계속 컴포넌트가 나타나는데요. 이게 무엇일까요?

컴포넌트

우선 컴포넌트가 어떻게 구성되어있는지 App.vue의 파일을 살펴보겠습니다.

vue

App.vue

      <script setup>
	...
</script>

<template>
	...
</template>

<style scoped>
	...
</style>

1. script 태그 (Javascript)

2. template 태그 (HTML)

3. style 태그 (CSS)

컴포넌트는 사이트에서 구성할 한 단위를 HTML, CSS, Javascript로 묶어서 관리할 수 있게 해줍니다. Javascript의 클래스와 같은 역할처럼 한 번 만들어놓은 이 컴포넌튼는 인스턴스를 생성해서 여러 번 재사용 가능합니다.

이해를 돕기위해 아래와 같은 구조로 컴포넌트를 만들어서 사이트를 구현해보겠습니다.

컴포넌트의 계층 구조

먼저 App.vue는 다음과 같이 변경하겠습니다.

vue

src/App.vue

      <template>
  <Header />
  <Main />
  <Sidebar />
</template>

<script>
import Header from "./components/Header.vue";
import Main from "./components/Main.vue";
import Sidebar from "./components/Sidebar.vue";

export default {
  components: { Header, Main, Sidebar },
};
</script>

script에서 component 폴더에 있는 Header, Main, Sidebar를 import한 뒤 components에 객체들을 넣어서 등록합니다.

그러면 template에서 태그처럼 사용할 수 있습니다.

      template은 항상 있어야하지만 script나 style을 쓰지 않는 경우 없애도 됩니다.

Header, Main, Sidebar 의 내부를 각각 보겠습니다.

vue

src/components/Header.vue

      <template>
  <header></header>
</template>

vue

src/components/Main.vue

      <script setup>
import Article from "./main/Article.vue";
</script>

<template>
  <main>
    <Article></Article>
    <Article></Article>
    <Article></Article>
    <Article></Article>
  </main>
</template>

Article로 만들었던 인스턴스를 여러 번 사용할 수 있습니다.

vue

src/components/Sidebar.vue

      <template>
  <aside></aside>
</template>

vue

src/component/main/Article.vue

      <template>
  <article></article>
</template>

개발 서버 실행해보기

프로젝트 폴더에서 command line에 npm run dev를 실행해보세요.

개발 서버가 돌고 있습니다. http://127.0.0.1:5173/ 에 접속해보면 아무것도 보이지 않을 겁니다. 하지만 개발자도구에서 실제로 태그가 어떻게 나타났는지 보면 이해가 될겁니다.

개발자도구 여는 법

그러면 다음과 같이 구성되어있습니다!

Vue App이 실제로 HTML 코드 만든 모습

이전에는 <div id=”app”></div>와 <script> 만 있었는데 안에 저희가 추가했던 컴포넌트들이 구조에 맞게 합쳐져서 태그들로 나타나 있습니다! 이렇게 내부적인 기능, 스타일, HTML 구조를 컴포넌트라는 단위로 나뉘어서 사용할 수 있습니다.

앱 마운트하기

앱을 만들었지만 사실 마운트하기 전까진 아무것도 렌더링하지 않습니다.

      여기서 렌더링은 간단하게 HTML 코드로 바꿔준다고 생각해주세요!

그래서 mount 함수를 사용하는데요! 함수에 DOM이나 선택자를 전달해주면 해당 태그 안에 컴포넌트 내용을 렌더링해줍니다!

javascript

      // 컴포넌트 앱을 마운트 합니다.
createApp(App).mount("#app")

html

      <div id="app">
	<!-- 이 안에 렌더링 됩니다. -->
</div>

이 mount 함수는 다른 라이브러리를 불러오거나 특정 설정 등을 다하고 마지막에 넣어주어야합니다!

javascript

      // 컴포넌트 앱을 생성
const app = createApp(App)

// 앱 설정을 합니다.
app.config.errorHandler = (err) => {
	// Error Handling!
};

// 글로벌 컴포넌트 등록
app.component("TodoButton", TodoDeleteButton);

// 앱 마운트!
app.mount("#app")

이에 대한 자세한 내용은 추후 다뤄보도록 하겠습니다.

앱을 여러 개 만들기

프로젝트가 점점 커지면 하나의 App으로 관리하는 것보다 작은 여러 개의 앱으로 관리하는 게 효율적일 수 있는데요. createApp을 여러 개 사용하시면 됩니다!

javascript

      const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

CDN에서 앱 만들기

Vue는 CDN을 통해 실행하는 방법도 있습니다. createApp 함수를 잘 보시면 약간 다른 점이 있습니다!

html

      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
	<p> 테스트 </p>
</div>

<script>
  const { createApp } = Vue

  createApp({}).mount('#app')
</script>

1. #app 태그 안에 이미 HTML 코드가 들어있다.

2. createApp 함수에 객체가 전달되고 있다.

이전에는 .vue 파일로 컴포넌트를 전달해서 넣었지만, 위처럼 객체를 전달하는 방법도 있습니다.

컴포넌트에 HTML 코드를 넣어서 사용하고 싶다면 template 속성을 사용하면 됩니다.

vue

src/components/App.vue

      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app"></div>

<script>
  const { createApp } = Vue

  createApp({
		template: "<p> 테스트 </p>"
	}).mount('#app')
</script>

그리고 HTML 코드에 넣는 것 대신 template 키를 넣는 방식으로 HTML 코드를 구현할 수 있습니다.

마무리하며

이번 시간에는 App을 생성하고 컴포넌트들을 활용하는 방법에 대해 알아보았습니다. 다음부터는 본격적으로 컴포넌트를 활용해서 DOM을 렌더링하는 방법들에 대해 다뤄보겠습니다.