vue.js란?
: 웹 페이지를 만들기 위한 자바스크립트 기반 프론트엔드 프레임워크
React의 가상 DOM을 활용한 성능 최적화의 장점과 Angular의 데이터 바인딩을 쉽게 처리할 수 있는 템플릿 기능의 장점을 따온 프레임워크
Vue.js의 특징
선언적 렌더링
간단한 템플릿 구문을 사용하여 데이터를 선언적으로 DOM에 렌더링 할 수 있다.
<div> 태그 안에 {{변수명}} 와 같은 구문을 선언해서 html DOM 에 데이터를 전달하는 방식)가상 DOM
일반적인 DOM : Option 태그를 업데이트하는 경우 브라우저는 parsing->style->layout->paint->comppsite 과정을 거친다. 이때 계층 구조를 이루고 있는 DOM은 최상위 루트부터 모든 노들을 다시 렌더링한다
가상 DOM : MVVM 패턴
- 실제 DOM을 조작하는 대신, 이것을 추상화 시킨 자바스크립트 객체인 가상DOM을 사용 (실제 DOM의 가벼운 사본 같은 개념)
nods.js
: google V8 엔진을 기반으로 만들어진 서버 측 자바스크립트 언어이자 플랫폼
vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리하게 된다
nodejs와 함께 Express라는 웹 프레임워크를 이용해서 vue.js 애플리케이션이 액세스하는 백엔드 API 서비스를 작성
vue로 프로젝트를 진행했는데 nodejs가 꼭 필요한가?
vue는 프론트엔트 프레임워크로 클라이언트 컴퓨터에서 실행되는 코드이므로 node.js가 꼭 필요한 것은 아니다. 그러나 사용하면 개발이 편해진다.
npm(node package manager)
Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
Vue 프로젝트 생성하기
npm create vue@latest
위의 명령어를 입력하게 전에 node.js를 먼저 설치해주어야 한다.
오류
만약 위와 같이 오류가 뜬다면?
Get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned
y
위의 과정을 통해 폴더가 생성되었으면 해당 폴더로 이동해서
npm install
을 입력한 다음
npm run dev
를 하면 http://localhost:5173을 통해 초기 화면으로 접근할 수 있다.
VSCode 를 통해 vue 사용하기
폴더에서 빈 공간에 마우스 오른쪽 클릭을 한 다음 Open Folder as VS Code Project를 선택해주면 끝
이때 하단의 터미널이 처음에는 powershell로 되어있을텐데, +버ㅜ튼을 눌러서 Command Prompt를 열어야 npm 등을 이용한 명령어를 입력할 때 정상적으로 작동한다.
