Vue란?

웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크

공식문서: https://ko.vuejs.org/

Vue의 핵심 기능

선언적 렌더링(Declarative Rendering): Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있습니다.

반응성(Reactivity): Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.

vue의 특징

쉬운 학습 곡선 : Vue는 간단하고 직관적인 문법을 가지고 있으며, HTML과 JavaScript를 섞어 사용하는 컴포넌트 기반 아키텍처를 지원.

유연성 : Vue는 컴포넌트 단위로 작업할 때 React보다 더 많은 구조와 가이드라인을 제공, 이는 프로젝트의 유지 보수와 협업을 용이.

단일 파일 컴포넌트 (SFC) : Vue는 .vue 확장자를 가진 단일 파일 컴포넌트를 지원하며, 이를 통해 HTML 템플릿, JavaScript, CSS를 하나의 파일에 정의할 수 있다. 이는 코드의 가독성을 향상시키고, 컴포넌트 관리를 단순화한다.

2-way 데이터 바인딩 : Vue는 양방향 데이터 바인딩을 지원하여 데이터의 변경이 자동으로 화면에 반영한다. 이는 사용자 경험을 향상시키고 코드 작성을 간편화시킨다.

튜토리얼

공식 문서의 소개에서 튜토리얼을 통해 학습할 수 있다.
https://ko.vuejs.org/tutorial/#step-1

예시: 속성 바인딩

Vue에서 이중 중괄호는 텍스트 삽입에만 사용된다.
속성을 동적 값에 바인딩하려면 v-bind 디렉티브를 사용한다:

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">나를 빨갛게 만들어 보세요</h1>
</template>

<style>
.title {
  color: red;
}
</style>

속성 바인딩을 비롯하여 이벤트 리스너, 조건부 등은 디렉티브 문법을 따른다.

디렉티브 문법은 여기 공식문서에서 더 자세히 볼 수 있다.
간단하게 말하자면 괄호의 속성을 v-bind, v-html 등의 속성을 두어 결정한다.

다른 예시:

<button v-on:click="increment">{{ count }}</button>

<h1 v-if="awesome">Vue는 굉장해! 엄청나!</h1>

왜 vue를 쓸까?

위 예시처럼 코드가 직관적이고 간단한 편이며, 배우기에도 진입장벽이 낮은 편이라고 한다.
코드가 간단한 편이라면 개발과 페이지 속도가 더 빠를 수밖에 없다.

카카오같은 큰 기업에서도 vue를 쓴다고 하니 React만 배워본 사람으로써 다음에 vue를 이용하여 웹앱을 만들어보려고 한다.