일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- v-html
- Vue
- CSS
- Wecode
- TypeScript
- Vue.js
- webpack
- 댓글달기
- 리액트
- 자바스크립트
- vuex
- State
- storybook
- express
- scss
- react
- HOC
- App.vue
- ES6
- nodejs
- input
- 자료구조
- jsx
- MySQL
- event
- Vue transition
- JavaScript
- sass
- 쉬운설명
- mapGetters
- Today
- Total
목록분류 전체보기 (238)
익명의 개발노트
고차함수는 다른 함수를 반환하는 함수이다. const discounter = discount => { return price => { return price * (1-discount); }; }; const tenPercentOff = discounter(0.1); tenPercentOff(100); //90 아래와 같이 화살표함수를 이용해서 사용가능 const discounter = discount => price => price *(1-discount); discounter(0.1)(100) //90 이 방법은 두개의 다른 매개 변수를 가진 함수를 단일함수로 변환할때 유용하다고 한다. 출처: 자바스크립트 코딩의 기술
위와 같이 인풋창에서 한글입력시 이벤트가 한템포 늦게 동작하는 경우가 발생한다. 한글이 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을 하..
vuex를 모듈화하여 사용하고자 가독성을 높이려고 vue-module-decorator 를 설치하였다. ssr에서는 어떨지 모르겠지만, 일반적인 spa에서 발생한 문제를 남긴다. npm 다운로드 숫자는 2만 5천회 정도. 안된다.. 아래와 같은 에러가 발생... Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? That works only in dynamic modules. 구글링 해본결과 동일한 문제를 겪는 사람들이 많았다. 그리고 해당 라이브러리 깃헙 이슈에도 이미 19년 7월 30일에 등록된 이슈가 있었다. 깃헙 : https://gith..