[vuex] Strict Mode와 Form Handling
1. Strict Mode strict 모드를 사용하기 위해서는 strict: true를 Vuex의 store를 만들 때 추가만 하면 됩니다. const store = new Vuex.Store({ // ... strict: true }) strict 모드에서는 state가 mutation 핸들러 외부에서 변경 될 때 마다 오류를 발생 시킵니다. 배포시 strict 모드를 꺼야 합니다. strict 모드는 부적절한 state의 변경을 감지하기 위해 state 트리를 관찰하기 때문에, 성능 저하가 발생합니다. 성능 이슈를 해결하기 위해서는 배포 버전에서는 strict 모드를 꺼야 합니다. const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV..
[Vue.JS] 컴포넌트 (고급:Custrom Events)
1. 이벤트 이름 $emit을 이용하여 커스텀 이벤트를 만들 때, 이벤트 이름은 kebab-case를 사용하는 것이 좋습니다. 컴포넌트의 이름이나 prop의 이름과 달리 이벤트 이름은 자동으로 변환(camelCase kebab-case)되지 않습니다. 이벤트 이름은 정확히 일치하는 이벤트 리스너와 매칭됩니다. 예를 들어, this.$emit('myEvent')위의 코드와 같이 myEvent 이벤트를 발생 시킨다고 할 때, 부모 컴포넌트는 위의 코드와 같이 myEvent를 받기 위해 v-on:my-event를 사용한다면, my-event는 myEvent가 발생 했다는 것을 감지 할 수 없습니다. 컴포넌트의 이름이나 prop의 이름과 다르게 이벤트 이름은 자바스크립트의 변수나, 속성으로 사용되..
[Vue.JS] 폼 입력 바인딩
이번 포스트에서는 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다. 1. v-model 사용법 v-model 디렉티브를 사용하여 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. 참고 - IME 사용시 유의사항 IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다. 문자열 메시지: {..