[Day-39] Vue 프레임워크

프레임워크?
규약

무조건 따라야 함.

 

https://code-lab1.tistory.com/284

https://cocoon1787.tistory.com/745

라이브러리?

필요할 떄, 원하는 기능만 가져다 써

새로운거? 내장되지 않은 거 제공할 수 없어

 

ex) 학원이라는 프레임워크

국가라는 프레임워크 안에서 학원

선생

 

Vue.js 프로젝트 투입 일주일 전

고승원

 

 

리액트랑 뷰랑 같이 있는 책 사기

 

---

 

컴포넌트☆

 

https://ding-co.tistory.com/39

[Vue.js 프로젝트 투입 일주일 전] 1장 - Vue.js는 무엇인가?

 

Vue.js

사용자 인터페이스 개발을 위한 progressive Framework.(웹과 네이티브 앱의 장점)

spa(Single Page Application)개발을 위한 프론트엔드 프레임워크

 

SPA?

웹 페이지 하나에 여러 가지 기능을 넣어서 하나의 페이지로 동작하는 웹 애플리케이션

페이지 불러왔을 떄

전체를 다 불러오는게 효율? 다른 것만 

웹사이트 전체에 필요한 모든 웹자원을 서버로부터 가져와서 로딩

페이지를 이동하면 전체가 바뀌는 게 아니라 바뀌는 부분만 가져와 처리 과정 효율적, 속도 빨라

처음 화면 로딩 시 사이트 이용에 당장 필요하지 않은 모든 웹 자원까지도 로딩하기 떄문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있음.

 

---

Vue.js 

장점

- 직관적이고 배우기 쉽다.

소규모 프로젝트에 압도적으로 유리

- 재사용을 통한 앱개발 기간 단축 및 양질의 코드를 생산할 수 있다.

- Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.

 

단점

 

템플릿

무언가 정형화되어 작성된 유사한 것을 만들 때 적용하여 빠르게 원하는 대로 만들 수 있도록 해주는 이미 구조화된것.

 

컴포넌트가 이에 해당됨

컴포넌트를 통해 재사용 극대화

뷰로 재사용할 수 있는 구조로 개발하는 것을 

 

(Angular

가장 먼저 나옴 / 구글에서 만듦/  데이터 바인딩-데이터와 이벤트를 가져오는 부분에 대한 코딩 쉽게 처리/  양방향으로 연결되어 있어서 어느 한쪽에 변경이 일어나면 다른쪽에 자동으로 반영 / HTML DOM 형식 구조 복잡해지면 과부하 웹 페이지 커지면서 속도 문제 성능 저하 단점/

 

(React

부모 페이스북 / virtual Dom을

문서를 추상화하여 변화가 많은 화면을 돔에서 직접 처리하는 방식이 아닌 가장싀 돔을 만들어 필요한 순간에만 비교하여 갱신

 

(Vue

쉽고 빠르다는 장점으로 치고 올라오는 중(그러나, 부모가 약하고중국 회사, 생태계가 약해 역사가 짧아.)

 

1.2 Vue.js 특징

- MVVM패턴

model-View-ViewModel

프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴

  Vue => ViewModel (데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성 제공)

 - 컴포넌트를 사용한 높은 재사용성

     화면(View)을 이루고 있는 작은 단위의 여러 개의 View 중에는 다른 화면에서도 사용되는 View가 있음

     이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것 => 컴포넌트

     컴포넌트는 한 화면을 이루는 작은 요소일 수도 있고, 한 화면 전체일 수도 있음

     하나의 컴포넌트는 HTML+CSS+JS로 이루어져 있고, 다른 컴포넌트에서 import해서 바로 사용 가능

 

---

1. Extensions설치

vetur / deburg / pretiter

 

2. npm install -g @vue/cli 

npm install 패키지명 --save

 

3. vue create vue-project가 오류?

powershell 관리자에서

get-help Set-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned

https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3

http://localhost:8080/

 

 

vue ui

 

---

Vue Router 설정

라우팅?

접속한 주소에 따라 컴포넌트가 달라지는 것

클라이언트에서 url 주소에 따라 페이지가 전환되는 것

내부에서는 미리 url주소를 정의하고 각 주소마다 vue 페이지를 연결해 놓음

 

Vue add router

 

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },

 

 사용자가 해당 패스에 접근하지 않더라고 이미 vue 파일을 import

 

  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

 

Lazy Load

리소스를 컴포넌트 단위로 분리하여 컴포넌트 단위로 혹은 라우터 단위로 필요한 것들만 그때그때 다운 받을 수 있도록 하는 방법

 

prefetch 기능 미래에 사용될 수 있는 리소를 캐시에 저장함으로써 사용자가 접속했을 때 굉장히 빠르게 리소스를 내려줌 

Lazy load가 적용된 컴포넌트는 모두 prefetch기능 적용 기본적으로 true 설정

 

 

하드웨어

캐시: 주머니
가장 빠르고 비쌈

램:  사물함

하드: 방

* 사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드 할 수 있게

가능성이 낮은 컴포넌트 프리패치 적용하거나 사용자 접속 시점에 리소스를 다운받게 해서 전체 애플리케이션에 리소를 다운받는 시점을 분리