Front-End

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에 로그를 남기는 코드입니다. 속성은 단순히 값 뿐만이 아니라 이벤트도 실행할 수 있습니다. 아래 예..

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

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

JS 스와이프 동작 구현을 위한 Swiper API

Swiper API Swiper API는 웹 및 모바일 애플리케이션에서 스와이프 동작을 구현하기 위한 JavaScript 라이브러리입니다. 이 API는 사용자의 터치 입력을 감지하고 해당 동작을 가로 스와이프 또는 세로 스와이프로 해석하여 애플리케이션에 반응합니다. Swiper API를 사용하면 다양한 스와이프 기능을 구현할 수 있습니다. 일반적으로 스와이프 기능은 이미지 슬라이더, 캐러셀, 슬라이드 메뉴, 드래그 앤 드롭 등의 인터랙티브한 기능을 구현하는 데 사용됩니다. 주요 메서드 new Swiper(container, options) Swiper 인스턴스를 생성하는 메서드입니다. container는 Swiper 컨테이너 요소의 선택자 또는 DOM 객체이고, options는 Swiper의 옵션을 설정..

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

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

Vue.js MVVM과 반응형 시스템

MVVM(Modeled-View-ViewModel) Vue.js는 MVVM 패턴에 영향을 받았습니다. MVVM 패턴이란 UI와 데이터 처리를 분리하는 아키텍처 패턴입니다. UI와 데이터 간의 바인딩을 통해 개발자가 직접 UI를 업데이트할 필요 없이 데이터와 UI를 자동으로 동기화할 수 있습니다. MVVM 패턴은 데이터 모델(Model), 뷰(View) 및 뷰 모델(ViewModel)로 구성됩니다. 이때 ViewModel은 View와 Model 상시에서 데이터를 주고 받는 역할을 합니다. Vue.js에서는 Vue 인스턴스가 이런 역할을 수행합니다. Vue 인스턴스는 Model(data)와 View(template)을 연결하고, 이를 바인딩하여 데이터와 UI를 동기화합니다. View: 사용자 인터페이스(UI..

Vue.js 필터(Filters) 이용하여 날짜 형식 변환하기

필터 Vue.js 필터(Filter)는 텍스트 형식을 변환하는 기능입니다. 텍스트 내용을 변환하여 화면에 출력할 때 사용하며, 변환 기능을 함수로 구현합니다. 필터를 등록하는 두 가지 방법이 있습니다. 전역 필터: Vue.filter() 전체 Vue.js 어플리케이션에서 사용 가능한 필터입니다. Vue.js 인스턴스 생성 시, filter 속성에 필터 함수를 정의하면 됩니다. 지역 필터: 컴포넌트 내부에서 filters 프로퍼티 정의 Vue.js 필터는 템플릿 내부에서 적용할 필터의 이름을 파이프(|) 뒤에 추가하면 됩니다. 필터 정의 Vue.filter('dateFormat', function(value) { if (value) { return moment(String(value)).format('YY..