Front-End/Vue.js

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

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); });

Vue.js 디렉티브(v-접두사)

디렉티브 HTML 요소에 동작과 기능을 부여를 더 쉽게 할 수 있습니다. HTML 태그 안에 v-접두사 형식으로 표시되며, Vue.js가 HTML을 해석하고 동적으로 조작할 수 있도록 돕습니다. 첫 번재 문장 {{ system }} 두 번째 문장 세 번째 문장 네 번째 문장(경고 창) new Vue({ el: '#app', data: { flag1: false, flag2: true, systems: ['android', 'ios', 'window'], uid: 10 }, methods: { popupAlert: function () { return alert('경고 창 표시'); } } }); {{ }} (v-text): 데이터 바인딩 HTML 화면 요소에 뷰 인스턴스 데이터를 연결하고 표시합니다. v..

Vue.js axios를 이용한 HTTP 통신

axios HTTP 통신을 하는 방법들이 있지만 그 중 Vue.js에서 권고하는 방식은 axios 입니다. axios는 Promise 기반의 API 형식이고 다른 방법들에 비해 문서화도 잘되어 있고 많이 사용됩니다. axios 설치 NPM을 사용하여 설치하는 방법 (링크) CDN을 이용하여 설치하는 방법 axios 사용법 해당 URL 값 가져오기 new Vue({ el: '#app', methods: { getData: function () { axios.get(`URL`) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } } }); axios HTTP 요청 메서드 ..

Vue.js Router로 싱글 페이지 어플리케이션(SPA) 페이지 라우팅 구현

Vue.js Router Vue.js Router는 Vue.js 프레임워크에서 사용되는공식 라우터 라이브러리로, SPA에서 페이지 라우팅을 구현하는데 사용됩니다. Vue.js Router는 Vue 어플리케이션에서 다양한 View와 URL 간의 매핑을 정의하고, 사용자가 브라우저의 주소 표시줄을 통해 URL을 변경하거나 링크를 클릭할 때마다 적절한 뷰를 렌더링합니다. 각 라우트에 대해 컴포넌트를 매핑하고, 중첩된 라우트와 동적 라우팅을 설정하여 사용할 수 있습니다. 또한 뒤로/앞으로 버튼을 클릭할 때마다 적절한 컴포넌트를 자동으로 로드하여, SPA에서 페이지 전환을 간편하게 관리할 수 있습니다. 💁‍♂️싱글 페이지 어플리케이션(SPA)이란? 싱글 페이지 어플리케이션이란 우리가 기본적으로 알고있는 어플리케이..

Vue.js 컴포넌트: Props, Emit, Event Bus를 활용한 통신 방법

Vue 컴포넌트 컴포넌트 Vue 어플리케이션에서 코드를 재사용할 수 있는 기본 단위입니다. 각각의 컴포넌트는 특정한기능과 템플릿을 갖고, 데이터와 메서드를 정의하여 독립적으로 동작할 수 있습니다. 컴포넌트를 이용하면 HTML 요소들을 확장하고 화면을 구조화함으로 코드를 캡슐화하여 재사용 및 유지보수를 용이하게 해줍니다. Vue 컴포넌트 작성 {{ title }} {{ count }} Count 증가 Vue 컴포넌트 등록 전역 등록 main.js: import Vue from 'vue'; import GlobalComponent from './components/GlobalComponent.vue'; Vue.component('global-component', GlobalComponent); new Vue..

Vue.js 뷰 인스턴스와 인스턴스 라이프 사이클

Vue 인스턴스 Vue 어플리케이션을 개발하기 위해 Vue 인스턴스를 생성하여 적용합니다. {{ message }} Vue.js에서 인스턴스를 생성할 때, data 옵션을 사용하여 데이터를 정의할 수 있습니다. 이때, data 옵션을 정의하는 방식은 두 가지가 있습니다. data: {} 위 예제처럼 객체 리터럴을 사용하여 data 객체를 정의하는 방식입니다. 이 방식은 객체 안에 정의된 프로퍼티가 Vue.js의 반응성 시스템에 등록되어, 해당 프로퍼티가 변경될 때마다 화면이 자동으로 업데이트 됩니다. data() { return {} } data 옵션을 함수 형태로 정의하는 방식입니다. 이때 함수는 객체를 반환해야 하고, 이 객체 안에 정의된 프로퍼티 역시 Vue.js의 반응성 시스템에 등록됩니다. 차이..