Front

Watch 우리는 종종 반응형 상태가 변경 되었을때 감지하여 다른 작업(api 호출 등)을 수행해야 하는 경우가 있습니다. 예를 들어 어떤 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다. Compositon API의 watch 함수를 사용하여 반응형 상태가 변경 될 때마다 특정 작업을 수행할 수 있습니다. watch의 첫번째 인자는 감지할 데이터, 두번째 인자는 콜백 함수 () =>{} 콜백 함수의 매개변수로는 (변경된 새로운값, 이전 값) watch (감지 데이터, (새 값, 이전 값) => { }); watch의 첫번째 매개변수로 getter 함수를 넣어 줄 수있다. watch의 매개변수로 array를 넘길 수 도 있다. 결과도 array로 받는다. obje..

v-model 프론트엔드에서 입력 양식을 처리할때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많습니다. value를 바인딩하고 @input 이벤트로 text를 변경하는것은 번거로울 수 있습니다. 그래서 Vue에서는 이런 작업은 단순화 하도록 양방향 바인딩을 할 수 있는 v-model 디렉티브를 제공합니다. textarea :value, @input v-model checkbox, radio, select v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)을 사용합니다. input text="text"와 textarea는 value 속성과 input 이벤트를 사용합니다. checkbox와 radio 버튼은 checked ..

이벤트 처리는 v-on 디렉티브로 사용할 수 있습니다. 그리고 v-on 이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용됩니다 메소드 이벤트 핸들러 v-on 디렉티브에서 메소드를 호출할 수 있습니다. 그리고 이때 매개변수로 event 객체를 받습니다 event.target으로 엘리먼트에 접근 할 수 있다. 이벤트 객체 접근 인라인 핸들링에서 event 객체에 접근할 수 있습니다. 접근하는 방법은 $event 키워드를 사용합니다. 바로 함수를 실행시키고 싶을때 $event로 event 객체에 접근한다. 디렉티브 구성 디렉티브는 다음과 같이 구성되어 있습니다. 디렉티브(Directives) : v- 접두사가 있는 특수 속성으로 디렉티브의 값이 변경될때 특정 효과를 반응적으로 DOM에 적용하는것을 말합..

디렉티브 (directives) 디렉티브는 앞에서 말씀드렸던 것처럼 v- 접두사가 있는 특수 속성입니다. 그리고 디렉티브는 그대로 직역하면 지시를 뜻 합니다. 즉, 디렉티브는 기능상에서 중요한 역할인 컴포넌트 (또는 DOM요소) 에게 "~~하게 작동하라" 하고 지시를 해주는 지시문을 말합니다. Vue는 여러내장 디렉티브를 제공합니다 v-text 요구값 : string 설명 : 엘리먼트를 업데이트 합니다. textContent의 일부를 업데이트 해야하는 경우 버스태시 보간법을 사용해야 합니다. v-cloak 표현식을 요구하지 않습니다 사용방법 : 이 디렉티브는 연결된 컴포넌트 인스턴스가 컴파일을 완료 할 때 까지 엘리먼트에 남아있습니다. [v-cloack] {display : none} 과 같은 CSS 규..

v-for v-for 디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있습니다. v-for="item in items" 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다 v-for="(item, index) in items" 문법을 사용해서 배열 인덱스를 가져올 수 있습니다 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야 합니다 v-for 객체 v-for를 사용하여 객체의 속성을 반복 할 수도 있습니다

v-if v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용한다. v-if 안의 조건이 true일때 보이고 false일때 보이지 않는다. v-else v-else 디렉티브는 v-if가 거짓(false) 일 때 렌더링 하는 블록이다 v-else-if v-else-if는 이름에서 알 수 있듯이 v-if에 대한 else if 블록이다. 여러 조건을 연결 할 수 있다. 여러개의 HTML 요소를 v-if 디렉티브로 연결하고 싶다면 을 사용할 수 있습니다. template으로 조건을 거는건 실무에서 자주 사용된다. v-show 요소를 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브 이다. v-if 대 v-show v-if는 실제로 렌더링 됩니다. 전환 할 때 블록 내부의 컴포넌트들이 제거되고 다시 생성되..

객체 바인딩 클래스를 동적으로 바인딩하기 위해서는 :class(v-bind : class)를 사용할 수 있다. active는 style이 정의되어 있는 class이고 isActive는 true, false 값이 저장되어 있는 변수다. 'text-danger' 는 가운데에 - 가 있어서 '' 로 감쌌을뿐 똑같이 style이 정의되어 있는 class이고 hasError는 true, false 값이 저장되어 있는 변수다. Class 바인딩은 이렇게 여러 class 사용이 가능하다. 위 예시처럼 v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있다. 그리고 객체를 반환하는 computed에 바인딩 할 수도 있습니다. 만약에 바인딩할 데이터가 많다면 객체로 선언해서 사용할수 있다. active..

템플릿 문법 {{ }}은 간단히 사용하면 매우 편리하지만 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워진다. 이럴때 사용하는게 computed 이다. arrow 함수임으로 명령어가 하나일때는 retrun과 중괄호 생략이 가능하다. computed가 아닌 메서드로도 구현 가능하지만, 메서드이기 때문에 템플릿 문법에서 실행할때 () 괄호를 넣어줘야한다. 결과는 똑같지만 computed 가 성능면에서 비용이 적게 든다. 왜냐하면 computed는 안에서 계산된 값이 캐시되기 때문이다. 같은 컴포넌트 안에서 existLecture, hasLecture를 여러번 호출해보자. method는 두번 호출되고 computed는 한번만 호출된다. 그 이유는 computed는 한번 계산된 결과를 ..

reactive 함수는 객체나 배열같은 레퍼런스 타입을 반응형 객체로 만들 수 있다. String, number, boolean 이러한 프리미티브한 타입을 반응형 객체로 만들려면 어떻게 해야할까? primitive 타입에 reactive 함수를 쓰면 반응형으로 동작하지 않는다. reactive 함수는 객체나 배열같은 reference 타입의 반응형 상태, 반응형 객체를 선언하는 함수이기 때문이다. console.log 로 찍어보면 메시지는 그냥 string이다. 자바스크립트 언어의 특성을 보면 당연한 결과다. 아에 값 자체를 새로 바꿔버리기 때문이다. retrun시킨 message (콧수염괄호 안에 있는 message) 와 addMessage() 함수 안에 있는 message 두개의 상태를 서로 동기화 ..

텍스트 보간법 데이터 바인딩의 가장 기본형태인 콧수염 괄호를 사용하는것 입니다. 콧수염괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message 값으로 대체 됩니다. message 속성이 변경될 때 마다 갱신됩니다. v-once 데이터가 변경되어도 갱신(반응)되지 않는 일회성 보간을 수행할 수 있다. 문자열 : {{ message }} v-html html을 출력하려면 v-html 디렉티브를 사용해야 합니다 텍스트 : {{ rawHtml }} v-html : 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 쉽게 이어질수 있고 이는 위험할 소지가 있습니다. html 보간법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다. XSS 취약..