1. Vue - 친해지기

1. Vue에 대해 알아보자. 

- 앞으로 더욱 자세히 알아보겠지만, 이번 포스팅에서는 간단하게 Vue를 이해하기 위해 필요한 기본적인 개념을 살펴보자. 

 

a) Vetur 설치

• 지난 포스팅에서 생성한 vue 프로젝트를 열어보면 src 폴더안에 App.vue가 있다. 
• 처음 열어보면 코드가 구분되지 않고 text 형태로 아무런 색상이 없다. 
• VSCode를 기준으로 Vetur라는 extension을 설치해주면 아래와 같이 코드에 색이 입혀진다. 

 

b) Vue의 기본구조

• App.vue 파일을 살펴보면 vue는 template, script, style 3가지 구성요소를 갖는다. 
• Template은 HTML을 담당한다.
• Script는 자바스크립트를 담당한다. 
• Style은 CSS를 담당한다. 
• 이처럼, vue 프레임워크는 하나의 화면에 필요한 HTML, CSS, JS를 하나의 파일로 묶어서 관리할 수 있도록 해준다.
• 그러므로, 하나의 vue 파일은 한개의 화면(view)을 구성하는 것이다. 
• 이와 같은 이유로, Vue 프레임워크는 SPA 개발을 쉽게 만들 수 있도록 한다는 특징을 갖는다.   

 

C) Vue가 동작하는 방법

• public 폴더에 있는 index.html 파일을 실행시켜준다.
• 여기서 가장 중요한 부분은 위에 빨간 네모가 있는 부분의 코드이다.
• 해당 app이라는 id 속성값을 갖고있는 div 안에 개발자가 작성한 vue가 출력되는 것이다. 
• 그러므로 index.html이 프로젝트의 기본적인 틀이라고 생각하면 된다. 
• 앞서 말했듯이, 이러한 Vue 프레임워크의 구조로 인해 SPA 개발을 더욱 쉽게 만들어 준다는 특징을 갖는다.