Front-End/Vue.js

Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기

무한 스크롤 웹 어플리케이션에서 페이지 스크롤이 아래로 내려가면서 자동으로 추가 콘텐츠를 로드하는 무한 스크롤은 사용자 경험을 향상시킵니다. 바닐라 JS로 구현도 가능하지만 간단하게 구현하기 위해 Vue.js에서 제공하는 플러그인을 사용하여 구현해보겠습니다. vue-infinite-scroll과 vue-infinite-loading이 있지만 vue-infinite-loading vue 컴포넌트 라이브러리를 사용한 예시를 보여드리겠습니다. vue-infinite-loading Vue.js 애플리케이션에 무한 스크롤 기능을 추가하는데 도움을주는 Vue 컴포넌트 라이브러리입니다. 이 라이브러리를 통해 무한 스크롤을 간단하게 구현할 수 있습니다. 다음 링크에 나와있는 예제 코드를 참고하여 작성했습니다. http..

Vue.js mixin 사용 방법: 코드 재사용 및 컴포넌트 공유

Mixin Vue.js의 mixin은 컴포넌트 간에 코드 및 로직을 공유하고 재사용하기 위한 도구입니다. mixin을 통해 컴포넌트에 추가적인 데이터 속성, 메서드, 라이프사이클 훅 등을 주입하여 코드 재사용을 쉽게 할 수 있도록 해줍니다. 쉽게 말해서 정의한 mixin인 코드를 다른 컴포넌트에서 사용할 수 있도록 하는 방법입니다. Vue.js 2와 Vue.js 3에서의 mixin 사용법은 다릅니다. Vue.js 2에서는 `mixins` 속성을 사용하여 mixin을 추가하고, Vue.js 3에서는 Composition API의 `provide` 및 `inject` 함수를 사용하여 비슷한 동작을 구현합니다. Vue.js 3의 Composition API를 사용하여 mixin보다 더 강력하고 유연한 컴포넌트..

Vue.js this.$set 반응성 유지를 위한 방법

this.$set: 반응성 유지 위한 방법 Vue.js는 반응성 시스템을 통해 데이터의 변경을 감지하고 자동으로 화면을 업데이트 해줍니다. 객체의 속성을 변경하는 경우 Vue의 반응성이 정상 작동하지만, 특정 상황에서는 반응성이 제대로 작동하지 않을 수 있습니다. 이런 경우, `this.$set`을 사용하여 Vue에 변경 사항을 명시적으로 알려주어 반응성을 유지할 수 있습니다. 💁‍♂️ 객체의 속성을 변경은 아래 코드 처럼 간단히 값을 할당하면 됩니다. {{ message }} Change Message ​ this.$set을 사용하는 경우 1. 배열에 인덱스로 값을 추가할 때 Vue는 배열의 길이를 관찰할 수 있지만, 배열에 값을 추가할 때 일반적인 `인덱스로 할당`하면 반응성이 제대로 작동하지 않을 ..

Vue.js Vuex store: Vue.js 어플리케이션의 상태 관리를 해결하는 방법

Vuex Vue.js 어플리케이션을 개발하면서 여러 상태 값을 사용하거나, 여러 컴포넌트 간의 공유 상태 공유를 하게 되면 상태 관리가 어려워지고, 상태 변경 추적도 어려워집니다. 이때 Vuex 라이브러리를 사용하면 복잡한 상태를 중앙 집중식으로 관리하여 효율적으로 상태 관리할 수 있게 도와줍니다. Vue.js에서 컴포넌트는 [부모-자식] 관계를 갖기 때문에 props를 통해 데이터를 주고받지만, Vuex를 통해 따로 빼놓음으로 데이터를 중앙 집중식으로 관리하기 때문에 [부모-자식] 관계에 얽매이지 않을 수 있습니다. 물론 Event Bus를 사용하면 이 역시 [부모-자식] 관계에 얽매이지 않을 수 있지만 어플리케이션의 볼륨이 커질수록 관리가 어려워지기 때문에 규모가 큰 경우 Vuex를 사용합니다. 💁‍..

Vue.js Vue에서 배열(Array) 변경 감지하기

Vue의 반응성 시스템으로 데이터의 변경을 감지하고 화면에 다시 렌더링해줍니다. (ex. v-model 등) 하지만 배열의 변경을 Vue의 반응성 시스템이 감지할 수 있게 해주기 위해서는 배열의 특정 메서드를 사용해야 합니다 변경을 감지하는 배열(Array) 메서드 아래 메서드들은 Vue가 배열의 변경을 감지하고 반응형 시스템을 작동시킬 수 있게합니다. Vue에서 요소를 직접 수정하는 것이 아니라 아래 메서드를 이용하면 데이터를 업데이트 해줍니다. push: 배열의 끝에 요소 추가 pop: 배열의 마지막 요소 제거 shift: 배열의 첫 번째 요소 제거 unshift: 배열의 맨 앞에 요소 추가 splice: 배열에서 요소 추가 또는 제거 sort: 배열의 요소 정렬 reverse: 배열의 요소 순서 뒤..

Vue.js ref 속성으로 요소와 컴포넌트에 쉽게 접근하기

ref 속성 ref 속성은 Vue 컴포넌트에서 DOM 요소나 자식 컴포넌트에 쉽게 접근하기 위한 핵심적인 기능입니다. ref 사용법 1) 요소 접근 출력 템플릿에서 요소에 `ref` 속성을 추가하여 해당요소를 참조할 수 있습니다. 위 예제 코드에서는 `Input`으로 지정하였습니다. 당연히 참조할 때 구분이 되어야하기 때문에 `ref` 속성에 지정하는 값은 유니크해야 합니다. `this.$refs`를 사용하여 `ref`로 지정한 요소에 접근(참조)할 수 있습니다. 위 예제는 `this.$refs.Input.value`으로 `ref="Input"`인 요소에 접근하여 value 속성 값을 가져와 console에 로그를 남기는 코드입니다. 속성은 단순히 값 뿐만이 아니라 이벤트도 실행할 수 있습니다. 아래 예..

Vue.js computed 속성에 파라미터 전달하기

Vue.js에서 `computed`속성을 사용하여 동적으로 계산된 속성을 이용 가능합니다. 이렇게 단순하고 간편하게 이용할 수 있지만 computed 속성을 파라미터를 전달받지 못하기 때문에 몇 가지 꼼수를 사용해야 합니다. 설명하기에 앞서 computed 속성에 직접적으로 파라미터를 전달하는 것이 지원되지 않는 이유 부터 간단하게 설명하겠습니다. `computed` 속성을 의존하는 데이터를 추적하여 해당 데이터가 변경될 될때 자동으로 계산이 됩니다. 이를 위해 `computed` 속성은 데이터 의존성을 명확하게 파악하여야 합니다. 하지만 파라미터를 통해 `computed` 속성에 외부 값이 전달되면 의존성 추적이 어려워 지고 값에 대한 일관성과 예측 가능성을 해칠 수 있기 때문입니다. 때문에 Vue.j..

Vue.js 컴포넌트 간의 컨텐츠를 전달하는 <slot> 태그 ( + Named Slot)

Slot 태그는 컴포넌트 간의 컨텐츠 전달을 위해 사용되는 방식 중 하나입니다. 태그를 이용하면 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 삽입하여 동적으로 컴포넌트를 구성할 수 있습니다. 태그를 사용하여 컨텐츠 뿐만 아니라 컴포넌트를 넘길 수도 있습니다. 자세한 설명을 하기보다는 일단 아래 예제로 설명하도록 하겠습니다. 컨텐츠 전달 Parent Component Parent Component 자식 컴포넌트로 전달할 컨텐츠 Child Component Child Component 컴포넌트가 렌더링될 때 부모 컴포넌트의 안에 있는 컨텐츠들이 태그 위치에 렌더링 됩니다. 이런 식으로 태그를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 전달하여 컴포넌트의 일부를 동적으로 변환할 수 있습니다. 컴포넌트 ..