Vue의 기본 문법

졸업과제를 진행하기 위해, Vue의 기본 문법부터 익혀보자.
모든 과정은 Vue.js 공식 가이드를 토대로 진행되며, 공부 순서 또한 동일하게 진행한다.

Vue의 MVVM Pattern

Vue는 기본적으로, MVVM 이라는 패턴을 사용하고 있다.
이는 Model - View - View Model의 약자로, 실제 App 로직과 UI를 분리하는 패턴이다.
서버 측의 MVC 패턴과 굉장히 유사한 역할을 한다고 볼 수 있다.

• View : 실제로 사용자에게 렌더링되는 DOM
  • Model에서 정의한 data를 이중 괄호를 통해 접근할 수 있다.
• View-Model : Model과 View를 이어주는 인스턴스
  • 위에 언급했던 createApp()을 통해 만들어진 인스턴스를 의미한다.
• Model : 실질적으로 데이터와 로직이 저장되는 Javascript 객체

Vue의 기본 폴더 구조

기본적으로 Vue에서는 어떤 폴더 구조를 사용하는 지 짚고 넘어가자.
현재 내가 생성해놓은 vue 폴더의 구조는 아래와 같다.
물론 폴더 명과 구조를 구성하는 것은 자유이지만,
대부분 아래와 같은 구조를 기본으로 구성한다.

• assets
  • 로고, 이미지 등의 정적 파일을 보관하는 폴더이다.
• components
  • views와 동일하게 컴포넌트(.vue)를 보관하는 폴더이다.
  • views와 다른점은 재사용 가능한 부분 컴포넌트들을 모아놓는다는 점이다.
• router
  • index.js 파일을 보관하는 폴더이다.
  • 해당 js 파일은 경로 설정을 가능하게 해주는 router 파일이다.
• views
  • components와 동일하게 컴포넌트(.vue)를 보관하는 폴더이다.
  • 재사용 가능한 컴포넌트가 아닌, 화면 전체를 의미한다.
• style
  • CSS 파일을 따로 유지하기 위해 만든 폴더이다.
  • 보통은 assets에 CSS 파일을 같이 유지한다고 한다.
    • 하지만 나는 style 폴더를 따로 생성해서 보관하고 유지할 예정이다.

Vue 기본 구조

.vue file 하나는 기본적으로 template, script, style 태그로 구성된다.

<template>
  // 실제 화면 HTML Code
</template>
<script>
</script>
<style>
</style>

App instance

모든 Vue 앱은 createApp 함수를 통해 새 인스턴스를 생성함으로써 시작한다.
아래의 예시를 보도록 하자.

import {createApp} from 'vue'

const app = createApp({App})
app.mount("#app")

실제로 임시로 만들어 둔 Vue Project의 구조를 살펴보면,
기본적으로 App.vue와 main.js가 존재함을 알 수 있다.

이 때 App.vue는 기본적으로 모든 컴포넌트의 최상위 컴포넌트 이다.
실제 앱은 대부분, App.vue를 루트로 하는 컴포넌트 트리 구조로 구성된다.

우리는 createApp() 함수를 통해서 새 인스턴스를 생성할 수 있는데,
이 때 매개변수로 넘어가는 것은 __컴포넌트__이다.
위의 예시는 최상위 컴포넌트인 App을 넘김으로써, App.vue를 실행한다.

또한, 실제로 렌더링을 시키기 위해서는 app.mount() 메서드가 호출되어야 한다.
기본적으로 app.mount()가 호출되기 전까지, Vue는 아무것도 렌더링하지 않는다.

App configuration

Vue에는 기본적으로 App을 설정할 수 있는 .config 객체가 존재한다.
app.config로 접근이 가능하며, 전역 값을 설정하거나 에러 핸들링 등이 가능하다.

app.config.errorHandler = (err) => {};
app.config.warnHandler = (warn) => {};

app.config.globalProperties.code = "1234567";

globalProperties 를 통해 전역 변수 또한 설정할 수 있는데,
Springboot에서 application.properties 파일을 작성하는 것과 동일하다고 볼 수 있다.
이는 반드시 mount() 되기 이전에 선언이 되어야 사용할 수 있다.

Data binding

Vue 3은 template에서 script의 data를 binding 받아 사용할 수 있다.
Mustache Expression, 즉 이중 괄호를 통해 binding이 가능하다.

아래와 같이 두 가지 방식으로 data를 선언할 수 있으며,
위에서 언급했던 이중 괄호의 자리로 data가 binding 되게 된다.

그 결과 아래와 같이 출력됨을 확인할 수 있다.

물론, 기본적인 텍스트 뿐만 아니라 표현식 및 함수 호출까지도 가능하며,
아래와 같이 객체의 형태로도 선언해 사용할 수 있다.

Text binding

Vue에는 디렉티브 라는 개념이 존재한다.
v-XXX 로 데이터에 접근하고, for, if 등의 문장을 사용할 수 있는 개념이다.

기본적으로 v-text 디렉티브를 통해 문자열 접근이 가능하다.
위에서 선언했던 data()를 사용해서 텍스트를 아래와 같이 바인딩 할 수 있다.

HTML binding

위와 같이 text만 그냥 쓸 수도 있지만, HTML 태그를 직접 삽입할 수도 있다.
v-html 디렉티브를 통해서 data()에 선언한 HTML 태그를 삽입할 수 있다.

그 결과, 아래와 같이 <h1> 헤드라인 태그가 적용되어 출력됨을 확인할 수 있다.

Model binding

v-model 디렉티브를 통해 사용자의 입력에 대해 제어를 할 수 있다.
사용자의 입력값을 model에서 사용하기 때문에 양방향 데이터 바인딩 이라고 한다.

• 기본적인 input example
  아래와 같이 input 태그 내에 v-model 속성을 걸어, 입력을 받을 수 있다.
  
  

위에서 입력받은 입력 값은, 미리 data()에 선언 해놓은 변수 2개에 저장이 되게 된다.
그 결과로 아래와 같이 span 태그를 통해 출력시킬 수 있음을 알 수 있다.

결과를 보건대, 해당 입력을 받아 서버로 요청을 보낼 때 사용할 수 있을 것 같다.

• selectbox example

사용자가 selectbox(dropdown)에서 선택한 값을 선언한 data()로 저장한다.

data()는 아래와 같이 선언하는데, 배열 변수는 아래의 checkbox 예제에 사용된다.

• checkbox example

사용자가 checkbox에서 선택한 값을 선언한 data()로 저장한다.
단, Checkbox는 다중선택이 가능하기 때문에, 저장할 변수 또한 배열의 형태로 선언한다.

selectbox 예제에서 선언했던 배열을 출력해보면 아래와 같이 결과가 나옴을 볼 수 있다.

Attribute binding

v-bind 디렉티브를 통해 다양한 속성 또한 지정해줄 수 있다.
v-model과 유사하지만, 주로 readonly로 값을 이용해야 하는 경우에 사용한다고 한다.
아래와 같이 data()에 사용할 attribute들을 선언한다.

이후 아래와 같이 HTML 태그 내에서 v-bind를 통해 선언한 attribute들을 적용할 수 있다.
다른 디렉티브들과 다르게, v-bind:src와 같이 디렉티브를 생략하고 :src만 써도 속성 적용이 가능하다.

아래의 사진을 통해 모든 attribute가 잘 적용 되었음을 확인해볼 수 있다.

List binding

v-for 디렉티브를 통해서 반복문처럼 데이터를 순회할 수 있다.
아래와 같이 객체의 배열 형태로 정의된 데이터가 들어온다면?

아래의 코드처럼 v-for를 통해서 해당 데이터를 순회, 접근할 수 있다.

결과가 잘 나옴을 확인할 수 있다.

이런 iteration 기능은 JSON 통신에 매우 적합하다고 생각한다.
서버의 JSON 응답을 가공해서 사용하기에 최적의 기능일 것이다.