ice rabbit programming

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

자바 스크립트는 오랜 기간 발전하면서 하위 호환성을 유지한 채로 발전해왔다. 하지만 2009년 ES5가 출시되면서, 일부 기능이 변경되고 추가되면서, 하위 호환성 이슈가 발생할 수 있게 되었다. 그래서 이를 해결하고자, 기본 모드에서는 새로운 기능이 동작하지 않고, 'use strict'라는 지시어가 있을 경우에만 동작하도록 적용하였다. 이것이 엄격 모드이다. 'use strict' 지시어는 단순히 string처럼 보이지만, 최상단에 위치하는 경우 해당 스크립트는 모던 자바스크립트로 동작하게 된다. 'use strict' console.log('모던 JS로 실행됩니다') use strict 지시어는 최상단에 위치하지 않을 경우 적용되지 않을 수 있다. 즉, 중간에 넣을 경우 모던 자바스크립트로 동작하지 ..

이전 글에서 CSS에서 변수 사용하는 것을 다룬 적이 있다. 글에서 사용한 방법은 다른 CSS 파일에서 변수를 가져다가 사용할 수 있게 된다. 오늘 포스팅에서는 자바 스크립트 파일에서 사용하는 것에 대해서 소개하고, 타입 스크립트일 경우에는 모듈을 포함하는 걸 추가로 작성하려고 한다. 과정을 요약하면 CSS에서 변수를 export하고, JS/TS 파일에서 import하여 사용하는 간단한 과정이다. CSS에서 변수 선언 및 export하기 첫 번째로는 CSS에서 변수를 정의한 후에, export를 해주어야 한다. 다음과 같이 사용하면 된다. $theme-colors: ( 'someColor': #000, 'anotherColor': #FFF, ); :root { @each $key, $value in $t..

이전 글에서도 몇 번 언급했지만 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)는 넣을 수 없다. 우회하는 방법이 있으나 이는 추후에 시간이..

프론트엔드를 개발하다 보면, window 객체를 종종 사용하는데, 기본적으로 있는 속성 외에 추가해서 사용해야 할 경우도 있다. 자바스크립트라면 문제가 되지 않겠지만, 타입스크립트는 아는 타입의 경우에는 해당 객체에 있는 속성인지까지 미리 체크를 하기 때문에 문제가 발생한다. console.log(window.tempProperty) 이런 식으로 없는 속성을 사용하려면, 에러가 발생한다. 물론 타입스크립트의 오류를 끄거나 할 수 있지만, 오류를 끄고 any를 남발할수록 굳이 타입스크립트를 쓰는 의미가 퇴색되므로 바람직하지 않다고 생각한다. 아래처럼 속성을 추가해 declare하면 해결된다. declare global { interface Window { tempProperty: string; } }