개발/Vue
-
[Vue] swiper 정리개발/Vue 2022. 6. 19. 22:36
프로젝트에서 슬라이더 기능으로 swiper를 사용하게 되면서 자주 사용하는 옵션을 정리해 봤습니다. 찾아보니 swiper 2개를 연동 하는 등 사용하는 방법에 따라 다양한 연출이 가능해 보였으나 2개 연동은 아직 사용을 안해봐서 나중에 게시글에 추가 하도록 하겠습니다. 사용 예제 vue 코드에서 import 후 슬라이드를 원하는 위치에서 와 태그로 감싸줍니다. Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 참고 사이트 : https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated trans..
-
Vuex란개발/Vue 2022. 6. 12. 21:28
Vuex의 필요성 프로젝트 초반에는 컴포넌트간 데이터 공유가 많지가 않아서 간단한 데이터의 경우 props, ref, emit 또는 EventBus등으로 데이터 전달을 하였는데, 프로젝트 규모가 점점 커지면서 props나 emit으로 구현하기 어려워 지는 부분도 생기고 EventBus의 사용이 많아지면서 출처를 알기 어려워 지는 부분도 생기기도 합니다. 이럴때 Vuex 라이브러리를 사용하여 상태(state)를 관리하면 보다 간편하게 관리 할 수 있습니다. 하지만 Vuex의 상태는 메모리에 저장되는 것이기 떄문에 새로고침시에는 당연히 초기화 되어 사라집니다. localStorage에 따로 저장을 시키거나, vuex-persistedstate 같은 라이브러리를 사용하여 새로고침시에도 상태를 유지할 수 있습니..
-
[Vue] watch와 computed개발/Vue 2022. 6. 6. 00:13
watch란 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성을 말한다. coumputed 데이터를 미리 연산한 뒤에 그 값을 갖고 있는 것을 말한다. watch 문법 1. 변경값 파라메터를 가지지 않는 문법 watch: { 변경을감시할프로퍼티명: function () { ... } } 2.변경값 파라메터를 가지는 문법 watch: { 변경을감시할프로퍼티명: function (변경후의값, 변경전의값) { ... } } computed 문법 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된..
-
[Vue] Event Bus개발/Vue 2022. 4. 18. 00:43
Event Bus란 컴포넌트간에 데이터를 주고 받거나, 메소드를 사용하는 등 컴포넌트 간에 통신을 해야하는 상황에서 부모 자식간의 관계 상관 없이 간편하게 전달하게 해주는 방법입니다. 장단점 장점 : 간편하게 사용할 수 있다. 단점 : 너무 남발하여 사용하면 추적이 힘들어서 관리가 힘들고, 데이터 충돌 등의 이슈가 발생할 수 있다. 사용 방법 1. Event Bus 생성 // EventBus.js import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; 2. $emit 이벤트 호출 $emit('이벤트 이름', option) option에 값을 넣어서 보낼 수 있다. //받는쪽 vue HelloWorld Change Compon..
-
[Vue] axios 공통모듈화개발/Vue 2022. 4. 10. 21:30
vue로 프로젝트를 하면서 서버 통신을 위해 axios를 사용 하면서 외부 api를 호출하려고 할때 cors가 발생하여 vue.config.js에 아래와 같이 devServer에 proxy 설정해 주어 cors 해결 후 사용을 했었습니다. module.exports = { devServer: { proxy : 'http://xxx.xxx.xxx.xxx:8080' }, 그런데 개발서버에 배포 후 톰캣을 이용해서 가동을 하니 proxy에 설정된 주소를 못타더라구요.(빌드하면 devServer를 사용하지 않는다고함.) 그래서 개발환경, 배포 환경 나눠서 서버 통신을 할 수 있게 공통 모듈로 바꾸어 주었습니다. 일단 .env.development파일과 .env.production 파일을 최상위 루트에 생성 하여..
-
[Vue.js 2] vue/multi-word-component-names 에러 해결개발/Vue 2022. 4. 3. 21:00
vue로 프로젝트를 하면서 component 갯수를 늘려가다 보니 어느순간 실행시에 should always by multi-word vue/multi-word-component-names 라는 에러가 뜨더라구요. 뷰에서는 기존 html 태그와 구분을하기위해 두 단어의 조합을 권장한다고 하는데, 파일을 생성하면서 단어의 조합이 아닌 파일이 생성 되면서 발생된 에러였습니다. vue에서 권장하듯이 두 단어의 조합으로 만드는게 가장 좋긴 하지만, 그렇지 못한 경우에는 어떻게 해야할지 찾아봤습니다. 'vue/multi-word-component-names': 'off' 를 추가하면 된다고 하는데 어디다 추가를 해야할까요? .eslintrc.js 파일이 없다면 가장 최상위 루트에 .eslintrc.js파일을 생성..
-
[Vue] Vue Instance개발/Vue 2022. 3. 27. 23:59
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성 해야 하는 기본적인 단위이다. Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있다. 뷰 인스턴스를 생성할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달 해야한다. new Vue({ // 옵션 }); new Vue({ el: '#app', //마운트할 엘리먼트 data{ message: 'hello' // 데이터 } }); 옵션 속성 인스턴스를 생성할 때 재정의할 data, el, template 등 속성을 의미한다. 속성 설명 el 대상이 되는 html element 혹은 css selector data 화면을 그리는데 사..