Vue3 Composition API는 무엇을 해결 해줄까? OptionsAPI 단점

Vue3에서 가장 중요한 개념인 Composition API 가 새로 추가되었습니다. Vue2에서는Options API 방식을 이용해서 스크립트를 구성하였습니다. 하지만, Options API에 단점과 한계가 있어서 새로운 개념이 도입되었습니다. 기존과 완전히 다른 방법은 아니고, 템플릿과 스타일링은 기존과 동일하고 스크립트를 구성하는 방법이 조금 달라졌습니다. 물론, 기존 Options API 방법도 Vue3에서 사용이 가능합니다. Options API 방식 Options API의 단점 1. Options 속성에 따라서 로직이 분리가 됩니다. data, method, computed 등 다양한 Options 속성이 있습니다. 컴포넌트 내에는 다양한 기능들이 있지만, 기능들로 분리되지 않고 해당 옵션으로..

• format_list_bulleted Develop/Vue
• · 2023. 8. 5.
• textsms

Vue Props 양방향 바인딩 하는 방법 sync, v-model

Vue에서 자식 컴포넌트에게 데이터를 전달할때, props 속성을 사용합니다. Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기 Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit을 powerku.tistory.com 프로그램을 개발하다 보면 자식에게 전달한 데이터를 변경하고 싶을 때가 발생하는데요. 자식 컴포넌트에서 props를 직정 변경하게 되면 오류가 발생합니다. Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg' props로 전달한 데이터를 변경하는 방법에 대하여 Vu..

• format_list_bulleted Develop/Vue
• · 2023. 7. 31.
• textsms

v-if 와 v-show 성능 차이점

Vue에서 v-if와 v-show 디렉티브가 있습니다. 디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다. v-if v-show 공통점 두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다. 차이점 v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다. v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다. 성능 차이 v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다. 반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다. 무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다..

• format_list_bulleted Develop/Vue
• · 2023. 7. 10.
• textsms

Vue Mixin(믹스인) 사용법과 장단점

Minxin 란? Mixins는 Vue 컴포넌트에서 코드를 재사용할 수 있는 방법입니다. 언제 사용하면 좋을까? Vue 컴포넌트에서 HTML과 Style은 재사용이 가능합니다. 컴포넌트가 비슷한 로직을 가지고 있으면 Mixins를 사용하는 것이 좋습니다. 예를 들면, 회원 정보 List를 조회하는 컴포넌트(UserList)와 프로젝트 List를 조회하는 컴포넌트(ProjectList)가 있으면 컴포넌트 초기화 이후 데이터를 조회하고, List 컴포넌트를 만드는 로직이 비슷하다면 Mixins을 통해서 코드를 재사용하고, 중복 소스를 제거할 수 있습니다. 사용법 mixins 폴더를 생성하고 listMixin.js 파일을 생성합니다. listMixin.js export default { data(): { re..

• format_list_bulleted Develop/Vue
• · 2023. 6. 28.
• textsms

Vuex - state, getter, mutations, actions 역할 사용법

안녕하세요. 지난 포스팅에서 Vuex가 무엇인지 언제 사용하는지에 대해서 알아보았습니다. Vuex 상태 관리 라이브러리 설치 방법 사용법 Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 powerku.tistory.com 이번에는 Vuex를 더 나은 방법으로 사용하기 위해서 state, getter, mutations, actions에 대해서 알아보도록 하겠습니다. State, Getter, Mutations, Actions를 사용해야 하는 이유 methods: { addOne() { th..

• format_list_bulleted Develop/Vue
• · 2023. 6. 21.
• textsms

Vue에서 Intersection Observer를 활용한 무한 스크롤 구현하기

Intersection Observer 란? 브라우저의 자바스크립트 API 중 하나입니다. 엘리먼트의 가시성 변화를 감지할 수 있습니다. 예전에는 스크롤 이벤트를 통해서 스크롤 페이징을 구현하였는데, 브라우저 과부하를 일으켜서 성능 저하가 일어나기도 하였습니다. 하지만 Intersection Observer API를 브라우저의 내부 로직을 이용하여 엘리먼트의 가시성 변화를 감지할 수 있어서 성능이 좋고 효율적으로 무한 스크롤을 구현할 수 있습니다. 언제 사용하면 좋은지? 1. 무한스크롤 구현 사용자가 스크롤을 할 때 새로운 내용을 동적으로 로드할 수 있습니다. 무한스크롤을 이용하면 페이지 로딩 속도를 개선할 수 있고 부드러운 사용자 경험을 제공할 수 있습니다. 2. 이미지/광고 로딩 최적화 화면에 보일때..

• format_list_bulleted Develop/Vue
• · 2023. 6. 15.
• textsms

Vuex 상태 관리 라이브러리 설치 방법 사용법

Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 영향을 줌 전체 앱 또는 다수의 컴포넌트에 영향을 줌 ex) 입력 요소에 의해 사용자가 값을 입력, show / hide 를 결정하는 값 ex) 유저 권한 상태, 장바구니 Vuex는 하나의 컴포넌트가 아닌 여러 컴포넌트들 또는 전체 앱에서 사용하는 데이터들의 값을 관리하기 위해서 사용하는 라이브러리입니다. Vuex는 언제 사용해야 할까? Vue를 처음 사용하실 때는 Vuex에 대해서 이해하기가 쉽지 않습니다. 충분히 Vue를 사용하고 경험해보..

• format_list_bulleted Develop/Vue
• · 2023. 5. 26.
• textsms

Vue provide inject 간편하게 데이터 전달하기

provide, inject를 사용하는 이유 Vue에서 데이터 전달을 위해서 props를 많이 사용합니다. 하지만 props를 사용할 때, 자식 컴포넌트의 계층이 깊다면 여러 컴포넌트를 거쳐서 데이터가 전달되게 됩니다. 데이터가 필요가 없는 컴포넌트인데도 props를 통해서 전달해야 하고, 번거로움이 있습니다. provide, inject를 사용하게 되면 부모 컴포넌트에서 데이터를 제공하게 되고 모든 하위 컴포넌트에서 inject를 통해서 데이터를 받을 수 있습니다. 지금부터 사용방법에 대해서 알아보겠습니다. provide inject 사용하기 // 부모 컴포넌트 export default { provide() { return { value: this.value }; }, } 부모 컴포넌트에서 provi..

• format_list_bulleted Develop/Vue
• · 2023. 5. 19.
• textsms

Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 Props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit 이벤트를 이용하여 데이터를 전달합니다. 간단한 예시로 알아보겠습니다. 아래 글은 Options API 방식 입니다. Composition API 방식은 다음 글을 참조 바랍니다. Vue3 Props와 Emit 이벤트 이용해서 부모에서 자식 데이터 주고 받기Composition API Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit powerku.tistory.c..

• format_list_bulleted Develop/Vue
• · 2023. 5. 16.
• textsms

Vue 동적으로 Class, Style 추가하기

Vue에서 동적으로 스타일과 Class를 추가하면 편리하게 사용할 수 있습니다. 1. Class 추가하기 v-bind:class 또는 :class를 이용해서 추가합니다. active 클래스를 isActive 데이터가 true이면 추가하게 됩니다. Hello, Vue! 2. 배열로 Class 추가하기 2개 이상의 클래스를 동적으로 추가할 때, 배열을 사용합니다. isActive, isHighlighted 값이 true 이면 각각 active, highlight 클래스를 추가합니다. Hello, Vue! 3. 조건에 따라서 Class 추가하기 삼항연산자를 이용해서 클래스를 추가할 수 있습니다. 4. 스타일 추가하기 v-bind:style 또는 :style를 이용해서 스타일을 추가할 수 있습니다. 스타일을 동..

• format_list_bulleted Develop/Vue
• · 2023. 5. 15.
• textsms