익명의 개발노트

이미지 있을때 파란 화살표가 옆으로 한칸씩 밀리는 기능 구현하기?? 기본적으로 회색, 파란색 + 버튼은 전부 이미지이다. 이미지가 3개 이므로, 조건을 걸어주고 다르게 보여주기로 생각했다. 기본적으로 9개는 html단에서 for문으로 돌려서 생성했고, 그 안에 이미지의 조건은 따로 만든 flag 배열의 인덱스 값으로 걸어주었다. 맨 처음부터 파란색 + 버튼으로 시작하기때문에 flag 배열의 값은 아래와 같이 할당했다. data(){ return { imageListFlag:[1, 0, 0, 0, 0, 0, 0, 0, 0], } }, 플래그 값은 파란색 플러스 버튼은 1, 이미지가 들어오면 2, 아무것도 없으면 0으로 조건을 주었다. 디자이너의 의견으로 회색버튼은 클릭이 안되게 동작해야한다. 그리고 파란 ..

vue tooltip 라이브러리 중에 vuetify를 제외하고 쓸만한 라이브러리가 v-tooltip 밖에 없는 듯... 1. 설치 npm install --save v-tooltip 2. 글로벌 등록 //main.js import Vue from 'vue' import VTooltip from 'v-tooltip' //추가 Vue.use(VTooltip); //추가 new Vue({ router, store, render: h => h(App) }).$mount('#app') 3. 스타일 적용하기 공식문서에 일반 css 와 pre-processor 방식인 sass, less 방식이 있다. 공식문서에는 자세히 안나와 있어서, 전역 스타일 안에다가 아래 코드를 넣었는데 작동하지 않았고, 개발자 도구를 열고 ..

위와 같이 인풋창에서 한글입력시 이벤트가 한템포 늦게 동작하는 경우가 발생한다. 한글이 2byte로 되어있기 때문에 이런문제가 생기는데, (한글뿐만 아니라, 일본어, 중국어도 마찬가지) 공식문서를 참고하면 IME를 요구하는 즉 한글과 같은 언어가 제대로 업데이트되기 위해서는 v-model대신 input directive를 사용하라고 명시되어 있다. 이런경우 코드를 아래와 같이 수정해 준다. 아래와 같이 잘 나타난다.

우선 설명하기전에 Blob에 대해서 설명하고 넘어가려 한다. Blob: Binary Large Object의 줄임말로 써 이미지, 사운드 파일 같이 하나의 큰 파일을 의미하며, 이런 파일들은 특별한 방법으로 다루어야하며, 멀티미디어 객체들을 저장하기 위해 주로 사용한다. (Blob객체 참고) 은 .files라는 것을 가지고, files는 File 객체(new File())의 콜렉션이다. 그리고 File객체는 Bolb를 확장해서 만들어 진 것이며, Blob를 쓸 수 있는 곳이면 File도 사용할 수 있다. * 모든 DBMS가 BLOB를 지원하지는 않음. input type="file" 로 이미지 미리보기 기능 구현시 reader 객체를 써서하는 dataURL방법과 URL 객체인 createObjectURL..

Vuex를 사용하다보면, 내가 사용하는 쪽에서 Vuex 상태관리 내용을 보고 싶을 때, 크롬 Vuex extenstion을 설치해서 확인하는데, 이 익스텐션에서 아래와 같이 Load State를 눌러가면서 확인해야하는 번거로움이 있다. 이럴때 사용하고자하는 페이지에 mapGetters를 사용하지 않아도 아래와 같이 선언을 해주면, import { mapGetters } from 'vuex'; export default { computed:{ ...mapGetters(['사용하고자하는 store이름']) }, ... } 아래와 같이 vuex bindings 라는 상태창에서 실시간으로 확인할 수 있다. 굳이 vuex 탭가서 확인할 필요가 없다.

input 태그를 이용하여 여러개의 파일을 선택하여, 업로드 전 미리보기를 구현하려 한다. 한 개씩 적용할 때는 간단했는데, 여러개를 동시에 보여주려고 하니, 문제가 발생했다. 아래 코드는 한개씩 클릭해서 올리는 방식일때 코드이며, this.uploadImages는 컴포넌트의 자체 state 값(data() 안에 값)이다. onFileSelected(event){ var input = event.target; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = (e) => { this.uploadImages.push(e.target.result); }; reader.readAsDataURL(input.fil..

프로젝트에 기존에 드래그 앤 드랍 때문에 dragula 라이브러리를 도입했지만, json 데이터 정렬과, vue plugin 제한으로 새로운 라이브러리를 찾는 도중 vue-draggable 라이브러리를 찾았다. 해당 라이브러리는 wrapper 로 감싸서 사용하는 방식이며. 굉장히 간단하다. 1. 설치 npm install vuedraggable 2. 적용 import draggable from 'vuedraggable'; export default { name: 'list', components:{ draggable }, } 실제 보여줄 드래그해서 움직일 데이터 바인딩을 :list를 통해서 바인딩시켜주며, 트랜지션 효과를 먹이고 싶으면 을 적용하며, 필요없으면 생략하면 된다. 실제 보여줄 리스트를 dra..

Vue 자체에 절대경로 설정은 @로 내장되어있는데, 스토리 북에서 글로벌 .scss 파일을 지역 scss 파일에 include 혹은 다른 작업을 하기위해 아래와 같이 import 하는 경우 //지역 컴포넌트 @import '@/assets/common-stylesheets/index.scss'; //절대경로설정 .root-header{ @include size(100%, 50px); //include를 쓰려면 글로벌에서 mix인한 내용을 불러와야함 } 웹팩 에러가 나는 것을 볼 수 있다. (해당이슈는 스토리북 이슈에도 있으나, 개발진들이 답을 달아주지는 않은 상황) 상대경로는 작동하는데, 지역 scss 에서 import 할때마다 경로가 다르면 나중에 유지보수 하기에 성가신 상황이 올 수도 있다. 뷰에서 ..

vue-property-decorator 클래스 기반 타입스크립트에 storybook을 설정하는 법 스토리북에서 *.stories.ts를 만들어서 vue파일을 import 하면 *.vue 파일 내부에 '@' 데코레이터를 인식을 못해서 에러가 날 것이다. 이런 경우 스토리북 웹팩을 설정해주어야 한다. .storybook 폴더 밑에 webpack.config.js 파일을 만들어 주고, 웹팩 플러그인을 설치해준다. yarn add -D fork-ts-checker-webpack-plugin //타입스크팁트 체커 // 또는 npm i -D fork-ts-checker-webpack-plugin babel-preset-vue가 없다면 반드시 설치해주어야 한다. yarn add -D babel-preset-vue ..

Vuex 구조 index.ts ├─ ModuleCreateTheme.store.ts ├─ ModuleEditTheme.store.ts └─ ModuleUserInfo.store.ts 각 모듈별 똑같이 getters 를 아래와 같이 작성했다. getters: { getAllState: state => state, } getters를 사용하고자 하는 컴포넌트에서 불러온다. this.$store.getters['moduleUserInfo/getAllState'] // this.$store.getters[네임스페이스, 함수명] 기존에는 getters를 사용할때 computed에 ...mapGetters를 선언하고 사용했는데, 바로 사용이 가능하다. 추가적으로 모듈화된 내용에 action이나 mutation을 하..