본문 바로가기

전체 글

 (364)
함수 호출 방식에 의해 결정되는 this - 1. 함수 호출 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받는다. 자바스크립트의 경우, 함수호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수 호출 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); }; //1. 함수호출 foo(); // window // window.foo();와 동일 //2. 메소드 호출 va..
[Udemy Vue 완벽가이드 Section2] 28. 데이터 바인딩에 사용되는 메서드 작동원리 지금까지 공부한 것 1. Dom Interaction, Templates & Data Binding - DOM의 일부분을 만드는 법을 배웠다. Vue앱을 마운팅해서 Vue앱 템플릿을 만들었다. Vue.createApp({}).mount('#app'); - 보간법, v-bind, v-html을 이용한 데이터바인딩 2. Event Handling - v-on과 v-model을 이용한 이벤트처리. (정확히 말하면 v-model은 양방향 바인딩(데이터바인딩 + 이벤트바인딩)) 3. 이제 배울 것 : 고급 반응성 'Advanced' Reactivity : 고급 반응성 Vue는 반응형이다. 이미 많은 곳에서 확인했다. ex: 입력하면 name이 업데이트된다. counter 변경. 양방향 바인딩을 추가했는데, 추가하..
[Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩 input태그에 있는 입력값을 reset하려고 한다. 이를 위해 새 메서드인 resetInput을 추가한다. JavaScript를 이용하여 input에 액세스 할 수 있다. querySelector로 input태그에 액세스하고, value프로퍼티에 액세스하여 빈 문자열로 설정. reset(){ document.querySelector('input').value = ''; } 이렇게 하면 작동은 되지만, 임시방편적인 해결책이다. (hacky) 이렇게 노골적으로 JavaScript 구문을 쓰면 Vue를 사용하는 이유가 없다. Vue의 기능을 활용해보자! 먼저, 키 입력마다 최종적으로 업데이트되는 값인 name 데이터 프로퍼티를 input요소에 출력해보자. value속성을 name으로 설정하는데 name은 동..
keydown 이벤트는 왜 한박자 느릴까? Vue 강의에서 input태그에 이벤트로 keydown을 주어, 아래 p요소의 output창에 입력한 값이 나오도록 만들었다. 하지만 keydown이 한박자 느리게 진행이 되었다. 아래와 같이. 오잉? 왜이럴까? 버그인가? 이유가 궁금해서 찾아보았다! 원인은 바로..! keydown 이벤트가 input 이벤트보다 먼저 실행이 되어 input요소의 입력값이 변경되기 전의 value값을 keydown이벤트가 전달해줘서 한 박자 느리게 실행되는 것이다! input 이벤트는 입력값이 변경될 때마다 발생한다. 그래서 keydown이벤트가 input 이벤트보다 먼저 실행이 된다는 건, input에 있는 value값이 변경되기 전에 keydown이벤트가 발생을 한다는 뜻! 아래 예시를 보면 더 이해가 쉬울 것 같다...
[Udemy Vue 완벽가이드 Section2] 26. v-once로 콘텐츠 잠그기 거의 사용할 일은 없다. 하지만 필요한 순간에 유용하게 쓸 수 있다. → '초기값'을 고정해야 하는 상황! 이 앱에서 데이터 프로퍼티인 counter를 변경할 때 출력을 바꾸고 싶지 않을 수 있다. 즉, counter의 초기값을 유지하고 싶은 경우. Starting Counter라는 값을 출력하고, Vue 인스턴스에서 관리하는 counter 데이터 값을 가리킨다. 하지만 counter를 변경하고 싶지 않다. 일부 데이터는 변경하고, 초기 상태는 유지하면서 상태를 바꾸지 않고 사용할 수 있는 특별한 디렉티브 → v-once Vue에 내장된 기능. 보간법을 한번만 평가하도록 한다. 그 이후 그 값이 바뀌어도 반영하지 않고 업데이트되지 않는다. index.html Add Reduce Starting Count..
[Udemy Vue 완벽가이드 Section2] 25. 이벤트 수식어 알아보기 Sign Up 위 경우, 이 부분이 Vue가 제어하는 HTML 부분이라고 하더라도 'Sign Up'버튼을 클릭하면 페이지가 새로고침이 된다. why? 브라우저의 기본값으로서, button이 있는 양식을 제출하면서 이 앱을 제공하는 서버에 HTTP요청을 보내게 되는데, 여기서는 서버없이 로컬 환경에서 실행되지만 여전히 브라우저가 로컬 기기로 요청을 보내기 때문에 요청 후, 새로고침(리로딩)이 된다. **참고 button 태그의 type속성인 3가지 값 중 하나를 지정해 줄 수 있다. submit, reset, button button 태그에 type을 지정해두지 않으면, 기본값이 'submit'이다. 즉, 아래의 두 코드는 동일한 코드로 봐두 무방하다. 버튼 버튼 그래서, 위의 코드를 다시 작성해보면 아래..
[Udemy Vue 완벽가이드 Section2] 24. 네이티브 이벤트 객체 사용하기 v-on을 통해 입력 요소에서 input이벤트를 수신할 것을 Vue에 알린다. event에 keyup, keydown을 적어도 되지만 HTML요소인 에서 수신할 수 있는 최고의 이벤트 : 'input'. 입력요소의 기본 DOM 이벤트로 Vue와 전혀 관련이 없고, 순수 JS에서도 input 이벤트를 수신한다. app.js methods: { setName(){ this.name = ?? } } setName함수에서 사용자가 입력한 값을 가져와 이름으로 설정하는게 까다로울 수 있다. 사용자가 입력한 값을 어떻게 알 수 있을까? → JavaScript 에 내장된 기본동작이 있다. 1/ 먼저, HTML 코드에서 setName메서드를 가리키게 한다. 그래서 키를 입력할 때마다 input이벤트가 일어나면서 set..
[Udemy Vue 완벽가이드 Section2] 23. 이벤트 인수 활용하기 만약 아래와 같이 +1, -1이 아니라, 5를 더하고 빼고싶다면? → 메서드에 매개변수를 허용할 수 있다! const app = Vue.createApp({ data(){ return { counter: 0, } }, methods: { //add() { 기존의 +1인 경우 // this.counter = this.counter + 1; //}, add(num) { this.counter = this.counter + num; }, //reduce() { 기존의 -1인 경우 // this.counter = this.counter - 1; //}, reduce(num) { this.counter = this.counter - num; } }, }) 그렇다면 매개변수의 값(전달인자)이 5라는 것은 Vue에 ..

티스토리툴바