vuejs

Setting

Vue.js 구글 크롬 확장 프로그램 설치

2022.03.17

Vue.js Devtools https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com 확장 프로그램 설치 구글에 vue.js devtools라고 검색하면 아래와 같이 맨 첫 줄에 Vue.js devtools - Chrome Web Store라고 뜬다. 크롬 브라우저에 설치가 되면 개발자 도구에 Vue가 추가된다. 이렇게 뜨면 뷰 확장 프로그램 설치가 완료된 것이다. 도움말을 보니 편의성도 더 좋아진 거 같아서 점점..

Web

MVVM 패턴

2022.03.15

MVVM 패턴 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴으로, 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식이다. MVVM 패턴을 사용해 개발하면 화면의 요소들을 제어하는 코드(프런트엔드 영역)와 데이터 제어 로직(백엔드 영역)을 분리하여 코드를 직관적으로 이해하기 쉬워진다. 유지 보수 또한 비교적 편해지는 편이다. Vue.js를 예시로 들어 보자면 MVVM 구조가 아래와 같이 이루어져 있다. 만약 HTML 문서가 변경이 된다면 DOM의 구성 요소도 변경될 것이다. View에서 DOM의 구성 요소가 변경되면(예를 들어 사용자가 다른 페이지로 이동하는 버튼을 클릭하여 화면에 보이는 내용이 달..

Vue.js 구글 크롬 확장 프로그램 설치

MVVM 패턴

티스토리툴바