1 minute read

vue 이해를 위한 공식 페이지 소개글 번역

Introduction

What is Vue?

Vue는 사용자 인터페이스 구축을 위한 JavaScript Framework 입니다. 이것은 표준 HTML, CSS, JavaScript 위에 만들어졌고, 간단하거나 복잡한 사용자 인터페이스의 효율적인 개발을 도와주는 선언형(declarative) & 컴포넌트 기반 프로그래밍 모델을 제공합니다.

간단한 예시:

import { createApp } from 'vue'

createapp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
<div id="app">
  <button @click="count++">
    Count is: 8
  </button>
</div>

위의 예시는 Vue의 두가지 핵심 기능을 설명합니다.

  • 선언적 렌더링(Declarative Rendering): Vue는 JavaScript 상태를 기반한 선언적으로 표현된 HTML 결과를 사용할 수 있는 template 문법을 가진 표준 HTML을 확장합니다.
  • 반응성(Reactivity): Vue는 자동으로 JavaScript 상태 변화를 추적하고 변화가 발생할 때 효율적으로 DOM을 갱신합니다.

당신들은 많은 질문이 있겠지만 걱정하지 마세요. 우리는 나머지 문서에서 모든 사소한 세부사항을 커버할 것입니다. 지금은 Vue가 무엇을 제공하는지를 높은 수준으로 이해할 수 있도록 함께 읽어봅시다.

Prerequisites

나머지 문서는 HTML, CSS, JavaScript와의 기초 친밀감을 추정합니다. 만약 진짜 프론트엔드 개발이 처음이라면, 첫 스텝을 프레임워크로 하는 것은 좋은 생각은 아닐 수 있습니다 - 기초를 파악하고 다시 와라! 당신들은 당신들의 지식 수준을 JavaScript overview에서 체크할 수 있습니다. 다른 프레인워크의 경험은 도움이 되지만 필수는 아닙니다.

The Progressive Framework

Vue는 프레임워크이고 프론트엔드 개발에 필요한 공통의 특징 대부분을 커버하는 환경(ecosystem) 입니다. 그러나 웹은 엄청 다양합니다 - 우리가 웹에 빌드하는 것은 형태와 크기에서 크게(drastically) 변화할지도 모릅니다. 그것을 염두에 두고, Vue는 유연하고 점진적으로 채택하도록 디자인 됩니다. 여러분의 사용 사례에 의존하여 Vue는 다른 방식으로 사용될 수 있습니다.

  • 빌드 스텝 없이 정적 HTML 강화
  • 어떤 페이지던 웹 컴포넌트로 포함
  • SPA
  • 풀스택 / 서버측 렌더링(SSR, Server-Side Rendering)
  • 잼스택(Jamstack) / 정적 페이지 생성(SSG, Static Site Generation)
  • 데스크탑, 모바일, WebGL, 그리고 터미널까지 타겟팅

Single-File Components

API Styles

Still Got Questions?

Pick Your Learning Path

참고 사이트

Vuejs.org

Categories:

Updated: