vue3 배워보기1 - 설명 및 학습 방법

출처 : https://ko.vuejs.org/guide/introduction#api-styles

Vue.js

 

vue3 공부 시작전 docs를 보고 정리 한내용입니다.

 * vue2는 2023년 12월 31일 EOL(End Of Life)로 종료되었다고 합니다.

 

Vue의 정의

 - 사용자 인터페이스 구축을 위한 Javascript 프레임워크

 - HTML, CSS, JavaScript 기반으로 구축 

 - 컴포넌트 기반 프로그래밍 모델 제공 

  * 웹컴포넌트 - 기능을 캡슐화 하여 재사용 가능한 커스텀 앨리먼트를 생성 및 웹에서 활용하는 다양한 기술 모음

   -  MDN: https://developer.mozilla.org/ko/docs/Web/API/Web_components

 

핵심 기능 2가지 

 1. 선언적 렌더링(Declarative Rendering)

  - HTML 템플릿 문법 확장 -> javaScript 상태 기반으로 화면에 출력될 HTML을 선언적으로 작성 가능

 

 2. 반응성(Reactivity)

  - javascript의 상태 변경 -> DOM 업데이트 

---

API 스타일

Vue 컴포넌트는 옵션API와 컴포지션API 두 가지 스타일이 있다고 한다.

 

먼저 각 옵션별 특징부터.

 1. 옵션(Opetions) API

  - OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘맞는 컴포넌트 인스턴스

  - 반응형 세부 사항을 추상화 

  - 빌드 도구 사용X, 복잡성이 낮은 공부 or 개발용

  - 처음 학습자 권장

 

 2. 컴포지션(Composition API)

 - API 함수 범위에서 직접 반응형 함수 선언

 - 복잡성을 처리하기 위한 구성 

 - 규모가 있는 앱을 전체 구축하는 경우 권장

 

--> 아무튼 OOP가 익숙한분은 Options API부터 공부하고 컴포지션 API로 가는 걸로

 

---

싱글 파일 컴포넌트

  - javascript, CSS, HTML를 하나의 파일에 캡슐화 한것

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

 

1. 장점 (https://ko.vuejs.org/guide/scaling-up/sfc)

 - 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿 

 - 템플릿, 스크립트를 교차 분석하여 컴파일 시간 최적화. 

 - 컴포넌트 범위 CSS

 

개인적인 의견

 - docs에 많은 장점이 써있지만 와닿지는 않는다. 모든 vue파일에 일일이 script와 style을 선언하는건 비효율적으로 느껴진다.

 

   1안) style, javascript를 src import 방식으로 사용 

   2안) SFC를 모듈처럼 import 하여 사용.

 

  현재 1안이 더 익숙하게 느껴지는데, 현업에서 어떻게 사용되고 있을지 궁금하다.