본문 바로가기
반응형

Vue3

vuetify 에서 v-switch 텍스트 색상 변경하는 법 문제 아래처럼 스위치를 통해 접속 상태를 나타내는 요구사항이 있었다. ‘접속 허용중’ 일때는 초록색 텍스트, ‘접속 차단중’ 일때는 빨간색 텍스트로 보여주어야 했다. 스위치는 vuetify 프레임워크에서 제공하는 v-switch 로 간단하게 처리할 수 있었는데 https://v2.vuetifyjs.com/en/components/switches/ 공식문서에는 label color 를 변경하는 방법이 따로 나와있지는 않아서 삽질을 했다.. 해결 stack overflow 에서 힌트를 얻을 수 있었는데, v-slot:label 을 이용해서 처리할 수 있었다. 접속 차단중 접속 허용중 ... private isNotConnectionAllUser = false; 위처럼 isNotConnectionAllUser.. 2023. 9. 12.
VS Code 로 개발하면서 사용중인 플러그인 VS Code 로 개발하면서 사용중인 유용한 플러그인을 정리해봄 IntelliJ IDEA Keybindings VS Code 를 사용하면서 인텔리제이와 단축키가 많이 달라서 햇갈릴 때가 많았는데, 이 플러그인을 사용하면 단축키를 인텔리제이와 거의 흡사하게 바꿔주기 때문에 정말 강추하는 플러그인 Material Icon Theme 폴더 및 파일의 아이콘을 정말 이쁘고 가독성 있게 바꿔줌. 강추 One Dark Pro 다양한 테마 플러그인이 있는데 개인적으로 One Dark Pro 가 가장 깔끔한듯 Auto Rename Tag 닫힘 태그를 자동으로 완성해줌. 생산성 ⤴ CSS Peck 적용 된 css 를 command + 클릭 으로 추적할 수 있게 도와줌 HTML CSS Support CSS 자동 완성 기능.. 2021. 6. 17.
Vue 란 무엇일까? Vue 란 ? MVVM 패턴의 뷰모델 (ViewModel) 레이어에 해당하는 화면 (View) 단 라이브러리 MVVM Model - View - ViewModel 패턴으로, 로직과 UI 분리를 위해 설계된 패턴이다. Command 패턴과 Data Binding 패턴을 사용하며, 두 패턴으로 인해 View 와 ViewModel 은 의존성이 사라진다. DOM 이 View 의 역할, 자바스크립트가 Model 의 역할을 한다. 동작 원리 View 에 입력이 들어오면 Command 패턴으로 ViewModel 에 명령 ViewModel 은 필요한 데이터를 Model 에 요청 Model 은 ViewModel 에 필요한 데이터를 응답 ViewModel 은 응답 받은 데이터를 가공해 저장 View 는 ViewModel .. 2021. 5. 26.