[Vue.js] 뷰 프레임워크 기본개념 및 환경설정

프런트엔드 프레임워크 중 하나인 Vue.js에 대해 알아보겠습니다.

---

 

1. Vue.js란?

- 뷰는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크입니다.

- 언어는 HTML, CSS, Javascript로 이루어져 있습니다.

- 뷰는 다른 프레임워크들에 비해 성능이 우수하고, 가볍고 빠릅니다.

 

 

2. 컴포넌트 기반의 프레임워크

- 뷰의 가장 큰 특징은 컴포넌트(Component) 기반의 프레임워크라는 것입니다.

- 컴포넌트는 마지 블록과 같아서 이를 조합하여 화면을 만들 수 있습니다.

- 컴포넌트 기반 방식을 이용하면 코드를 재사용하기 쉽고, 화면 구조를 직관적으로 파악할 수 있습니다.

 

 

3. 개발 환경 설정

- 크롬 브라우저

- Visual Studio Code

- Node.js

- 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인)

 

 

3-1. Visual Studio Code 다운로드

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

3-2. Node.js 다운로드

https://nodejs.org/ko/download/

다운로드 | Node.js

 

 

3-3. Vue.js devtools 설치

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

 

 

4. Visual Studio Code EXTENSIONS

- 개발을 수월하게 하기 위해 확장 프로그램을 설치합니다.

- 제가 설치한 EXTENSIONS는 Auto Close Tag, Auto Rename Tag, Bracket Pair Colorizer, CSS Peek, ESLint, HTML CSS Support, IntelliJ IDEA Keybindings, Live Server, Material Icon Theme, Prettier-Code formatter입니다.

 

 

 

 

이상으로 Vue.js 기본개념 및 환경설정에 대해 알아보았습니다.

 

---