Methods Use with event binding OR data binding Data binding: Method is executed for every "re-render" cycle of the component Use for events or data that really needs to be re-evaluated all the time Computed Use with data binding Computed properties are only re-evaluated if one of their "used values" changed Use for data that depends on other data Watch Not used directly in template Allows you to..
Functions Parameters Type 함수의 파라미터(parameter)에 어떤 타입의 인수(argument)가 들어와야 하는지 명시해줄 수 있음. 파라미터에 n:type 형식으로 타입을 명시함. Functions Return Type 함수의 리턴값도 타입으로 명시해줄 수 있음. 보통의 경우에는 타입스크립트가 알아서 추론하지만 명시해주는 것이 도움될때가 많음. Union type 값이나 타입이 하나만 반환되지 않을 경우 유니온 타입이라고 함. Annonymous Functions 익명함수를 호출할 경우, 파라미터의 타입을 자동적으로 추론함. 또한 Contextual 부분도 자동적으로 감지할 수 있음. (실행 컨텍스트 관련) Void 아무것도 반환하지 않는 함수의 반환타입으로 사용하는 타입 nev..
Type Annotation type Annotation(타입 주석) : 변수에 자료형을 명시해 주는 것 let myVar: type = value 형식으로 작성 type 부분은 소문자로만 작성해야 함. (대문자 등등 X) Type Inference 타입스크립트 컴파일러가 코드의 value를 추론해서 타입을 생성함. 즉 Type annotation을 사용하지 않아도 타입이 자동적으로 강제됨. any any 타입은 딱히 타입을 캐치하지 않음. 남발하면 JS와 다를바 없는 코드가 됨.
watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행을 지시하도록 명령하는 함수이다. computed property와 비슷한 역할을 하며, 실제로 computed property 대신 watcher를 사용할 수 있다. 아래 코드를 보자. watcher는 data property를 감시하는 역할을 한다. 따라서 name을 감시할거면 name() 처럼 선언해주면 되고. counter를 감시할거면 counter() 처럼 선언해주면 된다. 파라미터는 2개를 가질 수 있으며, 첫번째 파라미터는 현재값이고, 두번째 파라미터는 그 전 값이다. 위 코드에서는 name property가 바뀌게된다면 watch내부의 name()은 아래의 로직에 따라 실행된다. 의존성이 2개가 필요한 상황이라면? Watc..
computed properties는 methods의 리렌더링 시 생기는 재호출문제를 막아주기 위해 사용할 수 있다. https://2duckchun.tistory.com/396 methods의 리렌더링 시 재호출에 관련된 문제점 input창에 텍스트를 입력하면 '개발자'라는 문자열이 추가되어 화면에 렌더링되도록 코딩을 해놓은 상태이다. 그런데 해당 로직과 관련없는 버튼을 클릭했을때도 메서드가 실행이 되고 있다. 왜 2duckchun.tistory.com computed는 data나 methods와 같이 vue에서 정의한 기능 중 하나다. computed가 methods와 다른 점은 computed는 반응 의존성(reactive dependencies)를 캐치해서 그 부분이 변할 경우에만 실행된다는 점이..
input창에 텍스트를 입력하면 '개발자'라는 문자열이 추가되어 화면에 렌더링되도록 코딩을 해놓은 상태이다. 그런데 해당 로직과 관련없는 버튼을 클릭했을때도 메서드가 실행이 되고 있다. 왜일까? 코드는 아래와 같다. HTML Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} RESET Your Name: {{ outputFullname() }} JavaScript const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { outputFullname() { console.log('Add만 눌렀는데 Your Name 관련 메서드가 실행되네요? 잉?..
HTML Events Event Practice Show Alert v-once는 초기값을 유지시켜줘요 : {{ text }} {{ text }} {{ confirmEnterText }} JavaScript const app = Vue.createApp({ data() { return { text: "initial value", enterText: "OutPut", confirmEnterText: "Not Confirmed" } }, methods: { btnAlert() { alert("hi") }, textInput(event) { this.text = event.target.value }, setEnterText(event) { this.enterText = event.target.value }, ..
리렌더링되는 부분이 데이터가 변하는 부분만으로 한정되어있음을 볼 수 있다. vue의 내부 동작을 통해 반응형 데이터만 리렌더링 함으로써 효과적으로 브라우저 기능을 사용하고 있다. HTML Vue Events Events in Action Add 5 // 상수 5가 파라미터로 전달됨 Reduce 5 // 상수 5가 파라미터로 전달됨 Result: {{ counter }} // 이벤트객체가 파라미터로 전달됨 // 이벤트객체와 문자열이 파라미터로 전달됨 Name: {{ name }} Age & Gender: {{ ageGender }} 이벤트는 v-on: 으로 HTML 엘레먼트에 바인딩시킬 수 있다. 일단 이벤트 종류는 바닐라 자바스크립트와 같다. v-on:click="바인딩할메서드" 형태로 사용한다. 일단 ..
HTML {{ myname }} {{ myage }} {{ myage + 5 }} {{ randomNumber() }} 누르면 나이 5씩 증가 JavaScript const app = Vue.createApp({ data() { return { myname: "2DC", myage: 29, imgUrl: "https://cdn.pixabay.com/photo/2012/10/06/22/18/horse-60153_960_720.jpg" } }, methods: { ageUp() { this.myage += 5 }, randomNumber() { return Math.random() } } }).mount("#assignment")
Vue와 같은 프레임워크는 선언형 접근 방식을 사용한다고 표현한다. 선언형 접근 방식이 뭘까? 선언형 접근방식 개발자는 목표를 정의하고, 컨텐츠의 템플릿을 정의한다. 이후 동적 바인딩이 필요한 부분에 v-접두사나 {{ }} 를 이용해 데이터 추가를 표시한다. 그렇게 해두면 vue가 나머지 작업을 처리한다. 즉, vue는 내부적인 모든 준비를 다 해놓은 상태이며, 강조한 부분에 개발자가 원하는 데이터를 업데이트 한다. 즉 실제 DOM을 업데이트 해주고 사용자가 볼 수 있게 한다. 따라서 개발자는 동적 플레이스홀더를 지정하고, 최종적인 그림만 정의하면 작업이 끝나게 된다. vue에 대한 줄글 1 vue 인스턴스는 하나의 HTML 엘레멘트와 결합이 가능하며, 바인딩된 엘레멘트의 자식요소에 영향을 미칠 수 있다..
