Vue.js 3.0 개발가이드 정리(1)

Vue : 프레임워크

라이브러리 < 프레임워크(라이브러리 집합체)

예를 들면 라이브러리가 목재 프레임워크가 가구라고 할 수 있다.

 

Vue의 후발주자로는 스벨트가 있다.

 

---

01. Vue.js 구조

1) SPA(Single Page Application) 단일 페이지 애플리케이션

  (1) 여러 페이지가 존재하는데 다수의 페이지를 표시하는 데 있어서

        과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술

  (2) 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식

        => 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라,

             화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있는게 장점.

  (3) SPA 이점

       필요한 영역만 캐치하여 즉각적인 화면의 변화를 줄 수 있기 때문에 사용자가 느끼기에

       네이티브 애플리케이션과 같은 자연스러운 사용감을 줄 수 있어 몰입도를 높임

1. 빠른 로딩 속도와 반응성  -  페이지 전환 시 서버에서 전체 화면을 새로 내려받지 않기 때문에, 뛰어난 반응성과 빠른 페이지 로딩
2. 향상된 사용자 경험  - 웹사이트의 속도는 이탈률, 전환율, 수익, 사용자 만족도 및 검색 엔진 순위에 직접적인 영향을 미쳐 고객 체류시간이 늘어나는 효과
3. 웹/모바일 공통 아키텍처 사용 - 별도의 백엔드용 API 서버 구현 없이 웹 애플리케이션 서비스를 제공 (서버 측의 데이터를 조회하기 위한 API 백엔드(Backend) 서버를 구성하여 비동기(Async) 방식으로 데이터를 가져와서 처리하기 때문)
4. 복잡한 대규모 애플리케이션 개발 - 트래픽이 줄어듦으로 React, Vue, Angular 등은  SPA 원칙을 도입하고 있음.

 

 

2) SFC (Single File Component) 구조

:하나의 컴포넌트 안에 HTML, CSS, JavaScript 세가지 언어가 관리되는 구조.

 

 

 

02. Vue.js 개발 스타일

개발스타일은 크게 2가지로 나뉜다. 

1) Options API

  - data, methods, mounted같은 객체를 활용하여 컴포넌트 로직을 정의하는 개발 스타일.
  - 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출이 된다.
     => this.데이터이름, this.함수이름 이런식으로 네이밍 접근 가능

  * data / methods / LifeCycle

   - Data 메서드는 해당 컴포넌트에서 사용될 state. 즉, 데이터들을 관리해주는 곳.

     data에서 반환된 속성들은 반응적인 상태가 되어 this에 노출된다.
   - methods는 속성값을 변경하고 업데이트 할 수 있는 함수, 템플릿내에서 이벤트 핸들러로 바인딩 가능.

     this에 의해 노출된다.
   - LifeCycle hooks(생명주기 훅)은 컴포넌트 생명주기의 여러단계에서 호출

 

2) Composition API

  - import 키워드를 통해 가져온 vue.js 내장 API 함수 혹은 속성들을 사용하여 컴포넌트 로직을 정의하는 개발 스타일
  - SFC에서 컴포지션 API는 일반적으로 <script setup> 처럼 사용한다.
  * setup 속성은 컴파일시 의도된대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트라고 보면된다.

  * ref, reactive / methods / LifeCycle 

  - ref, reactive 반응성있는 데이터를 만들경우 변수로 선언해준다.
  - methods Composition API 에서는 선언할 필요가 없기 때문에 함수를 그냥 만들어 사용하면 된다.
  - LifeCycle은 Options API와 동일