본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section2] 35. 클래스 및 연산(computed) 프로퍼티 원한다면 computed 프로퍼티를 동적으로 CSS 클래스를 추가할 때 활용할 수도 있다. HTML 코드에 로직이 있는 건 최적은 아니므로. 위와 같은 class바인딩도 괜찮지만, 로직을 HTML 외부로 옮기고 싶을 경우 computed 프로퍼티를 추가해보자! index.html app.js Vue.createApp({ computed: { boxAClasses(){ return {active: this.boxASelected} //Vue앱내부이므로, this를 붙여야한다. } } }) 복잡한 동적 클래스코드가 많으면 유용한 기능이다. true/false만 참조하는게 아니라, if문같이 더 복잡한 검사를 하거나 여러 객체를 반환하는 경우 등 복잡한 동적클래스 코드가 많을 경우, computed를 이용하는..
[Udemy Vue 완벽가이드 Section2] 34. 동적으로 CSS 클래스 추가하기 인라인 스타일을 동적으로 바인딩 하는 방법을 알아보았다. 2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링 [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링 지금까지 보간법과 v-bind를 이용한 데이터바인딩, computed 프로퍼티나 감시자와 같은 기능을 이용한 Vue의 반응성, 이벤트 바인딩에 대해서 배웠다. 모두 꼭 알아야 할 핵심 기능들! 살펴봐야 할 기 lion284.tistory.com 인라인 스타일을 동적으로 바인딩해도 작동하지만, 여러 단점이 있어 자주 사용하지 않는다.(아래 참고) 1. 코드의 가독성이 떨어진다 : 각 HTML 요소마다 직접 스타일 속성을 지정..
[Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링 지금까지 보간법과 v-bind를 이용한 데이터바인딩, computed 프로퍼티나 감시자와 같은 기능을 이용한 Vue의 반응성, 이벤트 바인딩에 대해서 배웠다. 모두 꼭 알아야 할 핵심 기능들! 살펴봐야 할 기초적인 내용이 하나 더 있다. 바로 스타일링. 정확하게는 동적 스타일링. Vue에서 동적 스타일링을 사용하면 event에 따른 반응으로서, 페이지 항목의 스타일을 '동적'으로 바꿀 수 있다. #미션 : 요소를 클릭하면 활성화된 강조표시 이를 구현하는 방법으로는 가장 간단한 방법은 아니지만 이해하기 쉬운 방법이 있다. 1/ 우선 Vue.createApp으로 새로운 앱을 생성한다. 객체를 전달하고 상수에 저장한다. 앱에 mount를 호출해서 HTML 코드의 어딘가로 mounting 한다. 2/ Vue앱에..
HTML파일에 CSS 적용하는 방법 3가지 HTML 파일(문서)에 CSS 스타일을 적용하는 방법은 3가지가 있다. 바로, 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 1. 인라인 스타일(Inline style) : HTML 요소 내부에 style속성을 사용하여 CSS스타일을 적용하는 방법. 해당 요소에만 스타일을 적용할 수 있다. 인라인스타일 위 예시에서는 해당 h2 요소에만 color:green, text-decoration:underline 스타일을 적용할 수 있다. 인라인스타일 방식은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용..
급할수록 돌아가라 Later is better than never.
[Udemy Vue 완벽가이드 Section2] 31. 메서드 vs 연산(Computed) vs 감시자(Watcher) # Methods : Use with event binding OR data binding 1) Data binding : Method is executed for every "re-render" cycle of the component. - 데이터 바인딩을 위해 method를 쓰는 경우, 즉, 중괄호 사이에 method를 사용하여 템플릿에서 Vue 인스턴스로 logic을 아웃소싱 하는 경우 method는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행된다. 그러므로 변동사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출한다. - 페이지에 변동사항이 있을 때마다 method가 재실행된다. 원하지 않으면 computed 프로퍼티를 사용해라! 아래 글 참고 :) [Udemy Vue 완..
[Udemy Vue 완벽가이드 Section2] 30. 감시자(Watcher) 활용하기 # computed 프로퍼티 복습 computed - 동적 값을 출력하는데 핵심 기능. ex: 복수의 입력값(의존성) 또는 지금처럼 입력값 한 개와 하드코딩된 값 한 개가 있는 경우. //HTML Your name: {{ fullname }} //JS computed: { fullname() { if(this.name === '') { //name이 의존성 return ''; } return this.name + ' ' + 'Schwarzu'; //입력값 name + 하드코딩된 값 }, } # watch 프로퍼티 Vue에 내장된 또다른 반응성 기능이 있다. 바로.... → 감시자(watcher) watch - 의존성 중 하나가 변경될 때 Vue에 실행하도록 지시할 수 있는 함수. (얼핏 들으면 compu..
[Udemy Vue 완벽가이드 Section2] 29. 연산(Computed) 프로퍼티 소개 method를 호출하여 반환값을 넣는 대신, 코드 자체를 넣는 방법도 있다. Your name: {{ outputFullname() }} Your name: {{ name + ' ' + 'Schwardud' }} 아래 p요소처럼 코드 자체를 넣으면 화면에 변경이 생길 때마다 Vue에 의해 메서드가 재실행되는 문제를 피할 수 있다. Vue가 이 코드에서 무엇이 사용되었는지 인식할 수 있기 때문. 위 경우엔 name이 변경된 경우에만 재평가된다. 하지만 HTML코드에 로직이 생겼다. → 이건 좋은 방법이 아니다. 로직은 JavaScript 파일에 작성! 이를 위해, 멋진 기능인 computed 프로퍼티가 있다! computed프로퍼티는 메서드와는 다른 한 가지 중요한 차이점이 있다. 바로.. Vue가 의존성..

티스토리툴바