Vue.js 최종 수정일 2026-06-19 03:06 조회수 9
홈 대시보드

Vue.js

#it#프론트엔드#javascript#vue#spa#vuejs#frontend

기본 정보

  • 이름: Vue.js
  • 약칭: Vue
  • 분류: JavaScript 프론트엔드 프레임워크
  • 개발자: 에반 유(Evan You)
  • 최초 공개: 2014년
  • 개발 언어: JavaScript, TypeScript
  • 주요 용도: SPA, 관리자 페이지, 웹 애플리케이션 개발
  • 관련 주제: #Vue #Vuejs #JavaScript #Frontend #SPA

개요

Vue.js는 사용자 인터페이스(UI)를 구축하기 위한 오픈소스 JavaScript 프레임워크이다.

간결한 문법과 낮은 진입 장벽으로 빠르게 웹 애플리케이션을 개발할 수 있으며, 컴포넌트(Component) 기반 구조를 사용하여 재사용성과 유지보수성을 높일 수 있다.

특히 관리자 페이지(Admin), ERP, CMS, 대시보드 등에서 많이 활용되며, 점진적(Progressive) 도입이 가능하다는 특징이 있다.

주요 특징

  • 컴포넌트 기반 개발
  • 반응형(Reactivity) 데이터 시스템
  • Virtual DOM 사용
  • 쉬운 문법
  • 양방향 데이터 바인딩 지원
  • SPA 개발에 적합
  • TypeScript 지원

Vue 구조

Browser

↓

Vue App

↓

Component

↓

Virtual DOM

↓

Real DOM

↓

화면 출력

Hello World

<template>

  <h1>Hello Vue</h1>

</template>

Single File Component(SFC)

Vue는 .vue 파일 하나에 HTML, JavaScript, CSS를 함께 작성할 수 있다.

<template>

</template>

<script setup>

</script>

<style>

</style>

Template

화면(UI)을 정의하는 영역이다.

<template>

  <h1>{{ title }}</h1>

</template>

Script

비즈니스 로직을 작성한다.

<script setup>

const title = "Vue.js";

</script>

Style

컴포넌트 전용 스타일을 정의한다.

<style scoped>

h1{

color:red;

}

</style>

scoped를 사용하면 해당 컴포넌트에만 CSS가 적용된다.

반응형 데이터

import { ref } from 'vue'

const count = ref(0)

값이 변경되면 화면도 자동으로 갱신된다.

이벤트 처리

<button

@click="count++"

>

클릭

</button>

조건부 렌더링

<div

v-if="login"

>

로그인 완료

</div>

대표 디렉티브

  • v-if
  • v-else
  • v-show

반복문

<li

v-for="item in list"

:key="item.id"

>

{{ item.name }}

</li>

배열 데이터를 반복 출력할 수 있다.

양방향 바인딩

<input

v-model="name"

/>

입력값과 변수 값이 자동으로 동기화된다.

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다.

defineProps({

name:String

})

사용 예

<User

name="구름"

/>

Emit

자식 컴포넌트가 부모 컴포넌트에 이벤트를 전달한다.

const emit =

defineEmits(

['save']

)

Composition API

Vue 3에서 권장하는 개발 방식이다.

<script setup>

import {

ref

}

from 'vue'

</script>

Router

SPA 화면 이동을 담당한다.

대표 라이브러리

  • Vue Router
createRouter({

routes:[

]

})

상태 관리

대표 라이브러리

  • Pinia
  • Vuex

Vue 3에서는 Pinia 사용이 권장된다.

API 통신

대표 라이브러리

  • Fetch API
  • Axios
axios.get(

"/api/user"

)

프로젝트 구조

src/

├── components/

├── views/

├── router/

├── stores/

├── assets/

├── layouts/

├── composables/

└── App.vue

빌드 도구

대표 도구

  • Vite
  • Vue CLI

현재는 Vite 사용이 일반적이다.

Nuxt

Vue 기반의 풀스택 프레임워크이다.

주요 기능

  • SSR
  • SSG
  • SEO 최적화
  • API 서버
  • 파일 기반 라우팅

주요 활용 분야

  • 관리자 페이지
  • ERP
  • CMS
  • 쇼핑몰
  • SaaS
  • 대시보드
  • 모바일 웹
  • SPA

장점

  • 배우기 쉬움
  • 문법이 직관적
  • 반응형 시스템 제공
  • 컴포넌트 재사용 가능
  • 프로젝트 규모 확장 용이
  • 공식 문서가 우수함

단점

  • React보다 생태계가 작음
  • 대규모 프로젝트에서는 구조 설계가 중요
  • 다양한 개발 방식(Options API, Composition API) 혼재 가능

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • Vue 3 사용
  • Composition API 적용
  • TypeScript 적용
  • Pinia 상태 관리
  • Axios 기반 API 통신
  • Vite 기반 프로젝트 생성
  • Auto Import 활용
  • Lazy Loading 적용
  • ESLint + Prettier 적용
  • Feature 기반 폴더 구조 설계

Vue.js와 함께 사용하는 기술

대표 개발 도구

  • Visual Studio Code
  • Vue DevTools
  • Vite
  • npm
  • pnpm
  • Yarn

관련 문서

출처

  • Vue.js 공식 홈페이지
  • Vue.js 공식 가이드
  • Evan You 발표 자료

백링크

AJAXManifestVercelService WorkerSaaSHTMLJavaScriptCSS프론트엔드PWATypeScriptFetch APISPAUI/UXNode.js