# Vue.js란?

Vue.js는 점진적(Progressive)으로 활용 가능한 Front-End JavaScript 프레임워크입니다. 애플리케이션 제작에 필요한 코어를 제공하며, 필요에 따라 다양한 확장(예: Vue Router, Vuex, Axios 등)을 추가할 수 있습니다.

# 소개 영상

공식 Vue 뉴스 팟캐스트의 호스트인 Gregg Pollack이 Vue.js와 같은 프론트엔드 프레임워크를 사용하는 이유를 소개합니다.

# 소개 글

공식 Vue.js 가이드 소개 내용을 살펴보세요.

# 학습 영역

Front-End 개발의 목표는 클라이언트(Client) 환경의 사용자 인터페이스(UI) 구현입니다. 프레임워크 등장 이전에는 HTML, CSS, JavaScirpt 또는 jQuery 라이브러리를 활용해 사용자 인터페이스를 구현했습니다. 하지만 Vue.js, React, Angular와 같은 프레임워크가 등장한 오늘날은 컴포넌트(Components)를 주축으로 사용자 인터페이스를 구현합니다.

프레임워크를 활용한 컴포넌트 기반 개발 방식은 이전의 Front-End 개발 방식과 달리 요구되는 사전 지식 수준이 높습니다. 기본적으로 모듈, 클래스, 구조 분해 할당 등 ECMAScript 2015+ 활용 능력과 비동기 프로그래밍(예: Promise, Async/Await 등) 지식과 경험이 필요하고, 컴포넌트 간 데이터 공유를 위한 상태 관리(State Management) 시스템에 대한 지식과 활용 능력을 필요로 합니다.

그리고 클라이언트 환경에서 페이지를 렌더링하는 싱글 페이지 애플리케이션(SPA)이 요구될 경우, Front-End 개발 환경에서 라우트(Routes)를 구성하기도 합니다. 물론 멀티 페이지 애플리케이션(MPA)이 요구된다면 Back-End 개발 환경에서 서버 사이드 렌더링(SSR)을 위한 라우트를 구성합니다.

서버 API 개발은 Front-End 개발 영역에서 다루는 범위는 아니지만, 사용자 인터페이스를 통해 API 라우트(Routes) 에 데이터(Model)를 요청하고 응답 받아 UI를 업데이트 할 수 있어야 합니다. 다시 말해 비동기 프로그래밍을 활용하여 서버 API에 요청/응답 받은 데이터를 상태 관리하여 컴포넌트를 업데이트하는 방법을 학습해야 합니다.

# 학습 방법

# vue.js × ES5 (JavaScirpt)

Vue.js는 jQuery, Lodash와 같은 기존 라이브러리 사용자 경험과 유사하게 프로젝트를 시작할 수 있습니다.

• 라이브러리 스크립트 파일 호출
• JavaScirpt(ES5) 활용

---

# Vue CLI × ES6+

만약 Vue.js를 프레임워크로 활용하기 위함이라면? 단순히 JavaScript 파일을 불러오는 것이 아니라, Node.js 기반 빌드 도구인 ️Vue CLI를 사용해 프로젝트를 구성하고 학습을 시작하길 권장합니다.

• 패키지 매니저(예: NPM, Yarn 등) 활용
• ECMAScript 2015+ (ES6+) 활용
• 모듈 번들러(예: Webpack, Rollup 등) 활용