vueJS에서 list를 drag and drop 해서 순서를 변경할 수 있는 라이브러리가 존재한다. 데모 사이트 Full demo example : https://david-desmaisons.github.io/draggable-example/ draggable-example david-desmaisons.github.io 라이브러리 선언 예제 (div) id : {{item.id}} name : {{item.name}} new Vue({ el: '#list', data: { list : [ {id : "1" , name : "drag"}, {id : "2" , name : "drop"}, ] } }); 예제 (table) {{item.id}} {{item.name}} table에 tr요소를 drag ..
What is Nuxt.js? Nuxt.js는 일반적인 Vue.js 어플리케이션을 만드는 프레임워크 입니다. Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다. 즉, CSR기반인 vue.js에 SSR을 제공해주고, vue.js의 설정을 자동화시켜주는 프레임워크입니다. 장점 Nuxt는 기본적으로 Vue + Library를 포함하고 있으며, VueJS를 사용할 때 하나하나 설치하고 설정해줘야 했던 부분들이 자동화되어 따로 설치하거나 설정을 할 필요가 없어져 초기 프로젝트 설정 비용 감소와 생상성을 향상시켜주는 장점을 가지고 있다. 그리고 당연하게도 SSR만의 장점들을 가지고 있는데, Nuxt는 흔하게 알고 있..
https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key List Rendering | Vue.js vuejs.org Vue에서는 v-for를 사용할 경우 key 속성을 바인딩하도록 가이드 되어있다. key속성을 바인딩 하는 이유에 대해 랜더링과 관련하여 알아보자. [in place patch 전략] VUE는 메모리를 최적하 하기위해 DOM을 재사용한다. DOM이 바뀌어야할 부분만 처리하고 DOM을 재사용한다. DOM 재사용 측면에서는 우수하나 문제을 일으킨다. [이슈 : 배열의 랜더링] 랜더링한 배열의 순서가 바뀌면 in place patch전략을 사용하기 때문에 변경 부분만 patch를 하게된다. 변경된 부분에 한해서만 patch..
우선적으로 알아두실 사항은 composition api은 옵션이라는 것입니다. 기존 vue2에서 사용하는 옵션 api를 사용하셔도 되고, 본인의 취향, 각 api의 장단점을 비교하여 composition api를 사용하여도 됩니다. 공식 홈페이지에서는 options api, composition api 사용을 아래와 같이 건고하고 있다. Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습니다. 학습 목적으로 이해하기 쉬운 스타일을 사용하십시오. 다시 말하지만 대부분의 핵심 개념은 두 스타일 간에 공유됩니다. 나중에 언제든지 다른 스타일을 선택할 수 있습니다. 생산용: 빌드 도구를 사용하지 않거나 점진적 향상과 같이 복잡도가 낮은 시나리오에서 주로 Vue를 사용할 계획이라면 옵션 API를 사용하..
Vue 프로젝트를 진행하면서 컴포넌트 기능이 중복이 발생하는 경우가 많이 생겼다. 그럴땐 Extends, Mixins 를 사용하여 재활용을 하면 된다. Mixins Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법 mixins은 전역으로 적용할 수 있음 (주의) 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 줌 따라서, 적게 이용하고 신중하게 사용하기 사용 예제 {{ num }} {{ msg }} click import Extends from './components/Extends.vue' import Mixins1 from './components/Mixins1.vue' import Mixins2 from './components/Mixins2.vue' imp..
vue는 SPA(Single Page Application)를 기준으로 작성되는 프레임워크다. 라우터기능을 통해 링크의 주소는 바뀌지만 실제로 페이지가 바뀌는게 아닌 것 이다. 그러므로 직접적으로 주소를 쳐서 접근하거나 새로고침 등을 하게되면 페이지를 인식하지 못하게되며(404, not found) 빈페이지가 뜨는 오류가 발생하게 된다. 즉 라우터로 경로를 이동후 새로고침하면 404 error가 발생하였다. 결론부터 말하면 처리방법은 404 error가 발생시 싱글페이지인(index.html)으로 페이지를 return해주면 된다. 공식문서를 보면 웹서버단 에서 설정을 주라고 가이드가 나와있다. https://router.vuejs.org/guide/essentials/history-mode.html#ap..
vue3Cli 프로젝트를 진행하면서 도메인이 다른 API서버에 요청을 보낼 시 cors error가 발생하는 경우가 빈번하다. 위와 같이 Node js 서버에서 Proxy 설정이 가능하다. 1. vue.config.js vue-cli 프로젝트의 루트 디렉토리(package.json 파일이 있는 위치) 에서 vue.config.js 라는 파일을 만들어줍니다. 2.devServe 설정 vue.config.js 파일에 다음과 같이 작성해줍니다. // 파일 경로: /root/vue.config.js module.exports = { // 개발 서버 설정 devServer: { // 프록시 설정 proxy: { // 프록시 요청을 보낼 api의 시작 부분 '/api': { // 프록시 요청을 보낼 서버의 주소 t..
Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다(자식 컴포넌트에서는 Props값의 수정이 불가능하다.) 부모 컴포넌트 자식 컴포넌트 export default { props: { title: {type : [String,Number], default : 100}, //여러가지 타입 허용 title2: { type: [String,Number], //여러가지 타입 허용 required: true //필수로 전달 받아야함 }, title3: { type: Object, default: () => {} //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함 } }, title4: { type: Array, required: true, defaul..