Vue.js 정의와 구조, 개발 API - plgrim-hannah/vue-study GitHub Wiki

# 1.Vue.js 정의와 구조 파악

image

1) 사용 이유

  • 접근성 : 초보자도 사용 가능
  • 낮은 러닝 커브

2) 정의

Vue.js 는 javascipt framework 즉, 라이브러리 집합체이다. (React는 라이브러리)

프레임 워크라 자율도는 낮지만 협업에 있어서 약속된 기능을 사용하기 때문에 명시적이라는 장점이 있다.

3) 구조

  • SPA (Single Page Application) 구조

하나의 페이지에 유저가 원하는 정보만 보여줌 (html이 하나 밖에 없음. body 에서 필요한 것이 교체되면서 보여짐 )

  • SFC (Single File Components) 구조

하나의 컴포넌트 안에 모든 것이 관리됨 (.vue 파일 안에서 html, css, js 관리)

# 2.Vue.js 의 개발 스터디 (옵션 API, 컴포지션 API)

1) 컴포지션 API

  • import해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의한다.

  • <script setup>과 함께 사용된다. setup 속성은 Vue가 더 적은 코드 문맥으로 Composition API를 사용하고, 컴파일 시 의도한 대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트이다.

  • <script setup>에 import 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있다.

  • 더 나은 로직 재사용성 / 유연한 코드 구성 / 더 나은 타입 추론 / 오버 헤드 감소 등의 이유로 이 방식을 추천함. (현재 강의에서는 다루지 않음)

     <template>
  	    <button @click="plus()">숫자: {{ cnt }}</button>
 </template>

 <script setup>
 import { ref, onMounted } from 'vue'

 const cnt = ref(0)
 const plus = () => { cnt.value++ }
 const double = computed(() => cnt.value * 2);

 </script>

2) 옵션 API

  • data / props / computed / methods / watch / emits 와 같은 객체를 사용하여 컴포넌트의 로직을 정의한다.

  • 옵션으로 정의된 속성은 인스턴스를 가리키는 함수 내부의 this를 사용해서 가리킨다.

    <template>
    <button @click="plus()">{{ cnt }}</button>
</template>

<script>

export default {
    data () {
        return {
            cnt: 0,
        }
    },
    methods: {
   	    plus () {
            ++this.cnt;
        },
    },
    computed: {
        double () {
            return this.cnt * 2;
         }
     }
}
</script>

    3) 옵션 API 구조 vs 컴포지션 API 구조

    image

    -> 옵션 API는 개발자가 좀 더 빠르게 작성할 수 있으나 내용이 길어지면 각 요소들이 흩어지고 한번에 파악하기 어려워진다.

⚠️ **GitHub.com Fallback** ⚠️