Vue.js란?
- 웹 페이지를 만들기 위한 자바스크립트 기반 프론트엔드 프레임워크
- React의 가상 DOM을 활용한 성능 최적화의 장점과 Angular의 데이터 바인딩을 쉽게 처리할 수 있는 템플릿 기능의 장점을 따온 프레임워크
Vue.js의 특징
선언적 렌더링(Declarative Rendering)
- Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태(State)를 기반으로 화면에 출력될 HTML 을 선언적으로 확장할 수 있다.
반응성
- Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행
가상 DOM이란?
일반적인 DOM
하나의 태그를 변경하는 경우 브라우저는 parsing -> style -> layout -> paint -> composite의 과정을 거친다.
이때 계층 구조를 이루고 있는 DOM은 최상위 루트로부터 모든 노드들을 다시 렌더링한다.
-> 예를 들어, 사진의 <a> 태그를 변경하면 a, body, html, document, window 노드들을 다시 렌더링한다.
-> 이러한 문제를 해결하기 위해 가상 DOM 등장
가상 DOM
- 부모의 부모까지 업데이트 안 하기 때문에 빠르다.
- 사실 성능 비교하면 별 차이 없음
- 자바스크립트로 태그를 추가했을 때는 가상 DOM이 성능이 더 좋지만, 새로운 페이지를 띄울 때는 가상 DOM을 만들기 위한 코드를 추가로 수행해야 하고, 메모리도 추가적으로 사용하기 때문에 일반적인 DOM보다 안 좋다.
MVVM 패턴
모델 (Model)
자바스크립트에서 처리하고 있는 데이터, 함수, 객체
뷰 (View)
사용자에게 표시된 화면, UI 요소. 뷰모델에 의해 관리됨
뷰 모델 (View Model)
뷰에 필요한 기능, 필드를 갖고 모델과 뷰를 연결하는 역할을 수ㅡ행하는 뷰 인스턴스
Vue.js 개발환경 설정
1. Node.js 설치
Node.js?
- Google V8 엔진을 기반으로 만들어진 서버 측의 자바스크립트 언어이자 플랫폼
- Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리하게 됨
- Node.js와 함께 Express(백엔드 만드는 프레임워크)라는 웹 프레임워크를 이용해서 Vue.js 애플리케이션이 액세스하는 백엔드 API 서비스를 작성
npm?
- 앱의 의존성 관리를 위해 사용하는 노드 패키지 관리자
vue로 프로젝트를 진행할 때 Node.js가 꼭 필요한가?
- 꼭 필요한 것은 아니다. -> 사용하면 개발이 편하다.
- npm을 이용해서 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리하게 된다.
- 설치하고 관리할 때 사용하는 거지, 실행할 때 꼭 필요한 것은 아니다.
Node.js 설치하기
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치 후 npm을 최신 버전으로 업그레이드 (cmd에 명령어 입력)
npm install -g npm
2. VSCode 설정 (확장 프로그램)
Vue - Official (Vue Language Features(Volar))
Vue.js 코드에 대한 문법 강조 (Syntax highlignting), 코드 자동완성 기능을 제공하는 Vue 언어 지원 확장 도구
Vue VSCode Snippets
Vue 언어용 코드 조각 모음 제공
.vue 파일에 vbase-css라고 타이핑하고 엔터키를 누르면 Vue 단일 파일 컴포넌트에서 필요한 구성 요소 스캐폴딩 코드(템플릿 코드)를 생성
ESLint
자바스크립트 코드 스타일, 문법 체크 기능 제공
3. 크롬 Vue.js Devtools 설치
디버깅을 돕기 위해 devtools 확장툴 설치
크롬 웹스토어 -> Vue.js devtools 검색 후 설치
웹서버 없이 html 파일을 직접 열어서 실행하는 경우
chrome://extensions/ 이동 후 세부 정보 -> 파일 URL에 대한 액세스 허용 기능 활성화
4. Vue.js 프로젝트 생성, 실행
<script> 태그로 직접 Vue.js 라이브러리를 참조해서 작성
index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var model = { message: "Hello Vue3!" };
// vue 문법
var vm = Vue.createApp({
name: "App",
data() {
return model;
}
}).mount("#app");
</script>
</body>
</html>
실행해보면 크롬에 뜬다.
Vue 탭에 가보면 아까 설치한 확장 프로그램을 확인할 수 있다.
5. 단일 파일 컴포넌트 기반 Vue 애플리케이션 개발
단일 파일 컴포넌트?
- 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 단일 파일 컴포넌트라고 부른다.
- 단일 파일 컴포넌트 기반으로 개발하려면 모듈 번들러 도구(Webpack, Rollup)와 ES6, Typescript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다.
- 이러한 개발 환경을 직접 설정하는 것은 쉽지 않기 때문에, 프로젝트 설정 도구를 사용할 것을 권장한다.
Webpack 기반 도구와 Vite 기반 도구가 있다.
Webpack
- 오래된 브라우저도 지원
- 호환성이 좋다
- 설정이 복잡하다
vite
- vue 공식으로 추천
- 설정이 편하다, 빠르다
- 호환성이 안 좋다
- 오래된 브라우저 지원 x
Vite 기반 도구 사용
빌드와 개발 서버 구동 시간이 매우 빠르다.
기존에 자주 사용하던 webpack 같은 빌드 도구는 자바스크립트 언어로 만들어졌지만 Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 빠르다.
개발 서버를 이용할 때도 빠르다. Vite가 실행하는 개발 서버는 브라우저가 요청하는 모듈을 전송해주고, 모듈 번들링 기능을 브라우저가 수행하기 때문에 개발 서버 구동이 빠르다.
1. Vite를 이용해 Vue 프로젝트 생성
create-vue 도구를 사용하면 프로젝트를 생성할 때 Vue Router 등의 지원 여부, 단위 테스트 등을 좀 더 편하게 진행할 수 있다.
// vite를 직접 이용해서 프로젝트 생성
npm init vite [프로젝트명] -- --template vue
// create-vue 도구 사용
// 프로젝트명을 비롯한 여러 단계의 입력이 필요함
// 프로젝트명을 제외한 나머지는 일단 기본값으로 생성
npm init vue@latest
관련 패키지를 설치 후 npm run dev로 개발용 웹서버를 구동하여 실행
npm install
npm run dev
2. Vue 프로젝트 폴더 구조 확인
node_modules
- node와 관련된 파일들
src
- 보통 코딩할 때 작업하는 폴더
- 컴포넌트, vue 파일과 js 파일, css 파일이 들어간다.
.gitignore
- 깃에 올리지 않는 파일과 폴더들을 설정하는 것
- 보통 여기에 node_modules를 작성해서 node_modules 폴더가 깃에 올라가지 않도록 설정해준다.
package.json
- 패키지 관리 파일
index.html
- 전체 html 파일
- 하나의 페이지에서 컴포넌트를 전환하며 보여준다.
vite.config.js
- vite 설정 파일
- 거의 건들 일 없음
'FE > Vue.js' 카테고리의 다른 글
| [Vue] Pinia 설치 / Store 사용 (loading, axios) (0) | 2024.12.23 |
|---|---|
| [Vue] 컴포넌트 간 데이터 주고받기 (Props, Emit) (0) | 2024.12.23 |
| [Vue] 데이터 바인딩 (ref, reactive) / 조건문, 반복문 (v-if, v-for) / v-model (0) | 2024.12.20 |
| [Vue] Vue Router란? / Vue Router 사용 (router-link, useRouter) (1) | 2024.12.20 |
| [Vue] VSCode에서 Vue.js 템플릿 설정 (Vue.js Snippet) (0) | 2024.12.20 |
