Vue.js 기본 개념 정리
2020-09-01 15:41:37 # Vue

Do it! Vue.js 입문을 읽어보면서 정리한 글

Vue.js란

웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크

MVVM

프론트엔드의 화면 동작과 관련된 로직과 백엔드의 데이터 처리 로직을 분리하여

개발하는 소프트웨어 디자인 패턴

MVVM은 Model, View, ViewModel로 구성 되어 있다.

  • Model은 서버에서 가지고 온 데이터를 보관
  • View는 사용자에게 보이는 화면
  • ViewModel은 데이터 바인딩(View에 표시할 내용과 Model의 데이터를 동기화), 돔 리스너(View의 변경 내역에 반응하여 특정 로직 수행)의 역할을 하며 Vue 같은 프레임워크가 맡는 역할

뷰 인스턴스

Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

1
2
3
4
new Vue({ // <- 인스턴스
  el: '#app', // 인스턴스 범위 지정
  ...
});

인스턴스 라이프 사이클

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
├── 인스턴스 생성
|──── 이벤트 및 라이프 사이클 초기화
├──────── beforeCreate
|──── 화면에 반응성 주입
|──────── created
|──── el, template 속성 확인
|──── template 속성 내용을 render()로 변환
|──────── beforeMount
|──── $el 생성 후 el 속성 값을 대입
|──────── mounted
|── 인스턴스를 화면에 부착
|──── 인스턴스의 데이터 변경 (여기부터는 데이터가 변경되는 경우에만)
|──────── beforeUpdate
|──── 화면 재 렌더링 및 데이터 갱신
|──────── updated (여기까지)
├── 인스턴스 내용 갱신
|──── 인스턴스 접근 가능
|──────── beforeDestroy
|──── 컴포넌트, 인스턴스, 디렉티브등 모두 해제
|──────── destroyed
├── 인스턴스 소멸

beforeCreate

가정 처음 실행되는 라이프 사이클 단계이며 인스턴스의 속성과 화면 요소에 접근 불가

created

인스턴스의 속성에는 접근이 가능하나, 화면 요소에는 접근 불가

서버에서 데이터를 요청할 때 사용

beforeMount

인스턴스가 화면에 부착하기 전 단계이며 render함수(자바스크립트로 화면의 dom을 그리는)

호출되기 직전의 로직 처리 용도로 사용

mounted

화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로

화면 요소를 제어하는 로직을 사용할 때 사용

beforeUpdate

관찰하고 있는 데이터가 변경 되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계

변경 예정인 새 데이터에 접근할 수 있어서 관련된 로직을 처리하는데 사용

updated

데이터가 변경되고 나서 가상 돔으로 화면을 그리고나면 실행하는 단계

변경 데이터의 화면 요소와 관련된 로직을 추가하는데 사용

beforeDestroy

뷰 인스턴스가 파괴되기 전에 호출되는 단계로 인스턴스의 데이터를 삭제하기 좋은 단계

destroyed

뷰 인스턴스가 파괴되고 나서 호출되는 단계

컴포넌트

컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 한다.

컴포넌트 종류

전역 컴포넌트와 지역 컴포넌트 두 가지 방식으로 선언을 할 수 있는데

말 그대로 전자는 어디서나 사용할 수 있거나 후자는 지정된 범위에서만 사용 한다.

컴포넌트 통신

1
2
3
├── 뷰 인스턴스 (최상위 컴포넌트)
|──── 첫 번째로 호출된 컴포넌트(뷰 인스턴스의 하위 컴포넌트, 두 번째 컴포넌트의 상위)
├──────── 두 번째로 호출된 컴포넌트(위의 컴포넌트들의 하위 컴포넌트)

상위 컴포넌트에서 하위 컴포넌트 간의 데이터 전달은 props를 통해 가능 하고

하위 컴포넌트에서 상위 컴포넌트 간의 데이터 전달은 $emit을 통해 가능 하다.

뷰 라우터

뷰에서 라우팅을 구현할 수 있도록 지원하는 공식 라이브러리

라우팅이란 웹 페이지 간의 이동 방법을 뜻 하며 SPA(싱글 페이지 어플리케이션)에

주로 사용되며 장점은 깜빡거림(새로고침 같은?)이 없어져서 사용자 경험이 향상 된다.

SPA

페이지 이동 시 서버에 요청하여 새로 페이지를 갱신하는 게 아니고 미리 해당 페이지 데이터를

받아서 이동 시 클라이언트 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션

프로젝트 생성

Vue CLI를 통해 프로젝트를 생성할 수 있다.

1
2
3
4
5
6
npm i vue-cli -g # vue cli 전역 설치
mkdir 프로젝트폴더
cd 프로젝트폴더
vue init webpack-simple # 여기에 설치할 것인가, 이름 등등 원하는대로 설정
npm i # 의존성 모듈 다운로드
npm run dev # 실행
  • simple은 웹팩 최소 기능을 활용한 프로젝트 구성 방식, 프로토타입용
  • vue init webpack으로 하면 웹팩의 고급 기능을 활용한 프로젝트 구성
Prev
2020-09-01 15:41:37 # Vue
Next