FrontEnd/Vue 관련자료3 canvas에 mouse drawing 작업을 완성하기 위해 걸린 삽질 정리 5일간의 삽질여정 -> vue boostrap modal의 canvas에 마우스로 drawing 을 하려함. (초기) -> 잘 안됨, canvas에 mouse drawing이 전혀 안그려졌음(이걸로 이틀정도 삽질함) -> 방법을 계속 찾다가 vue로 simple하게 mouse로 drawing 해주는 플젝과 참고했던 프로젝트를 비교하면서 canvas의 width, height 지정해주는 부분이 문제가 있다는 것을 발견 (parentElement.clientWidth/Height 로 canvas의 값을 동적으로 잡아주는 건데 modal 에서 하려니 계속 0으로 뜸) https://codepen.io/getflourish/pen/EyqxYE -> 이를 hard하게 값을 넣어주니 잘 됬음 -> 당연히 화면크기나.. 2019. 4. 17. vue-i18n pure js 에 적용하면서 생긴 문제 해결 상황:Vue에서 i18n을 적용하는데 pure js에는 vue-i18n 의 t() 메소드가 제대로 적용이 안되고 오류 발생. 해결:- main.js에 위치한 i18n 관련 코드들을 따로 js 파일로 분리(예: i18n.js)- 해당 i18n.js 파일에서 export default new VueI18n({..}) 와 같이 해주기- main.js에서 i18n.js 파일을 import 하고 이를 global.vue = new Vue({.., i18n, ..}) 의 i18n 옵션에 설정(global.vue = new Vue에 i18n을 설정하는 것은 Vue 프로젝트에서 전역으로 사용하겠다는 것)- 사용하려는 pure js에서 i18n.js 를 import 하면 t() 메소드 사용이 되면서 해결. 코드로 과정을.. 2019. 3. 13. 케밥 케이스, 파스칼 케이스 Vue에서 컴포넌트들을 나눌 때 key, value 같이 지정하지 않고 적당히 형식을 맞춰 적는다면 알아서 네이밍을 하고 찾아서 쓴다는 것을 알 수 있었다. 예) 타 Component 에서 component 등록할때 이름 : OverallEvaluation.vue 타 Component 의 template에서 사용될 때 이름 : v-overall-evaluation 위에서 보듯이 Vue는 사용자가 직접 지정하지 않아도파스칼케이스(첫 단어를 대문자로 쓰는 표기법) -> 케밥케이스(단어를 하이픈 문자로 구분하는 표기법) 으로 자동으로 네이밍 처리해주고 사용한다는 것을 알 수 있었다. ** 수정 : 하이픈으로 구분하는 표기법은 케밥 케이스(kebab case) 라고 부른다, 이 때까지 스네이크 케이스라고 잘못 .. 2018. 11. 26. 이전 1 다음