[Vue3] 01_Vue.js

기술 블로그의 첫 공부 내용은 vue.js이다.
HTML과 CSS를 먼저 올리고 싶었는데 진도가 너무 빨라 Vue.js의 복습을 위해서 vue부터 시작하고자 한다.

---

1. Vue.js

Vue.js란 웹 화면 작성에 최적화된 프레임워크이다.

• 다른 프레임워크에 비해 유연하고 가볍다.
• 전체 아키텍처를 새롭게 구성할 필요 없이 기존 웹 애플리케이션의 일부 UI화면만 적용하는 것이 가능하다.
• SPA(Single Page Application) 단일 페이지 애플리케이션 아키텍처 구성을 위한 라우터(Router) 기능도 지원한다.

vue를 쓰는 이유 : 데이터가 바뀌면 화면이 바뀐다.

vue는 mvvm 패턴을 따른다.

MVVM 패턴(Model-View-ViewModel) : 애플리케이션 로직과 UI의 분리를 위해 설계된 패턴

MVVM 패턴

• View : HTML, CSS로 작성
• ViewModel : View의 실제 논리 및 데이터 흐름을 담당

또한 React와 마찬가지로 가상 DOM을 지원하기 때문에 빠른 렌더링 성능을 제공한다.

가상dom

---

2. 개발 환경 설정 ⚙️

1) Node.js 설치

node.js

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

 

2) VS Code 설치

vue.js 개발 환경을 vs code를 이용해서 설정하였다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code 에 관해서는 따로 글을 작성할 예정이다.

 

3) Chrome Vue.js Devtools 설치

크롬 익스텐션에서 크롬 vue.js Devtools를 설치하여 추가한다.

vue devtools

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools - Chrome 웹 스토어

 

개발자 도구(F12)를 열었을 때, console라인에 Vue가 있으면 완료이다.

 

개발자 도구 화면

---

3. 마무리

Vue를 통해서 웹을 제작할 예정이다.
HTML, CSS로만 작성한 로그인 페이지를 Vue로 리팩토링하는 것을 미니 프로젝트로 진행할 예정이다.
수업 때 배운 모든 것을 정리하여 탄탄한 블로그가 되어보자!