ice rabbit programming

Vue에서 컴포넌트 간에 데이터를 넘기고, 이벤트를 발생시키고 받아서 처리하는 것은 매우 중요하고 또 흔하게 사용되는 방식이다. 자식 컴포넌트에서 emit시킨 이벤트는 주로 v-on, @를 통해서 지정하여 발생한 이벤트에 대한 처리를 많이 하게 된다. 그런데, 같은 컴포넌트를 여러 번 사용하거나 이벤트 명이 겹치는 경우가 발생할 수 있다. (물론, 서로 다른 이벤트의 경우 이벤트 명이 겹치는 일 자체를 먼저 피해야할 것이고, 자식의 자식에서 발생할 때에는 stop이나 prevent를 사용하는 방법도 있다.) 그럴 때 string 구문을 사용해서 dynamic하게 구독할 이벤트 명을 지정해줄 수 있다. 아래에 작성하겠지만, 방법 자체는 꽤 간단한데 구글링 등 검색했을 때 잘 나오지 않아 따로 포스팅으로 정..

이전 글에서도 몇 번 언급했지만 Vue에서 class 형태로 컴포넌트를 정의하기 위해, vue-class-component를 주료 이용한다(공식 사이트에서도 언급한다). 일반적인 Vue.extend로 사용하는 것과 기능은 같지만 Watch, Prop 등의 사용법이 약간 달라서 헤매는데, 컴포넌트 내부 네비게이션 가드를 사용할 때도 사용법이 조금 다르다. 네비게이션 가드를 통해서 라우터 전후의 이벤트를 정의해줄 수 있다. 추가적으로 컴포넌트 내부에서 사용하는 훅은 다음과 같다. beforeRouteEnter beforeRouteUpdate (2.2 버전에 추가) beforeRouteLeave 메소드명이 명확해서, 사용하기엔 무리가 없으나 vue-class-component를 사용할 경우에는 미리 정의가 필..

https://kr.vuejs.org/v2/guide/typescript.html#%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EA%B3%BC-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%83%80%EC%9E%85-%ED%99%95%EC%9E%A5 TypeScript 지원 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue 3.0부터는 아예 TypeScript를 지원하지만, Vue 2.0도 공식 가이드 등에서 TypeScript 사용을 지원하고 있다. Vue를 사용하다 보면, 플러그인을 Vue.use로 포함하고, 전역적으로 Vue.plugin..

vue 앱의 npm 패키지들을 업데이트 하다가, TypeError: this.getOptions is not a function 라는 에러가 발생하는 것을 확인하였다. 찾아보니, sass-loader의 최신 버전이 11인데, 이것은 vue 3.0 이상에서만 동작하는 것이 원인이었다. 일전의 글에서도 언급했듯이, 아직 vuetify 등 UI 프레임워크들이 vue 3.0를 지원하지 않기 때문에(공식 사이트 목표 배포는 2021 3Q이다) 본인은 2.6.12를 아직 사용하고 있다. 그래서 sass-loader를 10 버전을 이용해야 한다. package.json 혹은 yarn.lock에 씌어 있는 버전을 ^10.0.2로 수정한 후에 npm install / yarn install을 실행하거나, 아예 npm u..

본인은 Vue에서 UI 프레임워크로 Vuetify를 애용하고 있다. 물론 본질적으로는 Vue의 컴포넌트, 이벤트 등을 이용하여 구현된 것이기 때문에 타 프레임워크를 사용하거나, 직접 만들어도 원리는 같다. 입력을 위해서 v-text-field 등을 사용하는 경우가 많은데, 유효성 검사를 위해서 rules 속성을 사용하는 경우가 많다. 가장 많이 사용하는 비었는지 여부부터 해서, 정규식을 사용하기도 한다. 흔히 회원 가입 창에서 보는, 맞지 않는 규격일 경우에는 빨간 테두리가 쳐지면서 에러 문구가 아래에 출력되는 것이 디폴트 동작이다. (참고로 rules 속성에는 boolean 함수/변수들을 넣을 수 있으나, async-await(Promise)는 넣을 수 없다. 우회하는 방법이 있으나 이는 추후에 시간이..

공식 문서 설명 : router.vuejs.org/kr/guide/essentials/history-mode.html HTML5 히스토리 모드 | Vue Router HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의 router.vuejs.org vue는 SPA로, 처음에 모든걸 받아서 내부 router를 이용해 이동한다. 디폴트 모드로 사용하면 경로에 hash(#)가 들어가있는 것을 볼 수 있다. 예를 들어 https://my-page.com/#/home과 같은 식이다. 이 때 vue router 설정에서 history mode를..

최근에 Property or method "blahblah" is not defined on the instance but referenced during render 에러를 몇 번 마주쳐서 삽질을 했던 경험이 있다. 물론 문자 그대로 template에 쓰인 변수/함수/속성인데, undefined일 때 나오는 에러이다. 본인이 겪었던 몇 가지 경우를 아래에 정리하고, 본인의 케이스인지 확인해보면 좋을 듯하다. 1. 선언 후 초기화하지 않았을 경우 자바스크립트를 사용할 경우 let myVar;만 해두고 값을 넣지 않은 경우, 타입스크립트를 사용할 경우에는 타입 체킹으로 이런 실수를 할 위험이 현저하게 줄지만 let myVar: string | undefined; 이후에 값을 넣지 않는 경우가 종종 발생한다..

이 글을 검색으로 들어온 개발자라면 v-model에 대해서는 능숙하게 사용하겠지만, 앞 부분에서 간단하게만 짚고 넘어가겠다. 아래의 링크들은 모두 vue 공식 문서(한글)로 연결되어 있다. v-model 웹 프론트엔드나 클라이언트 프로그래밍은 사용자에게 직접 데이터를 제공하고 입력받는 UI를 다룬다. 이 데이터를 내부 로직으로 처리하거나 서버로 보내 처리하는 등의 과정이 필요하기 때문에, UI와 데이터 간의 바인딩이 필수적이다. vue에서는 v-model이라는 키워드로 바인딩을 제공한다. 아래처럼 쓸 수 있다. // ... // ... data() { myData: '' } input의 value가 myData로 바인딩되어, 초깃값 설정 및 입력 시 담는 등의 활용이 가능해진다. 컴포넌트 간의 통신 이번..