Watcher 저번에 동적 값을 출력하는데 핵심 기능을 하는 Computed Property에 대해 배웠습니다. Vue에 내장된 따 다른 Advanced Reactivity가 있는데 바로 Watcher 입니다. Watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행하도록 지시하는 함수입니다. Computed Property와 비슷하며, 실제로 대체해서 사용도 가능합니다. 하지만 왜 그러지 않고 분리된 건지 동작 방식을 설명하겠습니다. Watcher의 선언방법은 data나 method, computed 처럼 watch 라는 고유한 이름을 사용합니다. const app = Vue.createApp({ data() { name: '' }, methods: { ... }, watch..

Computed(연산) Property const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, resetInput() { // document.querySelector('input').vlaue = ''; this.name = ''; ..

양방향 바인딩 : v-model Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ name }} const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, rese..

Event Modifier Events in Action Add 5 Reduce 5 Result: {{ counter }} Your Name: {{ name }} Sign Up 만약 위 코드의 마지막 p태그 밑에 form 태그를 넣고 input과 button 태그를 넣고 버튼을 누르면 어떻게 될까요? 페이지가 새로고침 됩니다. 그 이유는 브라우저의 기본값이 버튼이 있는 form 양식을 제출하면서 앱을 제공하는 서버에 HTTP 요청을 보냅니다. 여기선 그런 서버없이 로컬 환경인데도 불구하고 여전히 브라우저가 로컬로 요청을 보내기 때문입니다. 일반적으로 Vue같은 프레임워크를 사용할 때는 이번 브라우저 기본값을 방지하고, 수동으로 Vue 앱에서 Javasript로 처리합니다. 거기서 사용자의 입력값을 읽고 ..

Native Event Object 이번엔 기존의 HTML코드에 사용자의 이름을 input으로 입력받아 바인딩된 데이터의 값을 변경해보겠습니다. Your Name: {{ name }} methods: { ... ... setName() { } } 위 코드의 이벤트 리스너인 v-on의 input의 값으로 Vue의 실행 함수명을 넣어주면, 그 함수는 자동으로 인수를 하나 얻게 됩니다. (브라우저에서 제공하는 인수) 그 인수는 발생한 이벤트를 설명하는 객체가 될겁니다. 위 HTML에서 함수명에 ()를여서 실행시키는 것이 아닌 함수명만 넣어서 포인터를 지정해 줬기 때문에 브라우저에서 기본으로 제공하는 이벤트 객체를 하나 받게 됩니다. 이 방법이 왜 유용할까요? 이 기본 이벤트 객체는 이벤트 정보로 가득하기 때문..