Front-End

JS 자바스크립트: `프로토타입` 기반 객체 지향 프로그래밍 언어

프로토타입(Prototype) 프로토타입 기반 언어는 객체 지향 프로그래밍의 한 형태로, 클래스 기반 언어와는 다른 객체 지향 모델을 따릅니다. JS(JavaScript)는 대표적인 프로토타입 기반 언어입니다. 프로토타입 상속: 클래스 기반 언어에서는 객체를 클래스의 인스턴스로 생성하는 반면, 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속됩니다. 즉, 객체는 다른 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있습니다. 이때, 새로운 객체는 원본 객체의 프로토타입을 상속받습니다. 이를 통해 코드 재사용과 확장이 간단하게 이루어집니다. 프로토타입 객체: 프로토타입 기반 언어에서는 객체가 자체 속성과 메서드를 가짐과 동시에 prototype이라는 특수한 속성을 가집니다. 이 prototype 속..

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: 배열의 요소 순서 뒤..

JS 깊은 복사와 얕은 복사: JS에서 객체 복사 방법과 차이점

요약 깊은 복사: 깊은 복사는 객체를 완전히 새로운 객체로 복사합니다. 즉, 객체의 속성들과 중첩된 객체까지 재귀적으로 복사됩니다. 복사된 객체와 원본 객체는 독립적인 개체가 되어 중첩된 객체를 수정해도 서로에게 영향을 주지 않습니다. 얕은 복사: 얕은 복사는 객체를 복사할 때, 객체의 속성들은 복사되지만 중첩된 객체는 참조로 복사됩니다. 복사된 객체와 원본 객체는 동일한 중첩된 객체를 참조하게 됩니다. 즉, 중첩된 객체를 수정하면 복사된 객체와 원본 객체 모두에 영향을 줍니다. 참조 복사: 참조 복사는 객체를 복사하는 대신, 원본 객체를 참조하는 방식입니다. 복사된 객체와 원본 객체는 동일한 객체를 참조하게 됩니다. 즉, 하나의 객체를 수정하면 다른 객체에도 영향을 줍니다. 깊은 복사 (Deep Cop..

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

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