🐢 Vue.js 설치 및 실행 방법 정리 🐢
Vue.js
사용자 인터페이스를 만들기 위한 progressive framework이자 Open source Js framework
MVVM 패턴을 기반으로 SPA를 지원하며, 양방향 데이터 바인딩(v-model) 가능
Vue.js는 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있어 progressive framework라고 표현함
SPA(Single Page Application)
서버에서 필요한 데이터만 비동기로 받아와 동적으로 현재 화면에 다시 렌더링하는 방식
다수의 페이지를 표시하는데 하나의 페이지인 것처럼 처리하는 기술
과거의 페이지 전환 방식보다 깜빡임도 적고 부드러우며, 서버 부하 적음
MVVM 패턴
Model-View-ViewModel
Model과 View 사이에 ViewModel을 두어 View와 Model의 결합도를 낮추는 방식
장점
- 접근성
HTML, CSS, JS 표준을 기반으로 쓰기 편한 API와 최고 수준의 문서 제공 - 고성능
Reactive(반응형) 구조를 갖춘 컴파일러 최적화 렌더링 시스템
수동 최적화가 거의 필요하지 않음 - 유연성
점진적으로 도입할 수 있는 환경을 제공해 라이브러리부터 완전한 기능을 갖춘 프레임워크까지 확장 가능
다른 라이브러리나 기존 프로젝트와의 통합이 쉬움
Reactive
Js의 Proxy 기술 활용해 데이터의 변화를 감지하는 것
Install
Vue.js를 사용하기 위해서는 node.js와 npm가 설치되어 있어야 한다.
Nodejs.org에 접속해 OS에 맞는 파일을 설치하면 된다.
정상적으로 설치되었다면 터미널에서 버전을 확인할 수 있다.
- 노드 버전 확인 :
node -v - npm 버전 확인 :
node -v
만약, 정상적으로 설치되었음에도 버전을 확인할 수 없다면, 프로그램을 종료 후 재시작하면 된다.
이후, Vue를 설치하면 된다.
npm install vue정상 설치되었다면 버전을 확인할 수 있다.
npm vue -v프로젝트를 시작하기 전, 프로젝트 진행에 필요한 파일이나 패키지를 다운로드 받아야 한다.
npm install이때, 터미널에 vue의 버전 업데이트가 필요하나는 문구가 나타나면, 필요에 따라 원하는 버전으로 업데이트하면 좋다.
npm install -g npm@<버전>
npm install -g npm@11.2.0 // 11.2.0 버전으로 업데이트Create
Vite + Vue 프로젝트를 생성한다.
npm create vite@latest <project_name> --template vueVite
개발을 진행하면서 UI 기능 검증을 위해 사용하는 빌드 도구
Hot Module Replacement(HMR)이 브라우저의 기능을 통해 빠르게 반응함
Hot Module Replacement(HMR)
모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거
변경된 사항만 갱신해 개발 속도를 높임
Extension for VS Code
VS Code에서 Vue.js를 사용할 때 Vue-Official Extension을 설치하는 것을 권장하니 설치하는 것이 좋다.
Run
Vue 프로젝트 경로에서 서버를 실행하면 Vue 프로젝트를 실행할 수 있다.
npm run dev참고-Vue.js
참고-Vue.js에서의 progressive
참고-SPA
참고-Vite
참고-HMR
참고-npm 설치
참고-Vue.js 설치
