Front-End

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..

JS 모듈: export(내보내기)와 import(가져오기)

ES6에서 JavaScript에서는 모듈을 지원합니다. 모듈 구성하고 이용하면 파일 간의 코드를 쉽게 공유할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 모듈 시스템에서는 import와 export 키워드를 사용하여 모듈을 로드하고 내보낼 수 있습니다. import와 export는 컴파일 시점에서 결정되며, import 선언과 export선언은 호이스팅되어 최상위에 위치됩니다. export: 내보내기 모듈에서 외부로 내보내기 위한 키워드입니다. 이를 이용하여 아래와 같이 변수, 함수, 클래스, 객체 등을 내보낼 수 있습니다. // 변수 내보내기 export const value = 25; // 여러 값 내보내기 const z = 'first'; const y = 'second'; expo..

JS 프로토타입: 자바스크립트의 상속

자바스크립트에서 프로토타입(prototype)은 자바스크립트에서 상속을 구현하기 위한 방식으로, 다른 객체에 공유 프로퍼티를 제공하는 객체입니다. 자바스크립트에서 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(prototype object)를 가지고 있습니다. 이 프로토타입 객체는 다른 객체로부터 상속된 속성과 메서드를 가지고 있습니다. 프로토타입 체인(prototype chain)은 자바스크립트에서 객체가 특정 속성에 접근할 때, 해당 객체 자체에 해당 속성이 없다면, 자신의 프로토타입에서 해당 속성을 찾고, 이를 계속해서 상위 타입 객체의 프로토타입에서 찾는 과정을 반복하다가 최종적으로 Object.prototype에서 해당 속성을 찾지 못하면 undefined를 반환하는 것을 말합니다. 정리..

Vue.js 배열 추가, 삭제, 정렬 (push, splice, sort)

배열 끝에 데이터 추가: push(데이터) 배열.push(데이터); 배열 중간에 데이터 추가: splice(index, 0, 데이터) 배열.splice(index, 0, 데이터); 배열 중간 데이터 삭제: splice(index, 1) 배열.splice(index, 1); 배열 중간 데이터 변경: splice(index, 1, 데이터) 배열.splice(index, 1, 데이터); 배열 정렬: sort() // 오름차순 배열명.sort(function(a,b) { return (a b ? -1 : 1); });