[Vue JS] 기초 01. 기본 구조

vue create 명령어를 통해 프로젝트를 생성하게 되면 기본 구조를 가진 프로젝트가 생성이 되는데요.

기존까지 사용해왔던 html, javascript 등과는 좀 다른 구조를 가지고 있어서 간단히 정리 해볼까 합니다.

저도 이제 막 시작을 한 참이라 모르는 부분이 많으니 잘못된 부분이나 애매한 부분이 있다면 말씀해주세요.

 

vscode 등으로 프로젝트를 생성한 후 같이 보면 좀 더 이해하기 쉬울 것 같네요.

 

우선 아무것도 건드리지 않았을 때의 기본 구조는

이렇게 되어 있는데요.

익숙한 파일들도 보이고 vue확장자를 가진 파일이 보이네요.

index.html 의 구조를 간단히 보니 내용이 보여질 div 태그 와 vue 를 지원하지 않을 경우에 메시지를 표시할 영역으로 되어 있는 것으로 보이네요.

 

일단 대충 보면 알 수 있는 것들은 넘어가기로 하죠.

 

1. main.js

App.vue를 불러오는 페이지 입니다.

import 를 통해 파일 등을 불러오고

createApp 함수를 통해 App.vue 를 index의 <div id="app"></div>안에 뿌려주는 간단한 역할을 하게 됩니다.

 

2. App.vue

이 파일이 실제로 작동하게 되는 페이지라고 보면 될 것 같네요.

사용자가 만든 vue 파일이나 스타일 등을 지정할 수 있고 어떠한 형식으로 뿌릴지도 지정할 수 있습니다.

우선 vue 파일의 기본 구조는

<template>

</template>

<script>

</script>

<style>

</style>

이 정도만 기본적으로 쓰이는데요.

<template> 부분에 html 태그들이 들어가게 되는데, 이게 이름만 같을 뿐 vue 에서 작동을 하는 하나의 툴이라고 봐야 될 것 같습니다.

html과는 다른 형태로 태그 내 인자나 내용들을 변경할 수도 있고 변수 등을 이용하거나 조건문 등도 이용이 가능합니다.

<HelloWorld msg="Welcome to Your Vue.js App"/>

이 부분은 HelloWorld 컴포넌트에 msg변수로 Welcome~ 이 부분을 넘기는 거고 HelloWorld.vue 파일에서 받아서 내용을 뿌려주게 됩니다.

php 로 따지면 GET 이나 POST 정도의 역할을 하는 걸로 보이네요.

 

<script>

부분에는 어떤 동작을 할지를 지정할 수 있는데요

App.vue 의 경우에는 다른 vue 파일에서 지정을 해둔 것들을 불러오게끔만 되어 있는데 여기서도 여러가지 일을 할 수 있지만, 구조화라던가 모듈화 하기 편하도록 다른 파일에서 불러오는 것 같네요.

export default{} 이 부분이 어떤 것들을 할지에 대한 내용인데 기본에서는 딱히 하는 기능은 없고 HelloWorld.vue 를 불러오는 게 전부입니다.

 

3. HelloWorld.vue

여기도 App.vue와 마찬가지의 구조를 가지고 있는데요

<template> 태그 안에 보면 {{ }} 로 감싸진 게 보일 텐데 안에 있는 것은 변수명이고 이 변수의 경우 위에서도 말했지만 App.vue에서 넘어온 값을 출력하게 됩니다.