[Vue.js] Vue.js란?

1. SPA란?

 

• Single Page Application
• 하나의 페이지로 구성된 웹 애플리케이션

 

웹 페이지에서 하는 일이 많아지면서 웹 페이지를 더 빠르게 로딩하기 위해 등장한 기술이다.

 

SPA는 한 번 웹 페이지를 로드한 후, 사용자와 상호작용하면서 동적으로 페이지를 업데이트.

 

전체 페이지를 다시 로드하지 않고 필요한 부분만 로드한다.

 

서버로부터 네트워크 트래픽을 줄이고, 사용자 경험을 향상한다.

 

---

2. CSR란?

 

• Client Side Rendering
• 클라이언트 측 렌더링
• CSR은 사용자의 브라우저에서 JavaScript를 사용하여 웹 페이지를 직접 렌더링 하는 방식이다.
• 사용자가 요청하면, 서버는 HTML 파일과 JavaScript 파일을 먼저 보내고, 이후 JavaScript가 페이지를 렌더링 한다.

 

• 장점
  • 사용자가 웹 페이지와 상호작용할 때마다 전체 페이지를 다시 로드할 필요가 없다.
  • 서버의 부하가 줄어든다.
• 단점
  • 초기 로딩 시간이 길어진다.
  • JavaScript가 비활성화된 환경에서는 웹 페이지가 제대로 동작하지 않을 수 있다.
  • SEO(검색 엔진 최적화) 문제.

 

---

3. Vue.js란?

 

Vue.js

 

Vue.js는 Evan You가 2014년에 만든 자바스크립트 프레임워크다.

 

Google에서 일하면서 사용한 AngularJS가 너무 복잡하다고 생각해 더 가볍고, 유연한 툴을 필요성을 느끼고 Vue.js를 만들었다.

 

---

가. 특징

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

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

위의 예는 Vue의 두 가지 핵심 기능을 보여준다.

 

• 선언적 렌더링 (Declarative Rendering)
  : Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성.
• 반응형 (Reactivity)
  : Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행.

 

클라이언트의 DOM을 효율적으로 관리할 수 있다.

 

---

나. API 스타일

 

Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있다.

 

• 옵션 API:

<!-- Options API -->
<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어
  // `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 헨들러로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의
  // 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의한다.

 

옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this로 접근된다.

 

• 컴포지션 API:

<!-- Composition API -->
<script setup>
import { ref, onMounted } from 'vue'

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

import해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의한다.

 

사실, 옵션 API는 컴포지션 API 위에 구현된다.

 

Vue에 대한 기본 개념과 지식은 두 스타일과 상관없이 동일하다.

 

권장사항	상황
옵션 API	빌드 도구를 사용하지 않거나 Vue를 주로 복잡성이 낮은 시나리오에서 사용할 계획
컴포지션 API + 단일파일 컴포넌트(SFC) 사용	Vue로 규모가 있는 앱의 전체를 구축하려는 경우

 

---