Vue — 점진적 자바스크립트 프레임워크

기술 카탈로그 / vue.html

화면을 컴포넌트 단위로 만들고 필요할 때만 기능을 붙여 나가는 프레임워크입니다. 진입 장벽이 낮아 처음 프레임워크를 배울 때 자주 선택됩니다.

💬 Vue는 화면을 작은 컴포넌트로 나눠 조립하는 도구입니다.

HTML 안에 조금씩 기능을 얹는 방식부터, 규모가 커지면 전체 앱을 구성하는 방식까지 같은 도구로 확장할 수 있습니다. 공식 문서의 첫 장(Introduction)을 먼저 읽으면 개념이 잡힙니다.

• 컴포넌트: 화면 조각을 하나의 파일(.vue)로 묶어 재사용합니다.
• 반응성(reactive): 데이터가 바뀌면 화면이 자동으로 갱신됩니다.
• SFC: template(화면) · script(로직) · style(스타일)을 한 파일에 담습니다.

시작하기

# Node.js 20+ 필요
npm create vue@latest my-app
cd my-app
npm install
npm run dev      # http://localhost:5173

가장 작은 컴포넌트

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

자주 겪는 문제

• npm create vue 가 안 될 때: Node 버전이 낮으면 실패합니다. node -v로 20 이상인지 확인하세요.
• 반응성이 안 되는 값: ref를 쓴 값은 .value로 접근해야 합니다(템플릿에서는 자동).

검증일은 자료의 최신성을 나타냅니다. 오래된 자료는 적용 조건을 확인하세요.